WordPress のサイドバーとウィジェット：情報と追従表示の配置

サイドバーが空いていても、必ず埋める必要はありません。記事を読む人にとって検索、目次、関連記事は役立つことがありますが、長い広告、タグクラウド、追跡用のボタンは注意をそらす可能性もあります。各ブロックの用途を書き出してから配置を決め、限られた画面を本当に必要な情報に使いましょう。

以下では架空の住まい整理ブログを例に、著者紹介、記事のカテゴリー、関連記事を配置します。操作は WordPress のウィジェット文書と MDN の位置指定の説明に基づき、特定のテーマやプラグインを実測したものではありません。実際の操作画面と配置は利用中のテーマで変わるため、サイドバーが見つからなければ、まず設計方法を確認してください。

テーマがこの領域をどう管理するか確かめる

従来型テーマにはサイドバー、フッターなどのウィジェット領域がある場合があります。対応する従来型テーマでは、ブロック型ウィジェットエディターを使ってこれらの領域をブロックで管理できます。これはブロックテーマのサイトエディターとは別の機能です。ブロック型の画面が見えたからといって同じものと考えないでください。

ブロックテーマでは、サイドの情報がテンプレート内のカラムやグループで構成され、該当テンプレートまたは共通パーツで編集する場合があります。従来型テーマでは、まず「外観 > ウィジェット」とテーマの説明を見ます。特定のページテンプレートが意図的にサイドバーを表示しないこともあります。設定が失われたとは限らず、すぐにプラグインで補う必要もありません。

トップページ、記事ページ、検索結果、一般ページで使われるレイアウトを先に一覧にし、編集箇所を決めます。住まい整理の記事には関連記事が役立つ一方、問い合わせページは簡潔なフォームの方が適するかもしれません。全サイトに同じサイドバーを出すと決めつけず、読者がその場で行う作業に合わせましょう。

用途を説明できる情報だけを残す

候補の各ブロックについて理由を一文で書きます。検索は特定の収納問題を探す手段、著者紹介は誰が内容を整理したかの説明、関連記事は同じ部屋の課題を続けて解決する入口になります。「他のサイトにもあるから」だけが理由なら、実際に必要になるまで置かなくて構いません。

並び順は読む状況に合わせます。長い記事の目次は段落への移動に便利ですが、著者紹介で画面全体を占める必要はなく、カテゴリー一覧も全階層を展開しなくてよいでしょう。スマートフォンで一列に並ぶと長い文章ほど場所を取ります。重要な少数の項目から始め、読者が次の行動に進めるか見てください。

必須情報をサイドバーだけに置かないでください。記事で触れる制限、手順、大切な注意は、本文の関連箇所にも示します。スマートフォンでサイドバーが記事末尾に移動すると、読者はそこを見る前に手順を実行するかもしれません。重要な条件が一つの画面配置でしか見つからない状態を避けます。

ウィジェットの追加と調整の基本手順

ブロック型ウィジェットエディターは「外観 > ウィジェット」から開き、変更する領域を選んでブロックを追加し、並べ替えたり他の領域へ移したりできます。まだブロックに変換されていない既存のサードパーティー製ウィジェットは、Legacy Widget ブロックで管理する場合があります。使用できる機能はテーマやプラグインによるため、記事エディターの全ブロックがここでも使えるとは限りません。

従来のウィジェット画面を使う場合は、テーマが用意した領域で追加、並べ替え、設定を行います。一時的に使わないものの設定を残したいなら、直接削除する代わりに未使用ウィジェットの領域を使えます。画面の方式を変える前に、元の文章、URL、必要な設定を保存しておきましょう。

一度に一つの領域だけを変え、保存後に公開ページを確認します。カテゴリーを著者紹介の下へ移すなら、その記事ページが編集したサイドバーを本当に使っているか、キャッシュの影響はないか確かめます。変更が見えないからといって複数領域へ同じものを重ねて追加すると、後で複数表示される可能性があります。

1. テーマの種類、対象テンプレート、ウィジェット領域を確認し、現在の設定を保存する。
2. 本当に必要な内容を追加し、見出し、リンク、順序を先に整える。
3. 保存後に該当する公開ページを見て、重複や欠落がないか確認する。
4. スマートフォン、文字拡大、キーボード操作を試してから追従効果の必要性を決める。

通常の配置、追従、固定はそれぞれ異なる

通常のブロックはページとともにスクロールします。追従表示は指定した位置に達すると一時的に留まることが多く、所属するコンテナーの範囲に制限されます。固定配置は一般にビューポートを基準に位置を保ちます。MDN はこの違いを説明していますが、実際のページでは親要素の設定やレイアウトも影響します。名称を一つ変えるだけで同じ結果になるとは限りません。

長い記事の短い目次には追従表示が向く場合がありますが、画面より高いサイドバーでは下部の情報に届きにくくなります。固定された購読案内がヘッダー、Cookie の通知、チャットボタンと重なると、内容を隠すおそれがあります。まず通常の配置で読めることを確かめ、その後で固定効果が操作を改善するか判断します。

テーマに追従の設定があるなら、適用する端末、上端の余白、停止位置を確認します。追加の CSS やプラグインが必要なら、レイアウトに詳しい人がテスト環境で設定し、変更箇所と無効にする方法を記録します。複数の固定サイドバーツールを同時に有効化すると、位置計算やスクロール動作が干渉し得ます。

スマートフォンでは実際の操作障害まで確認する

画面を狭くして、サイドバーが記事末尾へ移るか、隠れるか、固定されたままかを調べ、本文幅と読む順番を確認します。機能がパソコンのサイドバーにしかないなら、スマートフォンにも、ナビゲーションや記事一覧の近くに検索を置くなど同等の入口が必要です。領域全体を隠すだけではモバイル対応とは言えません。

フォームの画面キーボードを開き、固定要素が入力欄や送信ボタンを覆わないか見ます。モバイルメニューを開いたときも閉じるボタンが操作できるか確かめます。横向き表示、拡大文字、縦の短い画面では普段見えない問題が出ます。トップページを一枚撮るだけでなく、実際に操作を完了できるか確認してください。

キーボードで順番にフォーカスを移し、サイドバーのリンクへ到達でき、フォーカスが見え、固定ブロックに隠れないことを確認します。自動的に動く・展開するブロックでは、読む位置が突然変わらないかも調べます。広告や外部の埋め込みは読み込み後に高さが変わるため、空のプレースホルダーだけを見ずに完全に読み込んでから試します。

定期的に整理し、元に戻す方法を残す

記事が増えれば、サイドバーの人気記事、カテゴリー、著者情報も更新が必要です。期限切れのリンク、終了したサービス、用途を失ったブロックを定期的に点検し、取り外す理由を記録します。重要な情報でも位置が適切でないなら、残すか消すかの二択ではなく、本文やフッターへ移す方法があります。

テーマ変更前にウィジェットの設定とページのスクリーンショットを保存し、新テーマに対応する領域を確認します。配置が違うことがあるため、切り替え後はページごとに検証し、必要なら情報を並べ直します。成功の基準は、古い箱を全部同じ場所へ押し込むことではなく、読者が無理なく読んで次の行動を見つけられることです。

詳しい説明を読む

用途、編集場所、表示位置の効果、複数端末での検証という四段階でサイドバーを計画するオリジナル図解。

カテゴリー、タグ、メニューの整理

WordPress 管理画面での役割分担

• チュートリアル
• アプリ・ソフト
• サイト構築・EC
• WordPress