サイト上部のスライダーを見るページに合わせて切り替える方法 -Meta Sliderプラグイン×Simplicityテーマ編-

ブログよりもいろいろなことができて、しかもカスタマイズし放題なツールの「Wordpress」。私はすっかりこの魅力にはまってしまいました。

でも、無料のテーマやプラグインを使って標準のまま使っているとどこでもあるようなサイトしかできませんね。大抵白い感じの全体像にヘッダー・本文・ウィジェットがパラパラと並んでいる感じ。気にしなければそれでもいいのですが、せっかく作るサイトだから自分好みにしたい!!

で手っ取り早く、しかも効果的にカスタマイズできるのがページのトップに表示する「画像が入れ替わるスライダー」。これを使うとグッとオリジナルなサイトになるのは確かで、このサイトでも【Simplicity】というメジャーなテーマを使わせていただきつつ画像スライダーで差を付けよう??としてます。

今回はもう1つ先を行って、「カスタム投稿タイプごとにスライダーを切り替えられないか?」ということにチャレンジします。カスタム投稿タイプを使うのは記事のジャンルが全然違う場合であることが多いわけですから、全部が同じトップスライダーでは雰囲気に合わない・・なんてこともこの方法で解消できますから是非やってみていただきたいです。

スポンサーリンク

Simplicityテーマでの設定例(カスタム投稿タイプ)

実際に今ご覧になっているサイトで使っている方法です。当サイトではカスタム投稿タイプを使って記事のジャンルを変えています。通常の投稿ですべてのジャンルの記事を書いてしまうとすごい数になってしまうし、記事を修正したくても探すのが大変になりますからね。Wordpressに関すること、日記、ペットの情報などいろいろと分けています。

カスタム投稿タイプはサーバー内の別のフォルダ(サブディレクトリと言います)で別のWordpressをインストールしてサイトを作るのと検索エンジンから見たら同じ「同一サイト内の別コンテンツ」として認識されますから、わざわざ同じテーマを使って似たようなプラグインを使って別で作るよりも管理もしやすいです。

その辺の話はこの位にして、本題に入りましょう。

スライダーの作成とテーマへの挿入

まずは【Meta Slider】プラグインでカスタム投稿タイプ用のスライダーを作成します。使用方法については公式ページで確認ください。

また、ヘッダーに【Meta Slider】のスライダーを挿入する方法(Simplicityの例)は

Wordpressにはいろいろなテーマがあって、画像中心のテーマなどではスタイリッシュなスライダーがタイトルの下にボーーンと表示されたりするものもあって格好いいですね。実はこれ、専用のテーマでなくても簡単に実装できるんです。今回は初心者向けにWordpressテーマのヘッダー部分に写真スライダーなどを挿入する方法を紹介します。構造さえ分かればスライダーだけでなくさまざまな要素をヘッダーに表示できるようになりますから覚えておくと便利です。

を参考にしてください(他のスライダー系プラグインでも複数のスライダーが設定できるものであればやることはほとんど同じです)

ここで一度きちんと表示されるかを確認してくださいね。ヘッダーにスライダー表示ができないままでは先に進めませんから・・・。

余談ですけど何かのカスタマイズをするときはこういう確認が大事です。全部書かれている通りにやったけどうまくいかない・・・だとどこがおかしいのか分かりませんからね。

カスタム投稿タイプで表示するスライダーを切り替える方法

前項できちんとスライダー画像が表示されたらいよいよページに応じて内容の変わるスライダーの設置です。

使うのは「条件分岐」というPHPのプログラムです。とはいえ難しくありませんから、理解しながらやってみましょう。

条件分岐というのは「〇〇だったら××を表示して、そうでなければ△△を表示する」という場合分けのことです。

基本的な構文は

<?php if (〇〇) : ?>
      〇〇だったら表示する内容=××
   <?php else: ?>
      〇〇でなかったら表示する内容=△△
    <?php endif; ?>

たったこれだけです。この〇〇というところに入る文字列を条件分岐タグというのですが、タグの種類や条件についてはこちらの公式解説ページ(Codex)をご覧ください。

ここではカスタム投稿タイプに絞って説明しますね。カスタム投稿タイプの条件分岐タグは「is_singular()」です。

例えば当サイトでWordpressの使い方に関するカスタム投稿タイプのスラグは「cms」なので、

<?php if (is_singular('cms')) : ?>
      <p>Wordpressの使い方に関する記事だったらここの内容を表示</p>
   <?php else: ?>
      <p>それ以外はここの内容を表示</p>
    <?php endif; ?>
という風に書きます。カスタム投稿スラグについては自身のサイトのものに書き換えてくださいね。

ひとまずこれを先ほどスライダーを挿入した下あたりに入れてみましょう。ね?関係する投稿タイプの記事の時は「Wordpressの使い方に関する記事だったらここの内容を表示」が、そうでなかったら「それ以外はここの内容を表示」という文字が現れますよね?これだけのことなんです。

では実際のスライダーに置き換えてみます。私のサイトの例ですが、メタスライダーで作ったCMS用のコードは

<?php echo do_shortcode("[metaslider id=17340]"); ?>

その他の場合のスライダーのコードは

<?php echo do_shortcode("[metaslider id=14972]"); ?>

ですから、

<?php if (is_singular('cms')) : ?>
      <?php echo do_shortcode("[metaslider id=17340]"); ?>
   <?php else: ?>
      <?php echo do_shortcode("[metaslider id=14972]"); ?>
    <?php endif; ?>

と書けばWordpressの使い方に関する記事の場合はIDが17340のスライダーが、そうでなければIDが14972のスライダーが表示されます。どうですか?この記事は「CMS」というカスタム投稿タイプの記事なのでパソコン関連の画像が、トップページでは植物や風景の画像が表示されますよね?基本的にはこれで設定完了。最初に1つのスライダーを挿入したコードへこのコードを上書きすれば、こうした切り替え表示ができるようになります。

自身のサイトで実際に設定してここまでの確認をしてくださいね。

複数の投稿タイプで共通のスライダーを使うときは

では次に、〇〇と××のカスタム投稿タイプはこれ、そうでなければこれという場合の設定方法を紹介します。同じく私のサイトでWordpressのプラグインを紹介している投稿タイプ「wppi」と先ほどの「cms」のいずれかだったら・・・という設定をします。

先ほどの条件分岐のコードの1行目

<?php if (is_singular('cms')) : ?>
これを編集します。これもphpの場合のお約束のようなもので、いくつかの条件を含める場合には「array()」を使います。編集済のコードは
<?php if (is_singular(array('cms','wppi'))) : ?>

つまり先程‘cms’だったものがarray(‘cms’,’wppi’)になるということなんです。

複数のカスタム投稿タイプがあるときはどうするか??

前項では一か八か(言い方悪いですね)の条件分岐を説明しました。ではたくさん分岐する場合はどうするの?ということで複数条件の場合について説明します。AでなければB、BでもなければCを表示しなさいという条件設定です。

先ほどのカスタム投稿タイプ「’cms’,’wppi’」に加え、これも私のサイトの場合ですがペット関係の記事がある「pet_animal」というカスタム投稿タイプの場合にも違うスライダーが表示されるようにしてみます。

<?php if (is_singular(array('cms','wppi'))) : ?>
      <php echo do_shortcode("[metaslider id=17340]"); ?>
<php elseif (is_singular('pet_animal')) : ?>
<php echo do_shortcode("[metaslider id=17343]"); ?>
   <php else: ?>
      <php echo do_shortcode("[metaslider id=14972]"); ?>
    <php endif; ?>

真ん中に2行増えてますよね?これが複数条件のコード(おまじない)になります。elseifですからそうでなかったら更に・・・という感じでしょうか。

<php elseif (is_singular('pet_animal')) : ?>
<php echo do_shortcode("[metaslider id=17343]"); ?>
cmsとwppiの投稿タイプでなかったら、pet_animalの場合はIDが17343を表示、それでもなかったら14972のスライダーを表示しなさいということになるんですね。

ちなみにペット関係のサンプルページ

鈴虫は夏の暑い最中、「リーンリーン」という羽音が涼し気な昆虫です。孵化や産卵期の準備をしっかりすれば、何年でも楽しむことができます。

を見ていただくと、ちゃんと他とは違う動物の画像スライダーになってますね。さらに条件を増やしたければこの2行を追加していけばOKです。

これでサブディレクトリではなくカスタム投稿タイプで作ったサイトの雰囲気を別のサイトのように見せる仕掛けができます。

また、同時に背景色などを投稿タイプで分けたい場合は

Wordpressのカスタム投稿タイプを表示する際に別々のCSS(デザイン)で表示する簡単な方法を紹介します

の方法を使うと便利です。もちろん併用もできますので管理画面1つで全く別のサイトが完成します!!しかも関連記事などの内部リンクコンテンツは全体から使えるので全く違うジャンルの記事を読んでファンになってくれる方も増えるかもしれません。

WordPressって本当に面白い

おまけ 条件分岐が分かるとテーマの中身が見えてくる

ゆっくりここまでやってくると、条件分岐というのが何となく分かってくると思います。その知識を持ってテーマの中身を覗いてみると、ここにも、あそこにも・・・と条件分岐が並んでいるのが分かります。じっと見れば「こうなったらこう表示するようにしてるんだ~」なんて流れがつかめるようになりますね。

そこで疑問に思うのが条件分岐の基本である

<php else: ?>
という「〇〇でなかったら・・・」という条件。これがないのが結構あります、なんで???

答えは何かを追加するために使用する条件だからです。

例えば、モバイル表示だけ表示しなさい!!という条件分岐は、裏を返せばモバイルでなかったら無視しなさい!!ということになり、単純に命令を無視すれば普通に表示されるからです。

今回のスライダーでもこの方法が使えるでしょ!と思った方はまだまだですね~。

もしも

<php else: ?>
という最終的にこれ!がなかったら

  1. 条件設定した投稿タイプ以外ではスライダーを表示しない
  2. いつも同じスライダーを表示しながら、条件設定した投稿タイプだったらさらに1つスライダー表示

のいずれかになってしまいます。2重にスライダー表示・・・あまりよくありませんね。

それで、同じ場所で必ず何かしらのスライダーが表示されるよう

<php else: ?>
で最終兵器を用意してるんです。

以上おまけ知識でした。

トップへ戻る