条件に応じてウィジェットの表示を切り替える方法[WordPress]

スポンサーリンク

ある条件に応じてウイジェットを切り替えたい

WordPressの場合、メニュー、新着記事、人気記事、広告などの部分は「ウイジェット」という単位で管理されています。
ウィジェットの設定は管理ページの「メニュー>外観>ウイジェット」をクリックします。
ウィジェットの設定
「利用できるウイジェット」から選んだウイジェットを表示させたい場所へドラッグすると、その場所に希望のウイジェットが表示されます。

ブログを運営しているうちに、ウィジェットの表示に不満が出てくることと思います。例えば、

  • PCとモバイルで表示するウィジェットを切り替えたい
  • トップページと投稿ページ、固定ページでウィジェットを切り替えたい
  • 記事のカテゴリによって表示する広告を切り替えたい

などです。

PCは画面の表示が大きいから新着記事、関連記事、人気記事をたくさん表示させたいけど、モバイルは画面が小さいからあまりたくさん表示したくない。

トップページの人気記事はカテゴリの関係なく読まれた記事を表示したいけど、投稿ページはその記事が属するカテゴリの中での読まれた記事を表示したい。

雑多ブログなので、カテゴリに応じた広告を表示させたい。

というような要望が出てくると思います。残念ながらWordPress標準の機能でそういったことを実現することはできません。しかし、WordPressのいいところは、標準でできないことであっても「プラグイン」をインストールすることで、できないことを実現できないようにできるところです。

なにかしら条件に応じてウィジェットの表示を切り替えることができるプラグインはないかと探してみたら、機能を実現できるピッタリのプラグインがありました。「Widget Logic」というプラグインです。

Widget Logicをインストールする

管理ページの「プラグイン>新規追加」で、「プラグインの検索」のところに「Widget Logic」と入力して検索します。

Widget Logic

「Widget Logic」が見つかると思いますので、インストールして有効化します。

設定は特にありません。すぐに使えるようになっています。

条件に応じてウイジェットを切り替えてみる

「Widget Logic」をインストールすると、ウイジェットの設定項目の一番下に「Widget Logic」という項目が増えています。ここに、そのウイジェットを表示するための条件を入力します。

Widget logic

条件は、WordPressの「関数」を使います。WordPressの関数の中で、表示しているページが条件にあっていたら「真(true)」を、条件にあっていなかったら「偽(false)」を返してくる関数があります。それらの関数をうまく組み合わせて、条件に合致するようにするのです。

上の画像では「is_home()」という関数を使っています。この関数は、ページが「メインページ」のとき、「真(true)」を返します。トップページ以外では「偽(false)」を返します。つまり、このウイジェットは、トップページでしか表示されない、というわけです。

WordPressでページの「条件」を返す関数はこちらに載っています。
サイト関数リファレンス
この中で、「is_○○()」「in_○○()」とある関数が、条件の判断に使えそうな関数です。

これらの中でぼくが使っている関数を幾つか紹介しましょう。

メインページかどうか

is_home()
メインページ、つまり、トップページかどうかを判断します。
ページがメインページであれば表示され、メインページでなければ表示されません。

カテゴリーに関連付けされているかどうか

in_category()
投稿ページが関数の()の中に合致する「カテゴリー」に関連付けされているかどうかを判断します。()の中には「引数」というものを入れます。例えば、引数に与えられるものとしては、「カテゴリー名」「カテゴリーID」を入れることができます。

  • in_category(‘ワードプレス’)
    投稿ページが「ワードプレス」というカテゴリーのときに表示されます。
  • in_category(array(‘ワードプレス’, ‘SEO’))
    投稿ページが「ワードプレス」「SEO」というカテゴリーのときに表示されます。
  • in_category(3)
    投稿ページがカテゴリーID=3のときに表示されます。
  • in_category(array(3, 4))
    投稿ページがカテゴリーID=3およびカテゴリーID=4のときに表示されます。

条件を複数指定したいときは、配列(array())にして指定します。また、カテゴリー名の時は文字列の前後を「’(シングルクオート)」でくくってあげないといけません。カテゴリーIDを指定するときの数字は「半角数字」です。

モバイルかどうか

is_mobile()
アクセスしてきた端末がモバイルかどうかを判断します。この関数は残念ながらWordPressには標準で用意されておらず、私が使っている「Simplicity」というテーマに付属している関数です。もしお使いの環境になければ作ることができます。

小テーマの「function.php」に下記の記述を追加すればOKです。

この関数は、「ユーザーエージェント(端末がサーバーに返す端末情報)」を取得して、その中に「iPhone」「iPod」「iPad」「Android」という文字があれば「モバイル」と判定します。

自作ですので、ブラックベリーやWindows Phoneのことは考えていませんw

否定、組み合わせの判定

条件は、否定、複数の関数を組み合わせて判定することもできます。

否定

否定、つまり「~でないとき」という条件を作ります。関数の頭に「!(半角のビックリマーク)」をつけると、否定の意味になります。

  • !is_home()
    メインページでないとき
  • !is_mobile()
    モバイルでない、つまり、PCのとき

という感じです。

組み合わせ

組み合わせ、というのは、「~かつ~」「~または~」というように、条件を組み合わせるやり方のことです。

  • AかつB
    A && B
  • AまたはB
    A || B

と書きます。

例えば、

  • is_mobile() && is_home()
    モバイルで、かつ、メインページのとき
  • !is_mobile() && is_home()
    モバイルでない(PCである)、かつ、メインページのとき
  • in_caategory(‘ワードプレス’) || in_category(‘SEO’)
    カテゴリーが「ワードプレス」または「SEO」のとき

このように書くことで、複数の条件を使って判定することが可能です。

in_caategory(‘ワードプレス’) || in_category(‘SEO’)
については、配列にして
in_category(array(‘ワードプレス’, ‘SEO’))
と書けますが

モバイルの判定とカテゴリの判定が便利

やはり、モバイルは画面が小さいので付加情報は最低限にしておきたいとか、広告のサイズも小さいものを表示したいとか、そういう要望はブログを長く続ければ続けるほど出てきます。ユーザーの環境に応じて表示を切り替えることによって、ユーザーエクスペリエンスの向上にも役立つのではないかと思います。

ではまた。楽しいブログライフを!

WEBのシステムを作ったり保守したりするSE/プログラマというものをしています。

ブログやってますがブロガーではありません。週末WEB随筆家です。
まろと呼んでください。

いわゆる「画像直リンク」、画像の複製は固くお断りいたします。
スポンサーリンク

シェアしていただけるとうれしいです

フォローよろしくお願いします

NO IMAGE
この記事が気に入ったら
いいねをお願いします!

最新記事をお届けします。