WordPress ウィジェットを使ってサイトの共通パーツを設定する

WordPressの機能の一つにあるウィジェットは、サイトの共通パーツとして使用したい内容を追加・編集することができるものです。

ここではWordPressのバージョンが5.8以降から実装されている新しい形のウィジェット「ブロックウィジェット」の設定・編集方法をメモしていきます。

ブロックウィジェットに対応していないテーマやプラグインもあるようなので、もし従来のウィジェット画面で操作したい場合は Classic Wigets というプラグインがあるのでこちらを使用してみてください。
【従来ウィジェットの使い方参照】【かんたん】WordPressのウィジェット設定方法を徹底解説！初心者でも安心

ウィジェットとは

ウィジェットはサイトで共通に使用することができるパーツのことです。
検索フォームやカテゴリーリンク一覧、各ページのリンクメニューといったものをパーツとして登録し、任意の場所に設置できます。

便利なウィジェットですが、増やしすぎるとかえって見づらくなってしまったり、サイトが重くなって表示速度が遅くなってしまうこともあります。適切なパーツを適切な量で適切な箇所に、ということを忘れずにウィジェットを使っていきましょう。

どんな時に使うか

テーマによってウィジェットの設置場所が決まっています。サイドバーやフッター、投稿ページなど条件によって表示させる、といったことができるテーマもあります。

テーマでウィジェットが設定されている場所に、デフォルトで表示されるものの他にも表示させたいものがあれば設定していきましょう。何をウィジェットに設定すればいいか迷った時の参考によく使われるウィジェットを紹介します。

• 検索ボックス
• ナビゲーションメニュー
• カテゴリー
• タグクラウド
• 最新の投稿

これらのメニューはウィジェットブロックに用意されているので、ドラッグして配置するだけで簡単に設定できます。

この他にもソーシャルアイコンや人気記事のリストなどを表示させていサイトも多いです。
項目の選定に困ったら、自分のサイトと似たような競合サイトや気になったデザインのサイトから、何を表示させているか確認してみましょう。
使いやすい、もっとこうした方が見やすいなど気になった点を取り入れていきます。見やすさや使いやすさ、アクセスのしやすさなどを考えながら設定してみてください。

テーマを自作している場合

実は私はウィジェットをあまり使用していませんでした。WordPressでサイト制作するときは大体テーマは自作するため、共通部分はPHPファイルを使用して編集していました。そのためWordPressのウィジェット機能を使う機会がなかったのです。

ところがとある案件で、クライアントの方でメニューの変更やサイドバーに表示させる項目の設定などを行いたいという依頼がありました。その時にこのウィジェットについて初めてどんなものか調べ、設定しました。

テーマを自作し、サイトの運用は自分で行う、かつPHPファイルでの編集の方が楽な方はウィジェット機能はなくてもいいと思います。しかしそうでない方やファイル編集も全然できるけど管理画面から編集できるようにしたい人、テンプレートテーマを使用する場合や運用はプログラムに明るく無い人が行う場合などはウィジェットを使った方が便利です。

自身のスキルや運用体制、更新頻度などを考えて使用してみてください。

まずはウィジェット編集ができるか確認

ウィジェット内容を設定するには、管理画面の【外観 > ウィジェット】から設定画面へ移動します。

ウィジェットエリアを追加

ウィジェットを配置できるところをウィジェットエリアと言います。自作テーマの場合、ウィジェットエリアが設定されていないため、まずはこのウィジェットエリアを作るところから始めます。

公開されているテーマの場合、すでにそのテーマ専用に設定されているウィジェットがあると思います。すでに設定されているウィジェットエリアで十分ならそのエリアの項目を編集します。それ以外に追加したいエリアがある、場所ごとに表示されるウィジェットを分けたい場合はウィジェットエリアを追加しましょう。

【ウィジェットエリアの追加コード例】

function my_widgets() {
  register_sidebar( [
    'name'=>'ウィジェットエリア名',
    'id' => 'widgets-id',
    'before_widget' => '<div>',
    'after_widget' => '</div>',
  ] );
}
add_action('widgets_init', 'my_widgets');

設定項目は任意なのですが、 'name' と 'id' は設定した方がわかりやすいと思います。指定がない場合は name は「サイドバー1」、id は 「sidebar-1」が設定されました。
id は日本語だと表示されないので半角英数字を使用してください。
上記コードを入力すると、以下のように新たなウィジェットが表示されます。

デフォルトでは出力されるHTMLはliタグで囲まれます。

<li id="block-13" class="widget widget_block widget_search">
  <!-- 設定したウィジェット -->
</li>

このHTMLタグを変更したい場合は、'before_widget' に開始タグ 'after_widget' に終了タグを設定します。

ウィジェットを表示させる位置にコードを設定

ウィジェットエリアを設定したら、そのウィジェットを表示させる場所に dynamic_sidebar('ウィジェットエリアで設定したid') を記述します。

<?php dynamic_sidebar('widgets-id'); ?>

テーマに初めからついているウィジェットの場合この記述は必要はなく、そのテーマが指定している箇所へ反映されます。

先述したようにデフォルトでは li要素として出力されるので、指定をしていない場合はulタグで囲んで正しいマークアップで出力させるようにしましょう。

<ul><?php dynamic_sidebar('widgets-id'); ?></ul>

ウィジェットの項目編集

ブロックウィジェットは投稿のように各ブロックを使用して作成していきます。基本の操作はブロックエディタと同様です。左上にあるプラスボタンからブロックを追加できます。

ウィジェットの配置を変えたいときは上部にある三線ボタンをクリックして、表示されたリストからドラックして順序を変更すると入れ替わります。

ウィジェットのコピーや移動・削除などは、リストの３点リーダーから編集することもできます。

ウィジェットの項目を削除

もう使わないウィジェットであれば削除しても問題ないですが、一旦非表示にしたいけど、また使うことがあるかもしれないウィジェットもあると思います。

そういったものは削除するのではなく、「使用停止中のウィジェット」に移動させて非表示の状態にすることができます。

表示を確認しながら修正する

ウィジェットをパソコンで見た場合とモバイルで見た場合を比べながら修正できます。
【外観 > カスタマイズ > ウィジェット】へ移動し、デバイスを切り替えながら表示に問題がないか確認しましょう。

メニューの【カスタマイズ > ウィジェット】で「このページでは表示していません」が表示される

【外観 > カスタマイズ > ウィジェット】で編集しようとして、「お使いのテーマには○個のウィジェットエリアがありますが、このページでは表示していません。」と表示されることがあります。

単にそのページにウィジェットが設定されていないことで表示されることもあるのですが、間違いなくウィジェットを設定していてサイトに表示されているにも関わらずこの表示が出ることがあります。

私がこの状態になった時に原因コードを調べてみたところ、WordPressに元々付いている jQuery を除外していたコードが原因でした。

wp_deregister_script('jquery');

この記述を削除したところ、カスタマイズのウィジェットでも編集できるようになりました。

条件分岐で !is_admin() を指定しても表示されないままだったので、この画面でちゃんと動作させるには別の条件分岐や何かしら別の方法で記述しなければならないのかもしれません。この点に関しての解決策は現状分からなかったです…。

WordPressの jQuery を除外している場合、何かしらの理由があって設定しているかと思うので、この記述を無くすと他のところでエラーになってしまうことがあるかもしれません。このカスタマイズページの wp_deregister_script('jquery'); を適用しないようにする方法がわかれば問題ないですが、そうでない場合コードを削除することは難しいと思うので、ここでの編集ではなく【ウィジェット】画面から編集のみになります。