この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
写真素材ぱくたそ(www.pakutaso.com)photo by すしぱく
先日、レスポンシブ対応の有料WordPressテーマ「アルバトロス」に変更したことを書きました。
PC用とモバイル用で同じテーマを使うレスポンシブデザインのテーマにおいて、1つ問題となるのがサイドバーの表示/非表示。
画面の大きいPC用では表示させたいサイドバー。ですがモバイル用だとほとんど読まれないような最下部に回ってしまい不要な上に、画像・テキストの無駄な読み込みも発生してしまい良いことがありません。
PHPコードの条件分岐を使って表示/非表示を分けることはできますが、PHPコードがウィジェットで使えるプラグインを導入してIF文を書くのはわりと面倒。
そんなときに活躍するのが、WordPressプラグイン「Widget Logic」。
このプラグインを導入するとウィジェット1つ1つごとに表示条件を設定することができます。
例えば「モバイルの場合」「ホーム画面の場合」「特定カテゴリの場合」など。
要するに、WordPress内部で使う条件分岐がウィジェット単位で超手軽に使えるということ。
レスポンシブテーマにする上で懸念だったウィジェットの表示/非表示の出し分けが、このWidget Logicのおかげで一気にスッキリ解決しました。
WordPressでレスポンシブテーマを使っているブロガーやサイト管理者なら、ぜひ知っておきたいプラグインです!
Widget Logic(ウィジェットロジック)プラグインをインストール
まず、Widget Logic(ウィジェットロジック)プラグインをWordPressにインストールしましょう。
プラグインの新規追加画面から「Widget Logic」で検索してもいいですし、
WordPressのプラグイン公式ページからダウンロード⇒アップロードしてももちろんOK。
インストールし有効化すると、以下のプラグインが表示されているはずです。
ウィジェットごとに表示条件を指定できる
Widget Logicを有効化すると、管理画面の各ウィジェットの最下部に「ウィジェットのロジック」という欄が出てきているはずです。
ここに条件を記述することで、「その条件に当てはまる場合にしか出力しない」という制御が簡単にできるようになります。
例えば、モバイルでない場合に表示する(PCの場合のみ表示する)だと、以下の通り。
代表的なものは以下の通り。それぞれ頭に「!」マークをつけると逆の意味になります。
is_home() : ホーム画面(トップページ)
is_single() : 個別記事
is_page() : 固定ページ
is_category(‘1’) : カテゴリーIDが1のページが表示されている
is_tag(‘pickup’) : pickupタグのついたページが表示されている
実際の利用例
私の場合、モバイル表示のときは「サイト内検索」以外のサイドバーウィジェットを全て非表示にしています。パソコンとスマートフォンで比べてみてください。
また、「人気記事」ウィジェットについてはトップページではブログ全体の人気記事、
個別のページではそのカテゴリ内の人気記事を表示するようにしています。
以下は「生活用品」カテゴリの人気記事。
これも、Widget Logicと他プラグイン(WPP Plus Widget)の組み合わせだからできたこと。
あとがき
WordPressでレスポンシブテーマを使っているのなら必須と言ってもいいくらいの便利なプラグインです。もし知らなかったという方がいれば、ぜひ試してみてください!


