ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、

今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。

 

Smart Slider 3 をインストール

1.WordPress管理画面の左メニュー　→　プラグイン　→　新規追加

2.検索窓に「Smart Slider 3」と入力すると下記のようにヒットすると思います。　→　今すぐインストール

3.インストールが完了　→　有効化

これでプラグイン「Smart Slider 3」が使えるようになります。

 

Smart Slider 3 でスライダーの作り方

 

1.新規作成

WordPress管理画面に「Smart Slider」が表示されていると思います。　→　クリックして編集画面を開きます。　→　下図の「NEW SLIDER」をクリック

2.スライダーの新規設定

下図の赤枠で囲んだ部分を指定していきます。

「Slider name」は自分の好きな名前にしてください。

「Width Height」は自分のサイトに適用したいサイズを指定してください。（後から変更できるので深く考えなくてもいいです）

「Preset」は自分のサイトに適用したいものを選んでください。（後から変更できるので深く考えなくてもいいです）

最後に、「CREATE」をクリック

3.画像を追加

一つのスライダーの中に表示させる画像を追加していきます。

下図の赤枠で囲んだところを選択すると画像をアップロードする画面が現れます。

画像をアップロードをしてください

先ほどのアップロード画面で使用する画像にチェックを入れて完了すると下図のようになります。

赤枠で囲んだところに、選択された画像が表示されています。

左上には、一番始めに付けた名前が記されています。

「GOT IT!」はエラーが出ていませんよという意味です。クリックしてください。

4.スライダーの詳細設定

上図の下にメニューが表示されています。

その部分をそれぞれ設定していきます。

デフォルトのままでもかまいませんが、自分なりに設定してみてください（後から変更ができます）

続いて、同じ画面の赤枠で囲んだ部分も自分の好きなように変更してください（後からでも変更できます）

5.保存

最後に、右上にある「SAVE」をクリックして保存してください。

 

WordPressでショートコードを使う

先ほど新規作成したスライドショーが下図のように表示されていると思います。

「EDIT」をクリックすると、今まで見てきた同じ画面が表示されます。

下図は作成しているときに表示されていた画面ですね。

「PUBLISH」にあるショートコードが今回新規作成したスライドショーになります。

上記の左側にある「Shortcode」に記載されている赤枠部分をコピーして、投稿画面や固定ページに貼りつけると、貼りつけた部分にスライドショーが表示されます。

 

WordPressで条件分岐して使う

ここが今回のポイントになります。
 
「header.php」の表示したい部分に下記のコードを入力します。

<!-- ヘッダー画像　条件分岐 -->
 <div id="slider-sample">
   <?php
       if ( is_front_page()) {
	echo do_shortcode('[smartslider3 slider=2]');
     } elseif ( is_page(red)) {
        echo do_shortcode('[smartslider3 slider=3]');
     } else {
        // それ以外
     }
     ?>
</div><!-- /slider-sample-->

 
フロントページ（トップページ）には、先ほどの「PUBLISH」の中の右側にあるPHPのコードを記述します。
続いて、２つ目のスライドショー（今回は作っていませんが）があれば、固定ページの「red」には、別のPHPコードを記述します。

これで、ページごとに違うヘッダーのスライドショーが作成することが出来ました。

 

スマホでの見え方を変えたい

 
パソコンでの見え方は良かったのですが、スマホだといまいちっていう方もいらっしゃいます。
もちろんこのプラグインはレスポンシブになっているので、そのままでも大丈夫ですが、どうしても変えたいっていう方には、下記のコードにすれば簡単にできます。
ちょっとその前に。
面倒かもしれませんが、「Smart Slider 3」でスマホ用に再度スライドショーを作成する必要があります。
同じ画像でよければコピーで簡単にできます。
下図の赤枠で囲んだところから「Duplicate」をクリックするとコピーできます。

それでは、スマホ用に用意したスライドショーを条件分岐に入れたいと思います。

<!-- ヘッダー画像　条件分岐 -->
 <div id="slider-sample">
   <?php
       if ( is_front_page() && !is_mobile()) {
	echo do_shortcode('[smartslider3 slider=2]');
     } elseif ( is_front_page() && is_mobile()) {
        echo do_shortcode('[smartslider3 slider=3]');
     } elseif ( is_page(red) && !is_mobile()) {
        echo do_shortcode('[smartslider3 slider=4]');
     } elseif ( is_page(red) && is_mobile()) {
        echo do_shortcode('[smartslider3 slider=5]');
     } else {
        // それ以外
     }
     ?>
</div><!-- /slider-sample-->

上記のようにそれぞれに 「slider=数字」を当てはめてください。