こんにちは。今回は、WordPressのカスタムヘッダー画像を順にスライドショー表示する方法について紹介します。

目次

  1. jQueryプラグイン・bxSliderを使ってスライドショー表示する
  2. テーマを編集する
    1. テーマのカスタムヘッダー機能を有効にする
    2. ヘッダー画像をアップロードする
    3. スライド表示するテンプレートに画像を読み込むコードを書く
    4. bxSliderを呼び出すjsスクリプトを作成する
    5. bxSliderとその実行スクリプトをWordPressで読み込むコードを書く
    6. bxSliderのCSSを読み込む

 

githubにテンプレートを公開しています。

bxSliderの設置前：before、設置後：after

 

jQueryプラグイン・bxSliderを使ってスライドショー表示する

スライドショー表示するjavascriptは巷に多く存在しますが、今回はbxSlider（jQueryプラグイン）を選択しました。選んだ理由は、「簡単」「カッコイイ」「Responsiveに対応」です！

デモはこちら

 

カスタムヘッダーとスライドショーを対応づけておくといいこと

今回はWordPressテーマの機能・カスタムヘッダーの画像を使って、スライドショー表示を行うようにします。具体的には、カスタムヘッダー画像として複数の画像をアップロード（or メディアライブラリから選択）しておき、bxSliderがそれらのヘッダー画像を順番に再生するようにします。

このようにすることで、スライドショー表示する画像をWP管理画面メニューから簡単に変更できるようになります。

 

 

テーマを編集する

次のような流れでカスタマイズしていきます。

  1. functions.phpに、テーマのカスタムヘッダー機能を有効にするコードを書く
  2. ダッシュボード＞外観＞ヘッダーメニューから、複数の画像を登録する
  3. スライド表示するテンプレートに画像を読み込むコードを書く
  4. bxSliderを呼び出すjsスクリプトを作成する
  5. functions.phpに、bxSliderと#4のスクリプトを読み込むコードを書く
  6. header.phpに、bxSlider用cssを読み込むコードを書く

 

#1 テーマのカスタムヘッダー機能を有効にする

functions.phpに次のコードを挿入します。なお、カスタムヘッダーについてよく分からないという場合は、過去の記事「カスタムヘッダーを設置する」で書きましたので参考にしてください。

functions.php

 

ここでは、900 x 200pxのサイズの倍解像度画像を表示するべく、1800x400pxを指定しました。

補足：デスクトップサイズの高解像度ディスプレイユーザーの割合はまだまだ少ないと思うので、元のサイズ900x200pxでも十分かもしれません。

 

#2 ヘッダー画像をアップロードする

#1の編集をした後でダッシュボードを再読み込みすると、新たに外観＞ヘッダーのメニューが追加されます。

画像を選択メニューから、スライドショー表示したい画像を複数登録して、最後に「変更を保存」ボタンを押しておきます。

 

#3 スライド表示するテンプレートに画像を読み込むコードを書く

ヘッダー画像として登録した画像へのURLを読み込み、bxSliderでのHTMLマークアップ方法に合わせて出力します。

bxSliderのHTMLの書き方は次の通りです。

<ul class="bxslider">
 <li><img src="/images/pic1.jpg" /></li>
 <li><img src="/images/pic2.jpg" /></li>
 <li><img src="/images/pic3.jpg" /></li>
 <li><img src="/images/pic4.jpg" /></li>
</ul>

 

上のように、画像をリストで書き出すようにコードを記述します。

frontpage4categories.php（スライドショーを表示したいテンプレート）に挿入

 

念のためにヘッダー画像が１枚も登録されていない場合を想定して、デフォルト画像をimgフォルダに入れておき、<img>タグを出力する処理を記述しておきます。

 

補足：ちなみに、もしもここまで実装したテーマを反映してサイト実行すると、スライドショーは動きませんが、スライドショーする予定の画像（ヘッダー画像）が全て縦に並べて表示されるハズです。

 

#4 bxSliderを呼び出すjsスクリプトを作成する

次にbxSliderを実行する、小さいスクリプトを作成します。

mybxslider.js

 

ここではbxslider.comのStep3で紹介されているスクリプトに、画面幅を変えたときにbxSliderをリロードする処理を追加しました。bxSlider()の中には、bxSliderのオプション値を書きます。スライドショーの効果や速度などを指定できます。詳しくはbxSliderのExamplesページを見てみてください。

 

#5 bxSliderとその実行スクリプトをWordPressで読み込むコードを書く

WordPressでjavascriptを読み込むには、それらをfunctions.phpで下記のような方法で指定する必要があります。2つのスクリプトは/jsフォルダに入れます。

functions.phpから抜粋

 

jQueryと、bxSliderと、bxSliderの実行スクリプトをそれぞれ読み込みます（途中記載のpageslideは別目的のプラグインで、この記事にWordPressでのjavascriptの読み込み方について書いています）。

 

bxSliderの実行スクリプトは、wp_enqueue_script()の第5引数をtrue指定し、footerで出力するようにしました。

 

#6 bxSliderのCSSを読み込む

bxSliderと同梱されているcssをWPテーマフォルダに入れて、他のcssファイルと同様に読み込みます。

header.phpに挿入
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css" type="text/css" />

 

 

以上で、スライドショーの設置が終わりました。如何でしょうか？貴方のサイトにもカッコイイスライドショーを実装してみてくださいね。

 

「実践的テーマの作成」の記事