WordPressサイドバーの作り方完全ガイド｜表示されない原因・設定・カスタマイズ方法まで解説

はじめに

WordPressのサイドバーは、プロフィール、検索ボックス、人気記事、カテゴリー、広告、CTAなどを表示できる便利なエリアです。ブログやメディアサイトでは、読者に関連記事を読んでもらったり、商品ページや問い合わせページへ誘導したりするための重要な導線になります。

一方で、「サイドバーを設定したのに表示されない」「テーマを変更したらサイドバーが消えた」「スマホではどこに表示されるのかわからない」といった悩みも多い部分です。特に現在のWordPressでは、クラシックテーマとブロックテーマで設定方法が異なるため、使っているテーマによって操作画面や編集方法が変わります。

この記事では、WordPressサイドバーの基本から、作り方、表示されない原因、カスタマイズ方法、プラグインやコードを使った管理方法までわかりやすく解説します。

1. WordPressのサイドバーとは？役割とできること

1-1. サイドバーの基本的な意味

WordPressのサイドバーとは、主に記事本文の横に表示される補助エリアのことです。一般的には、パソコン表示で本文の右側または左側に配置されます。

WordPressでは、サイドバーは「ウィジェットエリア」として扱われることが多く、テーマ側で用意されたエリアにウィジェットやブロックを追加して内容を表示します。WordPress公式の開発者向け資料でも、サイドバーはテーマ内のウィジェット化されたエリアであり、ユーザーがウィジェットを追加できる場所として説明されています。

ただし、サイドバーという名前であっても、必ず画面の横に表示されるとは限りません。テーマによってはフッター、記事下、ヘッダー下などもウィジェットエリアとして管理される場合があります。

1-2. サイドバーに表示できる主な要素

WordPressのサイドバーには、サイト運営の目的に応じてさまざまな要素を表示できます。

代表的なものは、プロフィール、検索ボックス、カテゴリー一覧、タグ一覧、最新記事、人気記事、関連記事、SNSリンク、広告バナー、メルマガ登録フォーム、問い合わせボタンなどです。WordPressのウィジェットは、テーマが定義したエリアにコンテンツや機能を追加する仕組みで、検索やカテゴリー、タグクラウドなどの要素を配置できます。

ブログなら「人気記事」や「プロフィール」、企業サイトなら「資料請求バナー」や「問い合わせCTA」、ECサイトなら「商品カテゴリー」や「キャンペーンバナー」など、サイトの目的に合わせて配置する内容を選ぶことが大切です。

1-3. サイドバーを設置するメリット

サイドバーを設置するメリットは、読者が記事を読んでいる途中でも別の情報へ移動しやすくなることです。

たとえば、記事本文を読んでいる読者に人気記事を見せれば、別の記事へ回遊してもらいやすくなります。プロフィールを表示すれば、サイト運営者の信頼性を伝えられます。広告やCTAを配置すれば、収益化や問い合わせ獲得にもつながります。

また、カテゴリーや検索ボックスを置くことで、読者が目的の情報を探しやすくなります。特に記事数が多いブログでは、サイドバーがサイト内ナビゲーションの役割を果たします。

1-4. サイドバーが向いているサイト・向いていないサイト

サイドバーが向いているのは、記事数が多いブログ、ニュースサイト、レビューサイト、アフィリエイトサイト、専門メディアなどです。読者に複数の記事を読んでもらいたいサイトでは、サイドバーが回遊率の向上に役立ちます。

一方で、ランディングページ、シンプルなコーポレートサイト、1カラムで読みやすさを重視したサイトでは、サイドバーが邪魔になる場合があります。特にスマホ閲覧が中心のサイトでは、サイドバーが本文下に回り込み、見られにくくなることもあります。

サイドバーを設置するかどうかは、「読者に次に何をしてほしいか」で判断しましょう。記事を読み終えた後に別記事へ誘導したいのか、問い合わせにつなげたいのか、広告収益を狙いたいのかによって、必要なサイドバーの形は変わります。

2. WordPressサイドバーの作り方・設定方法

2-1. 管理画面からサイドバーを設定する基本手順

WordPressでサイドバーを設定する基本的な流れは、使用しているテーマによって異なります。クラシックテーマの場合は、主に「外観」から「ウィジェット」または「カスタマイズ」を開いて設定します。

基本手順は次の通りです。

WordPress管理画面にログインする
「外観」から「ウィジェット」を開く
サイドバーまたはウィジェットエリアを選択する
表示したいブロックやウィジェットを追加する
内容を編集して保存する
実際のページで表示を確認する

現在のWordPressでは、ウィジェット編集画面にもブロックエディターの仕組みが使われています。公式ドキュメントでも、ブロックベースのウィジェットエディターでは「外観＞ウィジェット」やテーマカスタマイザー内でブロックを使ってウィジェットエリアを編集できると説明されています。

2-2. ウィジェット画面でサイドバーを編集する方法

ウィジェット画面から編集する場合は、WordPress管理画面の「外観」から「ウィジェット」を選びます。表示された画面で「サイドバー」「メインサイドバー」「ブログサイドバー」などのエリアを開き、必要なブロックを追加します。

たとえば検索ボックスを設置したい場合は、「＋」ボタンから「検索」ブロックを追加します。カテゴリーを表示したい場合は「カテゴリー」ブロック、最新記事を表示したい場合は「最新の投稿」ブロックを追加します。

追加後は、タイトルや表示件数、並び順などを調整します。編集が終わったら保存し、トップページ、投稿ページ、固定ページなどで正しく表示されているか確認しましょう。

2-3. カスタマイザーからサイドバーを設定する方法

テーマによっては、「外観」から「カスタマイズ」を開き、ライブプレビューを見ながらサイドバーを編集できます。クラシックテーマでは、カスタマイザー内に「ウィジェット」項目が表示されることがあります。

カスタマイザーを使うメリットは、実際の表示に近い画面を見ながら編集できることです。配置したウィジェットがどのように見えるかを確認しながら調整できるため、初心者にも扱いやすい方法です。

ただし、ブロックテーマを使っている場合や、テーマ側でカスタマイザー機能が制限されている場合は、従来の「外観＞カスタマイズ」が表示されないことがあります。その場合は、サイトエディターやテンプレート編集画面を確認しましょう。

2-4. ブロックテーマでサイドバーを作成する方法

ブロックテーマでは、従来のウィジェットエリアではなく、サイトエディターでテンプレートやテンプレートパーツを編集してサイドバーを作るケースが増えています。

基本的な流れは次の通りです。

管理画面で「外観」から「エディター」を開く
編集したいテンプレートを選ぶ
カラムブロックなどを使って本文エリアとサイドバーエリアを作る
サイドバー側に検索、カテゴリー、最新記事などのブロックを配置する
保存して表示を確認する

WordPressのサイトエディターでは、ヘッダー、フッター、サイドバーなどの繰り返し使うエリアをテンプレートパーツとして管理できます。また、テンプレートパーツブロックはブロックテーマやテンプレート編集に対応したテーマで利用され、サイト構造を管理するために使われます。

ブロックテーマでサイドバーを作る場合は、「ウィジェットを追加する」というよりも、「テンプレート内にサイドバー用のレイアウトを作る」と考えると理解しやすくなります。

2-5. 固定ページ・投稿ページごとにサイドバーを設定する方法

固定ページや投稿ページごとにサイドバーの有無を変えたい場合は、テーマのレイアウト設定を確認します。多くのテーマでは、投稿編集画面や固定ページ編集画面に「レイアウト」「ページ設定」「サイドバー設定」などの項目が用意されています。

たとえば、記事ページでは右サイドバーを表示し、固定ページでは1カラムにする、といった設定が可能なテーマもあります。ブロックテーマの場合は、ページや投稿に適用するテンプレートを切り替えることで、サイドバーあり・なしのレイアウトを使い分けられます。WordPress公式ドキュメントでも、投稿や固定ページの設定サイドバーからテンプレートを選択でき、ブロックテーマでは現在のテンプレートを編集できると説明されています。

テーマ側に個別設定がない場合は、プラグインやカスタムテンプレートを使ってページごとの表示を切り替える方法もあります。

3. サイドバーにおすすめの表示項目

3-1. プロフィール

ブログや個人メディアでは、サイドバーにプロフィールを表示するのがおすすめです。運営者の顔写真、名前、簡単な経歴、専門分野、SNSリンクなどを掲載することで、読者に安心感を与えられます。

特に専門性が重視されるジャンルでは、「誰が書いているのか」が読者の信頼に関わります。長すぎるプロフィールは読みにくくなるため、サイドバーでは簡潔にまとめ、詳しい情報はプロフィールページへリンクしましょう。

3-2. 検索ボックス

検索ボックスは、記事数が多いサイトほど重要です。読者が知りたいキーワードを直接入力して記事を探せるため、ユーザー体験の向上につながります。

検索ボックスは、サイドバーの上部に配置すると見つけてもらいやすくなります。特にノウハウ系ブログ、レビューサイト、FAQが多いサイトでは、検索機能があるだけで読者の離脱を防ぎやすくなります。

3-3. 人気記事・関連記事

人気記事や関連記事は、サイト内回遊を増やすために効果的な項目です。読者が現在の記事に興味を持っている状態で、関連する記事やよく読まれている記事を提示すれば、次の記事へ移動してもらいやすくなります。

人気記事を表示する場合は、アクセス数、コメント数、手動選定など、どの基準で表示するかを決めておきましょう。関連記事を表示する場合は、カテゴリーやタグをもとに関連性の高い記事を出すと自然です。

3-4. カテゴリー・タグ

カテゴリーやタグは、読者が興味のあるテーマを探すための導線になります。特に複数ジャンルを扱うブログでは、カテゴリー一覧をサイドバーに設置することで、読者が目的の情報にたどり着きやすくなります。

ただし、カテゴリー数やタグ数が多すぎると見づらくなります。主要カテゴリーだけを表示する、階層表示を使う、タグクラウドは必要な場合だけ使うなど、整理された見せ方を意識しましょう。

3-5. 最新記事

最新記事は、リピーター向けの導線として役立ちます。新しく公開した記事をすぐに見てもらいたい場合や、更新頻度の高いメディアでは特に有効です。

表示件数は3〜5件程度に抑えると、サイドバーが長くなりすぎません。サムネイル画像を表示する場合は、画像サイズが大きくなりすぎないように注意しましょう。

3-6. CTA・バナー・広告

サイドバーは、CTAや広告を設置する場所としてもよく使われます。CTAとは、問い合わせ、資料請求、メルマガ登録、商品購入など、読者に行動してもらうための導線です。

ただし、広告やバナーを入れすぎると、読者に圧迫感を与える可能性があります。特に記事本文より広告が目立つ状態になると、サイト全体の印象が悪くなることもあります。サイドバーに配置するCTAは、サイトの目的に直結するものを厳選しましょう。

3-7. SNSリンク・フォローボタン

SNSを活用している場合は、サイドバーにSNSリンクやフォローボタンを設置するのもおすすめです。X、Instagram、YouTube、Facebook、LinkedInなど、サイトの読者層に合うSNSを選びましょう。

SNSリンクは、プロフィール付近に配置すると自然です。ただし、外部SNSへのリンクは読者をサイト外へ移動させる導線でもあるため、記事回遊やCTAとのバランスを考えて配置することが大切です。

4. WordPressのサイドバーが表示されない原因と対処法

4-1. テーマがサイドバーに対応していない

サイドバーが表示されない原因としてまず考えられるのは、使用しているテーマがサイドバーに対応していないケースです。すべてのWordPressテーマにサイドバーが用意されているわけではありません。

特にシンプルな1カラムテーマや、ブロックテーマの一部では、初期状態でサイドバーがない場合があります。管理画面の「外観＞ウィジェット」にサイドバーらしきエリアが表示されない場合は、テーマの仕様を確認しましょう。

対処法としては、サイドバー対応テーマに変更する、サイトエディターでサイドバー用レイアウトを作成する、子テーマやコードでサイドバーを追加する、といった方法があります。

4-2. ウィジェットが未設定になっている

サイドバーエリア自体は存在していても、中に何も設定されていなければ表示されないことがあります。テーマによっては、ウィジェットが空の場合、サイドバー領域そのものを出力しない設計になっています。

「外観＞ウィジェット」を開き、サイドバーエリアに検索、カテゴリー、最新記事などのブロックが入っているか確認しましょう。何も入っていない場合は、テストとして検索ブロックを1つ追加し、公開画面で表示されるか確認すると原因を切り分けやすくなります。

4-3. 固定ページや投稿のレイアウト設定が原因

テーマによっては、投稿や固定ページごとに「1カラム」「右サイドバー」「左サイドバー」などのレイアウトを選べます。この設定が「サイドバーなし」になっていると、ウィジェットを設定していても表示されません。

投稿編集画面や固定ページ編集画面を開き、ページ設定、投稿設定、テンプレート、レイアウトなどの項目を確認しましょう。特定のページだけサイドバーが表示されない場合は、この個別設定が原因である可能性が高いです。

4-4. ブロックテーマ・クラシックテーマの違いによる表示トラブル

クラシックテーマでは「外観＞ウィジェット」や「外観＞カスタマイズ」からサイドバーを編集することが多いですが、ブロックテーマでは「外観＞エディター」からテンプレートを編集するケースがあります。

そのため、テーマを変更した後に「以前のウィジェット設定が反映されない」「サイドバーの編集場所が見つからない」と感じることがあります。ブロックテーマでは、テンプレートやテンプレートパーツの中にサイドバー相当のエリアがあるか確認しましょう。

4-5. プラグインやキャッシュが影響している

サイドバーを変更したのに反映されない場合は、キャッシュが原因になっていることがあります。キャッシュ系プラグイン、サーバーキャッシュ、ブラウザキャッシュ、CDNのキャッシュなどが残っていると、古い表示が出続ける場合があります。

まずはキャッシュ系プラグインのキャッシュを削除し、ブラウザをシークレットモードで開いて確認しましょう。それでも変わらない場合は、プラグインを一時的に停止して、サイドバー表示に影響しているものがないか確認します。

4-6. CSSで非表示になっている

サイドバー自体は出力されているのに、CSSで非表示になっている場合もあります。たとえば、次のようなCSSがあるとサイドバーが見えなくなります。

CSS
.sidebar {
  display: none;
}

また、画面幅によって非表示にするメディアクエリが設定されていることもあります。

CSS
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

確認するには、ブラウザの開発者ツールを使い、サイドバー要素にどのCSSが適用されているか調べます。CSSを編集した覚えがある場合は、追加CSSや子テーマのstyle.cssを確認しましょう。

4-7. スマホ表示でサイドバーが下部に移動している

パソコンでは横に表示されるサイドバーも、スマホでは記事本文の下に移動することが一般的です。これはレスポンシブデザインによるもので、不具合ではありません。

「スマホでサイドバーが表示されない」と思っていても、実際には記事の下部に回り込んでいる場合があります。スマホ表示でページを下までスクロールし、サイドバー項目が表示されていないか確認しましょう。

スマホでも目立たせたい項目がある場合は、記事下CTAや固定ボタン、ヘッダーメニューなど、サイドバー以外の導線も検討すると効果的です。

5. WordPressサイドバーをカスタマイズする方法

5-1. サイドバーの表示位置を変更する方法

サイドバーの表示位置は、テーマのレイアウト設定で変更できる場合があります。管理画面の「外観＞カスタマイズ」やテーマ独自の設定画面で、「右サイドバー」「左サイドバー」「サイドバーなし」などを選べることがあります。

ブロックテーマの場合は、サイトエディターでテンプレートを編集し、カラムの左右を入れ替えることで表示位置を変更できます。本文エリアを左、サイドバーを右にするだけでなく、デザインによっては左サイドバーにすることも可能です。

コードで変更する場合は、テーマファイルのHTML構造やCSSのflexbox、grid設定を調整します。ただし、テーマ本体を直接編集するとアップデート時に変更が消える可能性があるため、子テーマを使うのが安全です。

5-2. サイドバーの幅を調整する方法

サイドバーの幅は、テーマ設定またはCSSで調整できます。たとえば、本文エリアとサイドバーを横並びにしている場合、CSSで次のように幅を指定できます。

CSS
.content-area {
  width: 70%;
}

.sidebar {
  width: 30%;
}

最近のテーマでは、flexboxやCSS gridでレイアウトが組まれていることも多いため、実際のクラス名や構造に合わせて調整する必要があります。

幅を広げすぎると本文が読みづらくなり、狭すぎるとサイドバー内の文字やバナーが窮屈になります。目安としては、本文の読みやすさを優先し、サイドバーは補助的な幅にとどめるのがおすすめです。

5-3. サイドバーの背景色・余白・文字サイズを変更する方法

サイドバーのデザインは、CSSで調整できます。背景色、余白、枠線、見出しの文字サイズなどを整えると、サイト全体の印象が変わります。

CSS
.sidebar {
  background: #f7f7f7;
  padding: 24px;
  border-radius: 8px;
}

.sidebar h2,
.sidebar h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.sidebar a {
  text-decoration: none;
}

ただし、実際に使うクラス名はテーマによって異なります。「.sidebar」「.widget-area」「.secondary」など、テーマごとのHTML構造を確認してからCSSを追加しましょう。

デザインを整える際は、サイドバーだけが目立ちすぎないように注意します。本文の読みやすさを妨げない色、余白、文字サイズを選ぶことが大切です。

5-4. 特定の記事やカテゴリーだけサイドバーを切り替える方法

特定の記事やカテゴリーだけサイドバーの内容を変えたい場合は、テーマ機能、プラグイン、条件分岐コードのいずれかを使います。

たとえば、カテゴリーAの記事では商品レビュー用のCTAを表示し、カテゴリーBの記事ではメルマガ登録フォームを表示する、といった使い分けができます。アフィリエイトサイトや専門メディアでは、記事ジャンルごとに最適なサイドバーを出し分けることで成果につながりやすくなります。

テーマに条件付き表示機能がない場合は、ウィジェット表示制御プラグインを使うと便利です。コードで実装する場合は、is_single()、is_category()、in_category()などの条件分岐タグを使って表示内容を切り替えます。

5-5. サイドバーを固定表示・追従表示にする方法

サイドバーをスクロールに合わせて固定表示、または追従表示にしたい場合は、CSSのposition: stickyを使う方法があります。

CSS
.sidebar {
  position: sticky;
  top: 24px;
}

これにより、読者がページをスクロールしてもサイドバーが一定位置にとどまるようになります。広告、目次、CTAなどを目立たせたい場合に有効です。

ただし、追従サイドバーは使い方に注意が必要です。長すぎるサイドバーや大きな広告を固定すると、読者にストレスを与える可能性があります。スマホでは追従を解除するなど、デバイスごとの見やすさを確認しましょう。

5-6. 不要なサイドバー項目を非表示にする方法

不要なサイドバー項目は、ウィジェット画面から削除または非表示にできます。使っていないカテゴリー一覧、古いバナー、クリックされていない広告などは定期的に見直しましょう。

CSSで一時的に非表示にすることもできます。

CSS
.sidebar .unnecessary-widget {
  display: none;
}

ただし、CSSで隠すだけではHTML上には残るため、完全に不要な場合はウィジェット自体を削除するのがおすすめです。サイドバーは情報を詰め込む場所ではなく、読者に次の行動を促す場所として設計しましょう。

6. プラグインを使ってサイドバーを便利に管理する方法

6-1. サイドバー管理にプラグインを使うメリット

プラグインを使うと、サイドバーの表示切り替え、人気記事表示、広告管理、CTA管理などを簡単に行えます。コードを書かずに細かい制御ができるため、初心者でも扱いやすいのがメリットです。

特に、ページごとに表示内容を変えたい場合や、人気記事ランキングを自動表示したい場合は、プラグインを使うと効率的です。テーマに機能がない場合でも、プラグインで補えることがあります。

6-2. サイドバー表示切り替えに使えるプラグイン

サイドバーの表示内容をページやカテゴリーごとに切り替えたい場合は、ウィジェット表示制御系のプラグインが便利です。

たとえば、特定カテゴリーの記事だけにバナーを表示する、固定ページではプロフィールを非表示にする、トップページだけ別のサイドバーを表示する、といった設定ができます。

プラグインを選ぶ際は、使用中のWordPressバージョンとの互換性、更新頻度、レビュー、インストール数、サポート状況を確認しましょう。長期間更新されていないプラグインは、セキュリティや互換性の面で注意が必要です。

6-3. 人気記事・ランキング表示に使えるプラグイン

人気記事やランキングを表示したい場合は、アクセス数を集計してランキング表示できるプラグインを使う方法があります。自動で人気記事を表示できるため、手動でリンクを入れ替える手間が省けます。

人気記事ランキングを設置する際は、表示件数、集計期間、サムネイルの有無、タイトルの長さを調整しましょう。全期間ランキングだけでなく、週間ランキングや月間ランキングを表示すると、現在読まれている記事を見せやすくなります。

ただし、アクセス集計系のプラグインはデータベースに負荷をかける場合があります。表示速度が遅くならないよう、軽量な設定を心がけましょう。

6-4. 広告やCTA管理に使えるプラグイン

広告やCTAをサイドバーに表示する場合は、広告管理プラグインやブロック管理プラグインが役立ちます。複数の広告をローテーション表示したり、掲載位置をまとめて管理したりできます。

アフィリエイト広告を扱う場合は、広告コードの貼り替えやリンク切れの管理も重要です。プラグインで一元管理しておけば、広告を変更したいときに各記事を個別編集する手間を減らせます。

CTAについては、単にバナーを置くだけでなく、クリック率やコンバージョン率を確認しながら改善することが大切です。表示位置、文言、デザインを定期的に見直しましょう。

6-5. プラグイン利用時の注意点

プラグインは便利ですが、入れすぎるとサイト速度や管理性に影響します。似た機能のプラグインを複数入れると、表示崩れや競合が起きることもあります。

導入前には、バックアップを取り、テスト環境または影響の少ないタイミングで確認しましょう。不要になったプラグインは停止するだけでなく、必要に応じて削除します。

また、サイドバー関連のプラグインは、テーマ変更時に表示が変わることがあります。テーマを変更した後は、サイドバーの表示内容、ウィジェットの配置、スマホ表示を必ず確認しましょう。

7. コードでWordPressサイドバーを追加・編集する方法

7-1. functions.phpでサイドバーを登録する方法

テーマにサイドバーを追加したい場合は、functions.phpでregister_sidebar()を使ってウィジェットエリアを登録します。WordPressの開発者向けリファレンスでは、register_sidebar()は新しいサイドバーを登録する関数として説明されています。

基本的なコード例は次の通りです。

PHP
function mytheme_register_sidebars() {
  register_sidebar(array(
    'name'          => 'メインサイドバー',
    'id'            => 'main-sidebar',
    'description'   => '投稿ページに表示するサイドバーです。',
    'before_widget' => '<section class="widget">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ));
}
add_action('widgets_init', 'mytheme_register_sidebars');

このコードを追加すると、管理画面のウィジェットエリアに「メインサイドバー」が表示され、ウィジェットやブロックを追加できるようになります。

7-2. テーマファイルにサイドバーを表示する方法

サイドバーを登録しただけでは、サイト上には表示されません。テーマファイル内でサイドバーを呼び出す必要があります。

一般的には、sidebar.phpを作成し、次のように記述します。

PHP
<aside class="sidebar">
  <?php if ( is_active_sidebar('main-sidebar') ) : ?>
    <?php dynamic_sidebar('main-sidebar'); ?>
  <?php endif; ?>
</aside>

そのうえで、single.phpやpage.phpなど表示したいテンプレートファイルからget_sidebar()を使って読み込みます。

PHP
<?php get_sidebar(); ?>

テーマの構造によっては、content部分とaside部分を同じラッパー内に配置し、CSSで横並びにします。

7-3. dynamic_sidebarの基本的な使い方

dynamic_sidebar()は、登録済みのサイドバーに入っているウィジェットを表示するための関数です。WordPress開発者向けリファレンスでは、dynamic_sidebar()は動的サイドバーを表示し、IDや名前を指定して呼び出せる関数として説明されています。

基本形は次の通りです。

PHP
<?php dynamic_sidebar('main-sidebar'); ?>

表示前にウィジェットが設定されているか確認したい場合は、is_active_sidebar()を組み合わせます。

PHP
<?php if ( is_active_sidebar('main-sidebar') ) : ?>
  <?php dynamic_sidebar('main-sidebar'); ?>
<?php endif; ?>

この書き方にすると、サイドバーが空の場合に余計なHTMLを出さずに済みます。

7-4. CSSでサイドバーのデザインを整える方法

サイドバーを表示したら、CSSで本文エリアとのバランスを整えます。以下は基本的なレイアウト例です。

CSS
.site-content {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.main-content {
  flex: 1;
}

.sidebar {
  width: 300px;
}

.widget {
  margin-bottom: 24px;
}

スマホでは横並びを解除します。

CSS
@media screen and (max-width: 768px) {
  .site-content {
    display: block;
  }

  .sidebar {
    width: 100%;
    margin-top: 32px;
  }
}

これにより、パソコンでは本文とサイドバーを横並びにし、スマホでは本文の下にサイドバーを表示できます。

7-5. コード編集前に必ずバックアップを取る

functions.phpやテーマファイルを編集する前には、必ずバックアップを取りましょう。コードの記述ミスがあると、サイトが真っ白になったり、管理画面に入れなくなったりする可能性があります。

安全に編集するためには、子テーマを使う、FTPやサーバーのファイルマネージャーで復旧できる状態にしておく、バックアッププラグインで事前に保存しておく、テスト環境で確認してから本番に反映する、といった対策が必要です。

特に初心者の場合は、テーマファイルを直接編集するよりも、テーマの設定機能やプラグインで対応できないか先に検討しましょう。

8. サイドバー設計で失敗しないためのポイント

8-1. 表示項目を増やしすぎない

サイドバーに多くの情報を詰め込みすぎると、読者がどこを見ればよいかわからなくなります。プロフィール、検索、人気記事、CTA、広告、カテゴリー、SNSリンクなどをすべて入れると、サイドバーが長くなりすぎることがあります。

サイドバーに置く項目は、サイトの目的に合わせて優先順位を決めましょう。読者に最も見てほしいものを上部に配置し、重要度の低いものは削除または下部に移動します。

8-2. 読者の導線を意識して配置する

サイドバーは、単なる飾りではなく読者を次の行動へ導くためのエリアです。記事を読んでいる読者に、次に何をしてほしいのかを考えて配置しましょう。

たとえば、ブログの回遊率を上げたいなら人気記事や関連記事を上部に置きます。問い合わせを増やしたいなら、目立つ位置にCTAを置きます。運営者の信頼性を伝えたいなら、プロフィールを上部に配置します。

目的が曖昧なまま項目を並べると、クリックされにくいサイドバーになります。配置する前に、サイドバーの役割を明確にしておきましょう。

8-3. スマホ表示で見やすいか確認する

現在のWebサイトでは、スマホ表示の確認が欠かせません。パソコンでは見やすいサイドバーでも、スマホでは本文下に長く表示され、読者にほとんど見られない場合があります。

スマホで確認すべきポイントは、サイドバーがどこに表示されるか、余白が狭すぎないか、文字が小さすぎないか、バナーが画面幅からはみ出していないか、タップしやすいか、などです。

スマホで重要な導線を見せたい場合は、サイドバーだけに頼らず、記事本文内、記事下、固定フッター、メニューなどにも導線を配置しましょう。

8-4. 広告やバナーの入れすぎに注意する

サイドバーは広告を置きやすい場所ですが、入れすぎには注意が必要です。広告が多すぎると、読者が記事に集中できなくなり、サイトへの信頼感が下がることがあります。

特に、点滅するバナー、大きすぎる広告、内容と関係のない広告は、ユーザー体験を損ねやすい要素です。広告を設置する場合は、記事内容や読者の興味に合うものを選び、数を絞って配置しましょう。

収益化を重視する場合でも、まずは読者が快適に記事を読めることを優先するのが長期的には重要です。

8-5. サイト速度への影響を確認する

サイドバーに画像、SNS埋め込み、広告タグ、ランキング表示などを多く入れると、ページの読み込み速度に影響することがあります。特に外部スクリプトを使う広告やSNSウィジェットは、表示速度を遅くする原因になりやすいです。

サイドバーを編集した後は、ページの表示速度を確認しましょう。不要なウィジェットを削除する、画像を圧縮する、外部スクリプトを減らす、キャッシュを活用するなどの対策が有効です。

サイドバーは便利なエリアですが、表示速度を犠牲にしてまで詰め込むべきではありません。必要な項目だけを厳選することが、結果的に読者にもSEOにも良いサイト設計につながります。

9. WordPressサイドバーに関するよくある質問

9-1. サイドバーはSEOに影響する？

サイドバーそのものが直接検索順位を上げるわけではありません。ただし、サイドバーによって読者が関連記事を読みやすくなったり、サイト内を回遊しやすくなったりすれば、ユーザー体験の改善につながります。

また、カテゴリーや人気記事への内部リンクを適切に配置することで、重要なページへの導線を増やすこともできます。ただし、過剰なリンクや広告だらけのサイドバーは逆効果になる可能性があるため、読者にとって役立つ内容を優先しましょう。

9-2. スマホではサイドバーを表示したほうがいい？

スマホでは、サイドバーは本文の下に移動することが多いため、パソコンほど目立ちません。そのため、スマホで必ず見てほしい情報は、サイドバーだけでなく記事本文内や記事下にも配置するのがおすすめです。

スマホでサイドバーを完全に非表示にするか、本文下に表示するかはサイトの目的によります。広告や人気記事を見せたい場合は本文下に残す、読みやすさを優先したい場合は一部を非表示にする、といった判断ができます。

9-3. サイドバーを記事ごとに変えることはできる？

はい、可能です。テーマに記事ごとのレイアウト設定があれば、編集画面からサイドバーの有無や位置を変更できます。テーマに機能がない場合でも、プラグインや条件分岐コードを使えば、記事ごと、カテゴリーごと、固定ページごとにサイドバーの内容を切り替えられます。

たとえば、商品レビュー記事では比較表や広告バナーを表示し、コラム記事ではプロフィールや関連記事を表示するといった使い分けができます。

9-4. サイドバーを非表示にするには？

サイドバーを非表示にする方法は、テーマによって異なります。もっとも簡単なのは、テーマ設定やページ設定で「サイドバーなし」「1カラム」などのレイアウトを選ぶ方法です。

ウィジェット画面でサイドバー内の項目をすべて削除すると、テーマによってはサイドバーが表示されなくなります。CSSで非表示にすることもできますが、根本的に不要な場合はテーマ設定やテンプレート側で非表示にするほうが適切です。

9-5. ブロックテーマでもサイドバーは使える？

はい、ブロックテーマでもサイドバーは使えます。ただし、従来のクラシックテーマのように「ウィジェットエリアとしてサイドバーを編集する」という方法ではなく、サイトエディターでテンプレートやテンプレートパーツを編集してサイドバー相当のエリアを作る場合があります。

ブロックテーマでは、カラムブロックやグループブロックを使って本文エリアとサイドバーエリアを作成し、そこに検索、カテゴリー、最新記事などのブロックを配置できます。従来のウィジェット操作に慣れていると最初は戸惑うかもしれませんが、レイアウトの自由度は高くなります。

まとめ

WordPressのサイドバーは、読者の回遊、信頼性の向上、問い合わせや広告収益への導線づくりに役立つ重要なエリアです。プロフィール、検索ボックス、人気記事、カテゴリー、CTA、SNSリンクなどを配置することで、記事本文だけでは伝えきれない情報を補えます。

サイドバーの作り方は、使用しているテーマによって異なります。クラシックテーマでは「外観＞ウィジェット」やカスタマイザーから設定することが多く、ブロックテーマでは「外観＞エディター」からテンプレートやテンプレートパーツを編集して作成するケースがあります。

サイドバーが表示されない場合は、テーマが対応しているか、ウィジェットが設定されているか、ページごとのレイアウト設定がサイドバーなしになっていないか、CSSやキャッシュが影響していないかを順番に確認しましょう。

カスタマイズする際は、表示位置、幅、背景色、余白、追従表示、ページごとの切り替えなどを調整できます。ただし、項目を増やしすぎると読者にとって見づらくなるため、サイトの目的に合うものだけを厳選することが大切です。

WordPressサイドバーは、ただ設置するだけでは効果を発揮しません。読者が次に何を知りたいのか、どのページへ進んでほしいのかを考えながら設計することで、使いやすく成果につながるサイドバーになります。