今回は、ヘッダー画像をランダムに変更する仕掛けをWordpressのテーマに仕込んでみます。
アクセスする度にサイトのイメージが変わるので、訪問者に常に新鮮な印象を感じていただけます。
導入が簡単な割に、効果の高いカスタマイズです。
ランダム表示スクリプトの入手・アップロード
以下のサイトからスクリプトをダウンロードします。
ダウンロード場所が少しわかりづらいですが、後の手順はとても簡単なので、便利なスクリプトを提供してくださっている作者様に感謝の気持ちを持って記事を読み解き、ダウンロードリンクを探しましょう。
次にダウンロードした rotate.txt の拡張子を php に変更します。
サーバ上のテーマファイルのあるディレクトリの “images” フォルダ内にランダム表示用のディレクトリ “random” を作成し、ここに rotate.php を FTP ソフトでアップロードします。
/wp-content/themes/テーマ/images/random/rotate.php
ランダム表示用画像の作成・アップロード
ランダムに表示させたい画像を複数作成し、上記で作成したディレクトリ “random” にアップロードします。
画像名は自由な名前で OK です。
背景画像指定スタイルの変更
テーマのスタイルシートを編集し、背景画像を指定しているスタイルの背景画像ファイルへのパスを rotate.php へのパスに変更します。
変更前
background:url(images/bg_header.jpg) 0 50% no-repeat;
↓
変更後
background:url(images/random/rotate.php) 0 50% no-repeat;
以上で完了です。
尚、一時的に背景画像を固定したいような場合は
background:url(images/random/rotate.php?img=static_image.jpg) 0 50% no-repeat;
とすることで対応できます。
初期状態では、rotate.php を置いたディレクトリ内にある画像をランダム表示しますが、rotate.php 内のパスを変更することで、画像の置き場所を変更する事が可能です。
例えば・・・
変更前
$folder = '.';
↓
変更後
$folder = 'http://labrid.jp/images/random/';
気が利いてますね。
Labrid WP ではとりあえず仕掛けは仕込んだものの、画像が2個しかないので、これから徐々に増やしていく予定です。