プラグイン『ウィジェット設定』Widget Optionで軽量化を図る

WordPressのウィジェットを使えば、テーマ・テンプレートを直接編集しなくても、任意の場所に、表示したいコンテンツを配置することができますが、「カテゴリー別」「デバイス別」など、細かな条件分岐が必要な場合、テンプレートタグの知識が不可欠です。

テーマ・テンプレートの直接編集や、条件分岐がいまいち分からない方には、プラグイン『Widget Options』がおすすめ。

日本語のWordPress公式サイトでは、『ウィジェット設定』という名称で知られています。

WordPress.org 日本語
Widget Options – Add Context To WordPress Widgets
Widget Options – Add Context To WordPress WidgetsGet Better Control over your WordPress Widgets. Easily show or hide WordPress widgets on specific pages, for specific user roles, taxonomy or devices.
目次

プラグインの一般設定

通常の手順でインストールしたら、まず、プラグイン全般の設定を行います。

『設定』 → 『Widget Options』 を選択。

必要な機能の「有効化 / 無効化」を行います。

『Enable』で有効化。『Disable』で無効化。

『Confiture Setting』で、各項目の詳細設定を行います。

ウィジェット機能の選択

Pages Visibility

投稿タイプ別、カテゴリー別、タクソノミ別など、ページの種類によって、コンテンツの表示 / 非表示を切り替えるオプション。
プラグインのメイン機能です。

Devices Restriction

デバイス別の条件分岐。
「PC」「タブレット」「モバイル」によって、表示 / 非表示をコントロールすることができます。

Custom Alignment

コンテンツのポジションを調整。
align属性において、Left(左揃え)、Center(中央)、Right(右側)を指定。

Hide Title

ウィジェットのタイトルの表示 / 非表示を切り替え。

条件の有効化と無効化

Classes & ID

ウィジェットに特定のスタイルを適用する。

User Login State

ログインユーザーにのみ、表示 / 非表示を切り替え。

Display Logic

条件分岐のphpテンプレートタグを使った、表示 / 非表示の切り替え。

Live Widget Search

ウィジェットに、管理画面の検索機能を追加。

Move Widget

ウィジェットの移動を容易にする。

Import & Export Widgets

ウィジェット設定のインポート / エクスポートを可能にする。
バックアップに便利。

Widget Area Options

ウィジェットエリアに関するその他のオプション。
「ウィジェットリンクの無効化」と「ダウンロードのバックアップの有効化」ができる。

条件の有効化と無効化

SiteOrigin Pagebuilder Support
Elementor Pagebuilder Support
Beaver Builder Support

他社のページビルダーを導入している場合、サポートするか否か。

Advanced Custom Fields Support

プラグイン『Advanced Custom Fields』を使っている人向けのサポート。

その他は、有料オプションとなります。

ウィジェットの拡張機能

続いて、『外観』 → 『ウィジェット』 で、各種設定を行います。

おそらく、皆さんが一番必要なのは、「投稿タイプ別」「カテゴリー別」の表示 / 非表示ではないでしょうか。

たとえば、特定のカテゴリーに限定したコンテンツを、そのカテゴリーに属した投稿内だけで表示する場合。

下図は、恋愛・育児カテゴリー向けのインフォメーション。

恋愛と育児コンテンツに関する案内

ウィジェット設定で、恋愛・育児カテゴリーだけ『Show on checked pages』にチェックを入れれば、そのカテゴリーに属する投稿内にだけインフォメーションが表示されます。

広告の使い分けなどに便利です。

特定のカテゴリーだけ表示

また、デバイスによって、サイドバーを表示 / 非表示を切り替えたい場合は、『Devices』の『Hide on checked devices』で、特定のデバイスにチェックを入れます。

当サイトは、モバイルには、カテゴリーのウィジェットを非表示にしています。読み込みが重いし、ほとんどクリックされないので。(パンくずリストの方が多い)

モバイルの場合、余計なウィジェットは非表示にした方が高速化に繋がります。

モバイルにサイドバーを表示しない

また、下図のように、「投稿タイプ別」の表示 / 非表示もできるので、より細かな条件分岐が可能です。

お知らせメッセージや広告バナーも、本当に関連のある投稿だけにフォーカスした方が効果的です。

カテゴリー別の表示 / 非表示

ページ毎の表示 / 非表示を使えば、「トップページのみ、カテゴリ人気記事」、「それ以外の下位ページには画像付き新着記事」と、ウィジェットの内容を切り替えることができます。

トップページの記事リストは新着順に並んでいるので、サイドバーでも新着記事リストを表示する必要はありません。

その代用として、おすすめカテゴリーの人気記事を表示します。

トップページと下位ページで表示 / 非表示を切り替え

ウィジェット設定の主な機能

ページ別のウィジェット表示/非表示

Hide on checked pages ・・チェックしたページのみ非表示

Show on checked pages ・・チェックしたページのみ表示

「MISC(ページ別)」「Post Types(投稿タイプ)」「Taxonomies(タクソノミー別)」に設定が可能。

広告の種類を使い分けたい、特定のカテゴリーだけお知らせを表示したい、404ページだけ検索窓を強調したい、といった場合に便利です。

ページ別のウィジェット表示/非表示

デバイス別のウィジェット表示/非表示

PC、タブレット、モバイル別にコンテンツの表示/非表示の切り替えが可能です。

当サイトは、サイドバーおよびフッターのウィジェットを非表示にしています。

あれこれ見せたい気持ちは分かりますが、バナーだらけのウィジェットや、画像付き新着リストなど、あまり興味のない人には鬱陶しいだけなので、潔く切った方が読み込みも若干早くなって、かえっていろいろ見てもらえる可能性が高い。

デバイス別 ウィジェット表示/非表示

ウィジェットの配置

いわゆる align です。

左揃え、中央揃え、右揃えにスタイルを整えることができます。

画像やバナーを置く場合、中央 align=center に設定した方が見映えがよくなりますね。

ウィジェットの配置

PHP(テンプレートタグ)の挿入

通常、ウィジェットでPHPコード(テンプレートタグ)は使えませんが、このプラグインを使えば、PHPが扱えるようになります。

PHPタグの挿入

ウィジェット設定の機能を選択

『設定』→『Widget Options』から、どの機能を使うか、選択することができます。

あまり使わない機能は Disable(無効)にしておきましょう。

便利なのは、PHPコードが使える「Display Logic」とデバイス別で表示/非表示が切り替えられる「Deviced Resriction」、ウィジェット設定のインポート/エクスポートができる「Import & Export Widgets」ですね。

ウィジェット機能の選択

ウィジェット設定のインポート/エクスポートは、『ツール』→『Import & Export Widgets』で行えます。
サイトのお引っ越しやテーマ変更などに便利です。

ウィジェットの表示/非表示で出来ること

最近は、投稿ページやホームページ、アーカイブなどにもウィジェットを挿入できるテーマ・テンプレートが増えています。

テンプレートファイルをいじらなくても、ウィジェットの表示/非表示を使えば、コンテンツの表示/非表示も簡単にコントロールすることができます。

特定のカテゴリーやタクソノミーの投稿だけ、商品案内やニュース、記事リストなどを表示できる。
 → PHPが使えるので、いっそう幅が広がります。

カテゴリー(コンテンツ)にマッチした広告を表示する。
→ アドセンスをがっつりやりたい方には必須ですね。

モバイル表示の負担になるコンテンツを非表示にする
→ メニューや記事リスト、ランキングなど、訪問者が求める投稿とは関連性の薄いコンテンツは非表示にした方がいい場合もあります。

PCは画像付き、モバイルはテキストリンクなどコンテンツの種類を切り替える
→ モバイルはずらずら画像が表示されても負担になることが多いので、本当に重要なもの以外は非表示にしましょう。

ブロックエディターを使わなくても、ブロック要素の配置が可能

→ テーマによっては、トップページの上下エリア、投稿ページの上下エリアなど、独自のウィジェットスペースを設けているものがあります。
ウィジェットエリアを利用すれば、ブロックエディタを使わなくても、ランキングやピックアップ記事、メッセージ、Instagramギャラリーなど、いろいろ配置できるので、表現の幅が広がります。もちろん、デバイスやカテゴリー、タクソノミー別のコンテンツ表示/非表示も可能です。

 

併用すると便利なウィジェット系プラグイン

Widget Options と同様の機能をもつ、条件分岐のプラグインです。

こちらは、「デバイス別」「スタイルシートの適用」など、幅広い機能はなく、『投稿タイプ』に限定したコンテンツの表示 / 非表示が可能です。
最小限の機能だけ欲しい方向け。

WordPress.org 日本語
Widget Context
Widget ContextShow and hide widgets on specific posts, pages and sections of your site.

下記も、『投稿タイプ』と『タクソノミー』にフォーカスした、コンテンツの表示 / 非表示 の切り替えが可能。
複数の投稿タイプをもつサイトにおすすめ。

WordPress.org 日本語
Custom Post Type WidgetsThis WordPress plugin adds default custom post type widgets.

PHPコードをウィジェット内でも使いたい場合、下記のプラグインが便利。

こちらは、ウィジェット限定。

WordPress.org 日本語
PHP Code Widgetテキストウィジェットのように、PHP コードも挿入することができます。

こちらはウィジェットに限らず、投稿や固定ページ内でもPHPコードが使用可能になる拡張タイプのプラグイン。

WordPress.org 日本語
PHP Everywhere
PHP EverywhereThis plugin enables PHP code everywhere in your WordPress instalation.Using this plugin you can use PHP in widgets, pages and posts.

こちらもウィジェット内で、PHP、HTML、JavaScript、Flash、Shortcodesなど、様々なコードが利用可能になる万能型プラグイン。

WordPress.org 日本語
Enhanced Text Widget
Enhanced Text WidgetAn enhanced version of the text widget that supports Text, HTML, CSS, JavaScript, Flash, Shortcodes and PHP with linkable widget title.

実際の使用例。

当サイトでは、投稿の末尾にも、タグリストを表示するようにしています。(テーマ・テンプレートのデフォルトのタグリストは見にくい)

タグリストは、大きく目立たせた方がクリックしやすいので。

PHPコードを実行するプラグインを導入して、 the_tags を記述するだけです。

ウィジェットでPHPコードを実行

テーマ・テンプレートに直接編集してもいいですが、テーマのアップデートの度に書き直しが必要になるし、複雑な条件分岐になると、テンプレートタグの設置だけで手間を取られるので、あっさりプラグインを導入した方が利口です。
条件分岐のプラグインを二つ、三つ、導入したところで、サイト表示が大幅に遅延するわけではありませんし、むしろ、コンテンツとは無関係なウィジェットを非表示にする方が高速化の助けになりますよ。モバイルにも不要なものはたくさんあります。
興味のある方はお試し下さい。

この記事を書いた人

石田 朋子のアバター 石田 朋子 サイト管理人

作家・文芸愛好家。1998年よりホームページを運営。PCと車が大好きな80年代のサブカルファン。WordPressとは10年以上の付き合い。普段はぼーっとしたお母さんです。小説より漫画とアニメに詳しいヲタで、昭和の名作漫画は大半の台詞を空で言うことができます。東欧在住。本を買ってくれたら喜びます。

目次
閉じる