wordpress

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

投稿日:

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

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

 

Smart Slider 3 をインストール

Smart Slider 3

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

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

Smart Slider 3

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

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

 

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

 

1.新規作成

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

作り方

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

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

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

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

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

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

Smart Slider 3 新規設定

3.画像を追加

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

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

Smart Slider 3

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

Smart Slider 3

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

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

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

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

Smart Slider 3

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

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

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

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

Smart Slider 3

Smart Slider 3

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

Smart Slider 3

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のコードを記述します。
続いて、2つ目のスライドショー(今回は作っていませんが)があれば、固定ページの「red」には、別のPHPコードを記述します。

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

 

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

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

<!-- ヘッダー画像 条件分岐 -->
 <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=数字」を当てはめてください。

-wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

カスタムスクロールバー

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

  WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

予約システムを編集者

MTS Simple Booking-C編集者ができるようにする

  予約システムをスタッフがする   WordPressの予約システムで有名なプラグイン『MTS Simple Booking-C』ですが、 作成者側ではなく、編集者(スタッフ)が …