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

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

関連記事

ワードプレス

All in One SEO Packで XMLサイトマップをGoogleに 送信する方法

  ワードプレスのプラグインで超有名な『All in One SEO Pack』ですが、必ず入れたいプラグインの1つです。 その名前の通り、SEO関係の機能が一つにまとまっているので、かなり …

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …

Google FontがEdgeで表示されない

Google FontsがEdgeで表示されない場合

  <link>で読み込んだのにEdgeで正しく表示されない   <link href=”https://fonts.googleapis.com/css2?fa …