5分でできる！WordPressのウィジェットとプラグインの使い方

みなさんこんにちは！エンジニアの高澤です。
今回はWordPressの便利な機能「ウィジェット」について解説したいと思います。
ウィジェットはブロガーの方や企業のWeb担当者の方にっては大変重宝される機能であり、またエンジニア等開発者からしてもクライアントを相手にしたWeb制作において欠かせない機能であるといえます。
当記事ではすぐに実践できるウィジェットの使い方と、ウィジェットをより便利にするプラグインの使い方を解説しておりますので、読み終わるころにはウィジェットをマスターしていることと思います。

ウィジェットとは

WordPressの機能としてある「ウィジェット」とは、Webサイトの部品です。部品とは、例えばサイドバーやフッターなどによく見られるカテゴリーやタグのボタン、バナー広告の画像、記事の一覧などそれぞれ個々に存在するコンテンツのことです。

また、当記事ではウィジェットの使い方を多方面から解説し、便利なウィジェットを存分に使いこなせるまで到達できる内容となっておりますので、よろしければぜひご活用ください。

ウィジェットの役割・メリット

ウィジェットの機能を使うことによって、Webサイトのサイドバーに設置させるコンテンツを柔軟に追加したり移動したり、また削除したりとかなり柔軟にコンテンツを操作することができます。

また、ウィジェットには下記のようなメリットがあります。

わかりやすく使いやすいUIなので直感で操作が可能
プラグインを使えば多くの高機能なコンテンツを追加できる
追加や取り外しを管理画面で簡単にできる

というメリットがあります。

ウィジェットの使い方

ここからはウィジェットの使い方を解説したいと思います。
ウィジェットの使い方をご説明する前に下記の2点を基準に解説を分けたいと思います。

販売もしくは無料の完成されたテーマを利用している場合
自作のテーマでウィジェットを利用する場合

まずは、「販売もしくは無料の完成されたテーマを利用している場合」でのウィジェットの使い方をご説明します。

販売もしくは無料の完成されたテーマを利用している場合

「販売もしくは無料の完成されたテーマを利用している場合」でのウィジェットに関しては、ウィジェットの編集画面でウィジェットを設定するのみで実現できます。
その理由は、ウィジェットが使えるための実装がすでにされているためです。（※もしかしたらテーマによって実装されていないものもあるかもしれません。その場合は次の記事内容にてウィジェットを使えるようにします。）

ウィジェットの編集画面の表示方法

WordPressの管理画面の左メニューにある「外観」→「ウィジェット」でクリックするとウィジェットの編集画面が表示されます。
①外観→②ウィジェット

③ウィジェット編集画面

ウィジェットを追加する方法

ウィジェット編集画面の左側「利用できるウィジェット」にある利用したいウィジェットを画面右側にある白枠にドラッグ＆ドロップしたら完了です。
編集画面に「保存する」のようなボタンはなく、ドロップしただけでサイト上に反映されます。（※「カスタムHTML」や「テキスト」などのように入力しなければならないウィジェットに関しては入力後に「保存」ボタンをクリックしなければ反映されません。）

ウィジェットを編集する方法

まず編集するには白枠にドラッグ＆ドロップしたあとでなければ編集することができないため、表示したいウィジェットを左側からドラッグ＆ドロップしましょう。そして、ここでは例として「カスタムHTML」を使って編集してみます。
①「カスタムHTML」をクリックします。
②「内容」にHTMLコードをコピー＆ペーストします。
③「保存」をクリック
④HTMLが機能して表示されます。

ウィジェットを並び替える方法

編集画面右側の白枠にあるウィジェットを設置したい順番で上下にドラッグ＆ドロップすれば、上から順番に表示されます。

ウィジェットを削除する方法

編集画面右側の白枠にドラッグ＆ドロップしたウィジェットをクリックして、「削除」をクリックすればサイト上から表示されなくなり、設定が削除されます。ここで行う削除は、ウィジェットの設定を完全に消去されることになるので扱いには注意してください。

ウィジェットを停止する方法

編集画面右側の白枠にあるウィジェットをサイト上から消しつつ設定した内容を保存したままにするには、画面右側の白枠にあるウィジェットを画面左下の「使用停止中のウィジェット」の箇所にドラッグ＆ドロップすればできます。ウィジェットがサイト上から消えますが、設定内容は保存されたままになります。

自作のテーマでウィジェットを利用する場合

WordPressでサイト制作をする際に自作でテーマを作ることになります。自作でテーマを作ると管理画面で使える各種機能は制作者がプログラムを書いて実装しなければなりません。ただ、実装といっても大したことはしておらず、ほんの少しのプログラムをコピペすれば完了するので、決して難しいものではありません。それでは解説します。

ウィジェットが表示されない！設定できない！を解決

初心者の方によくありがちなのが、「ウィジェットを追加したつもりなのに表示されない！」だとか、「ウィジェットの編集画面の右側にウィジェットを設置するための白枠がない！」などの問題に直面することが多々あるかと思います。
ここでの内容はまさにそういった問題を解決する方法ともいえる内容なので、ここでの手順を最後まで進んでいただければと思います。

ウィジェットの設定に必要な材料、準備

まず、ウィジェットの機能を使えるようにするための材料が下記になります。方法は簡単で、下記のテンプレートファイルに必要なWordPress関数をコピペするだけです。

（必要なテンプレートファイル） functions.php sidebar.php（サイドバーにウィジェットを追加する場合）
（必要なWordPress関数） add_theme_support(‘widgets’); register_sidebar() is_active_sidebar() dynamic_sidebar()

ここからは実装するための手順をご説明いたします。

functions.phpにadd_theme_support(‘widgets’)を記述しよう

テーマ作成の際に作成されたfunctions.phpに引数を「widgets」にしてadd_theme_support()関数を記述します。

add_theme_support('widgets');

1	add_theme_support('widgets');

そうすると、WordPress管理画面の左メニュー「外観」に「ウィジェット」が追加されます。「ウィジェット」をクリックするとウィジェットの編集画面が開きますが、今の段階ではドラッグ＆ドロップ先の白枠が表示されていないのが確認できます。当然ウィジェットは設定できないので、次の手順で使えるようにします。

functions.phpにregister_sidebar()を記述してウィジェット機能を登録

先ほどのfunctions.phpに記述したadd_theme_support()関数の下にregister_sidebar()関数を記述します。

register_sidebar(array(
   'name' => 'サンプル１',
   'id' => 'sample-1',
   'description' => 'サンプル１のウィジェットです。',
));

register_sidebar(array(

'name' => 'サンプル１',

'id' => 'sample-1',

'description' => 'サンプル１のウィジェットです。',

));

記述すると、ウィジェット編集画面の右側に「サンプル１」という名前で白枠ができているかと思います。確認できたら、画面左側にある表示させたいウィジェットを白枠のところまでドロップ＆ドラッグします。ここまで進んだらあと一歩です。

sidebar.phpにdynamic_sidebar()を記述してサイト上に表示させる

あとは、表示させたいテンプレートファイル（ここではサイドバーに表示させたいのでsidebar.php）の意図した場所にdynamic_sidebar()関数を記述して表示させます。
また、ひと工夫して「もしウィジェットが設定されていたら表示する」のように「もし○○なら〜」という動きにしたいので、is_active_sidebar()関数とPHPのif文で条件分岐させます。

if(is_active_sidebar('sample-1')):
   dynamic_sidebar('sample-1');
endif;

if(is_active_sidebar('sample-1')):

dynamic_sidebar('sample-1');

endif;

すると、ウィジェットを設定していれば表示されるようになります。

ウィジェットをより便利にするプラグイン5選

ウィジェットの機能は大変便利な機能ですが、その長所をさらに伸ばしてくれるツールがウィジェット関連のプラグインだといえるでしょう。ここではブロガーの方やWeb担当者の方、またエンジニアの方も実務で使える厳選したプラグイン5選をご紹介したいと思います。１、WordPress Popular Posts ２、Events Calendar WP ３、Widget Logic ４、Dynamic Widgets ５、WP Tab Widget

プラグインのインストール方法

WordPress管理画面のメニューの「プラグイン」→「新規追加」→「{インストールしたいプラグイン名}」で検索→「今すぐインストール」をクリック→「有効化」をクリックこの流れで進めていただけると、インストールできるかと思います。インストールが完了したら、下記の方法でパンくずリストを設定しましょう。

WordPress Popular Posts とは

サイト内にある記事のランキング一覧を表示させるためのプラグインです。このプラグインは開発者にとっては大変重宝しているプラグインで、実際にWebサイト制作のお仕事でかなり使われています。ただ、使い方はとても簡単なのでご心配はありません。

Events Calendar WP とは

カレンダーを表示させるためのプラグインです。このプラグインをご紹介した理由としては、WordPressのデフォルトですでにカレンダーのウィジェットがあり設定することは可能なのですが、使い勝手がよくないためEvents Calendar WPプラグインをご紹介させていただきました。

Widget Logic とは

ウィジェットをページの種類（トップページ、カテゴリーページ、記事ページ等）によって表示・非表示を決められるプラグインです。 WordPressのデフォルトのウィジェット機能だと、全てのページにて設定したままのコンテンツが表示されてしまい、少し使い勝手が悪いです。それを払拭したのがこのWidget Logicプラグインです。

Dynamic Widgets とは

Widget Logicプラグインよりかなり豊富なパターンで表示・非表示の設定ができます。 Widget Logicプラグインの強化版といっても過言ではありません。
ただ機能が豊富だからといって仮に必要のない機能がたくさんある状態だとWordPressの処理が重くなってしまう可能性があるため、サイトによってうまく使い分けるようにしましょう。

WP Tab Widget とは

記事のランキングや関連記事、またタグ一覧などをタブ形式でサイトに表示することができるプラグインです。サイドバーにタブ形式で表示コンテンツを表示させることでスペースを有効活用することができます。

まとめ

ウィジェットはWordPressの大変便利な機能の１つで、サイト内に簡単にコンテンツ（部品）を追加することができます。
ウィジェットの使い道は実に多くのパターンがあり、ブロガーやウェブ担当者の方であればバナーの広告の設置や関連記事や記事ランキングの一覧の表示がボタンの操作１つで実現し、また開発者の方にとってはウィジェットを利用して工数を減らしつつ高機能なコンテンツを設置でき、またクライアント（サイトの管理者）に対してUIの優れた使いやすい機能を提供できるなど、幅が実に広く優れたものであるといえます。
当記事では開発者の方から非開発者の方までを対象にウィジェットの使い方からカスタマイズ・実装レベルまで習得できるまでの内容となっておりますので、よろしければぜひご活用ください。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。