ウィジェットとは？
ブログの人気記事ランキングを表示させたい、など、プラグインを使って機能追加して、それを表示させたい時に活躍するのがウィジェットです。
多くの場合は共通するセクションをまとめて管理したい時に使ったりします。
例えば、ブログサイト全体に共通にサイドバーがあって、それを全ページに記述していくのは大変ですが、このウィジェットを使って管理すると管理画面からほぼノーコードで編集ができます。
具体的な使い方を見ないとイメージがわかないと思うので、以下へWordPress Popula Postsで人気記事ランキングのウィジェット追加から表示までを参考に流れを見ていきましょう。
function.phpで管理画面にウィジェット編集画面を表示させる
よく、Wordpressの管理画面の外観 > ウィジェットを選択して、ウィジェットを追加しましょう、なんて案内がされているページをよく見かけますが、デフォルトではWordpressの管理画面に「ウィジェット」という設定項目が存在しません。
function.phpに、以下のように記述を追加しましょう。
function sample_widgets(){
register_sidebar(array(
'name' => 'ブログサイドバー', // ウィジェット名
'description' => 'ブログのサイドバーに挿入するウィジェット', // 説明
'id' => 'sidebar', // ウィジェットには任意のid名をつける必要があります
'before_widget' => '<div class="sidebar">', // 表示させる時の開始タグ
'after_widget' => '</div>', // 表示させる時の終了タグ
'before_title' => '<h3>', // ウィジェットのタイトルの開始タグ
'after_title' => '</h3>' // ウィジェットのタイトルの終了タグ
));
}
add_action('widgets_init', 'sample_widgets');
これで保存すると、Wordpressの管理画面の「外観」のなかへ「ウィジェット」が表示されていると思います。
ウィジェット編集
Wordpressの管理画面の外観 > ウィジェットを開いてみると、先ほどfunction.phpのnameで指定した名前のウィジェットが出てきていると思います。
大きな＋ボタンを押すと、ブロックエディターのようにいろいろなボタンが出てきて、押すとウィジェットへどんどん追加できる様子が確認できると思います。
ウィジェットとして追加したいものを追加しましょう。
今回はWordPress Popular Postsを追加したいので、WordPress Popular Postsを検索して探して追加してみてください。
すると、WordPress Popular Postsの機能の編集画面の様なものが出てくると思います。
自分好みの人気記事ランキングを出力させるように、項目を設定して右上にある「更新」ボタンを押します。
ウィジェットを表示させる
固定ページのテンプレートファイルを開き、function.phpで設定したid名を利用して以下なコードを追加するだけで、ウィジェットへの追加内容が表示できます。
<div id="sidebar">
<?php dynamic_sidebar('sidebar'); ?>
</div>
ウィジェットは幾つでも追加できるので、Topのサイドバーはこれ、下層ページのサイドバーはこれ、、、という様に簡単にカスタマイズできます。便利ですね。