WordPress で投稿やページごとに異なるサイドバーを表示する方法

特定の投稿やページでWordPressのサイドバーに異なるコンテンツを表示したいですか？

標準的な、すべてに適合するサイドバーは、しばしば機会損失です。特定のコンテンツに合わせてサイドバーをカスタマイズすることで、ユーザーエンゲージメントを高め、コンバージョンを増やすことができます。

これは技術的に聞こえるかもしれませんが、適切なツールを使えば、サイト用に異なるサイドバーを簡単に作成・管理できることを私たちは直接見てきました。

このガイドでは、WordPressで投稿やページごとに異なるサイドバーを表示する方法を説明します。

WordPressで特定のページや投稿に異なるサイドバーを表示する理由

サイドバーを異なるものとして表示する主な理由は、訪問者により関連性の高い、ターゲットを絞ったエクスペリエンスを提供することです。これにより、ユーザーエンゲージメントの向上、コンバージョンの増加、サイトの効果向上につながります。

あらゆる場所に同じ一般的なコンテンツを表示する代わりに、ユーザーが表示している特定のページや投稿に合わせてサイドバーを調整できます。

例えば、ブログ投稿にはカテゴリ固有のウィジェットを表示したり、ストアページに商品関連情報を表示したり、または「ソーシャルメディアフィードを表示」したりすることができます。

カスタムサイドバーを使用すると、関連リンク、広告、または行動喚起ボタンを表示することで、より集中したエクスペリエンスを作成することもできます。

それでは、WordPressで投稿やページに異なるサイドバーを追加する3つの方法を見てみましょう。以下のクイックリンクを使用して、最も適した方法にジャンプできます。

• Method 1: Create a Custom Theme With Different Sidebars for Specific Pages or Posts (Recommended)
• Method 2: Show a Different Sidebar on Certain Pages With a Free Plugin (Classic Themes)
• Method 3: Add Different Sidebars to Specific Templates in WordPress Full-Site Editor (Block Themes)
• カスタムサイドバーに関するよくある質問

方法1：特定のページまたは投稿に異なるサイドバーを持つカスタムテーマを作成する（推奨）

このチュートリアルで試したすべての方法の中で、カスタムテーマを作成することを最もお勧めします。理由は、WordPressサイトのデザインに対する柔軟性と制御が最も高くなるためです。

とはいえ、この方法はサイト構築の初期段階にある場合、またはWordPressテーマの切り替えを正しく行うことに興味がある場合にのみ推奨します。テーマの切り替えは、既存のコンテンツやレイアウトに大きな影響を与える可能性があるためです。

テーマを切り替えたくない場合は、方法2（クラシックテーマ）または方法3（ブロックテーマ）にスキップできます。

この方法では、WordPressのページビルダープラグインが必要になります。

数十のテーマビルダーをテストした経験に基づき、SeedProdやThrive Architectのようなツールを使用することをお勧めします。これらはWordPressの組み込み機能よりもはるかに多くの制御とカスタマイズオプションを提供します。

当社のパートナーブランドのいくつかは、SeedProd が初心者向けで信頼性が高いため利用しています。ツールの詳細については、SeedProd レビューをご覧ください。

ステップ1：SeedProdのインストールと有効化

まず、SeedProdプラグインをウェブサイトにインストールしてください。初めての場合は、WordPressプラグインのインストール方法に関する初心者ガイドをご覧ください。

完了したら、適切なフィールドにSeedProdライセンスキーを入力し、「キーを検証」をクリックします。

ステップ2：テーマテンプレートキットを選択する

次に、SeedProd » テーマビルダーに移動します。

次に、「テーマテンプレートキット」ボタンをクリックします。

これで、利用可能なすべてのテーマテンプレートキットが表示されるはずです。カスタムテーマのベースとして、どれでも自由に利用してください。

各キットにカーソルを合わせ、虫眼鏡ボタンをクリックすると、テーマをより詳しく表示することもできます。

このチュートリアルでは、すでにサイドバーデザインが含まれているテーマキットを選択することをお勧めします。

これにより、既存の「サイドバーテンプレートパーツ」を複製してカスタマイズできるため、ゼロから新しいものを作成するよりもはるかに高速です。

例えば、Curbside Food Truckテーマキットには、すでにサイドバーが含まれている単一の投稿テンプレートがあります。

キットが決まったら、カーソルを合わせてください。

次に、オレンジ色のチェックマークアイコンが表示されたらクリックします。

数分待って、SeedProdがテーマをセットアップするのを待ちます。

ステップ3：サイドバーテンプレートを複製して編集する

それが完了すると、再び「テーマビルダー」設定ページにリダイレクトされ、SeedProdがWordPressウェブサイト用にいくつかのテーマテンプレートを作成したことがわかります。

テーマテンプレートの編集を開始できます。

例えば、ブログのカテゴリ アーカイブページ のサイドバーを、ブログ投稿のサイドバーとは異なる外観にしたいとします。その場合、2つの異なるサイドバーテーマテンプレートを作成する必要があります。

まず、キット内の「サイドバー」テーマテンプレートを見つけます。これは、ページにサイドバーが必要な場合にテーマが使用するデフォルトのサイドバーです。

例として、このテンプレートを複製してから編集して、元のバージョンとは異なるものにします。これを行うには、テンプレートにカーソルを合わせて「複製」をクリックします。

サイドバーテンプレートのコピーが表示されるはずです。

ここで、「デザインを編集」をクリックしてください。

ステップ4：新しいサイドバーをカスタマイズする

これでSeedProdエディターに到着します。サイドバーテンプレートが予想よりも幅広く見える場合でも心配しないでください。後でページにサイドバーが追加されると、サイズは調整されます。

選択したテーマでは、デフォルトのサイドバーテンプレートに検索バー、ニュースレター購読のCTA、ブログカテゴリページへのリンク、Instagramフィードのプレビューが表示されます。

これらの要素の一部を置き換えます。これらのブロックはグループまたは行に整理されているため、1つずつ削除するのではなく、1つの行で複数のブロックを一度に削除できます。

これを行うには、要素にカーソルを合わせ、ブロック全体に濃い青色の線が表示されるまでホバーします。次に、要素の上部にあるゴミ箱の「行を削除」アイコンをクリックします。

新しい行を作成するには、新しい行を表示したい要素のすぐ上にある要素にカーソルを合わせます。濃い青色の線が表示されたら、その下に表示される「+」アイコンをクリックします。

次に、下にある「+」アイコンをクリックする必要があります。

次に、行のレイアウトを選択できます。

私たちのニーズに最も適しているため、最初のオプションを選択します。

ここで、さまざまな種類のブロックをサイドバーに追加して、カスタマイズを開始できます。

SeedProdには、カウントダウンタイマーや画像ホットスポットからプログレスバーなど、選択できるオプションが豊富に用意されています。検索バーを使用するか、「ブロック」タブを下にスクロールして、必要なブロックを見つけることができます。

気に入ったブロックが見つかったら、それをドラッグアンドドロップして行に追加するだけです。

例として、「お客様の声」ブロックを追加することにしました。

これを使用して、顧客からの肯定的なレビューをソーシャルプルーフとして表示できます。自分でも追加する方法を学びたい場合は、WordPressでローテーションするお客様の声を追加する方法に関するガイドをお読みください。

この時点で、さらに行やブロックを追加してください。

サイドバーのデザインに満足したら、ページ右上にある「保存」ボタンの横にある矢印アイコンをクリックします。次に、「公開」をクリックします。

ステップ5：新しいサイドバーをページテンプレートに追加する

さて、この新しいサイドバーを投稿または固定ページのテンプレートに追加しましょう。これを行うには、WordPressダッシュボードのSeedProd » Theme Builderに戻ります。

使用しているテーマキットには、サイドバーを備えた2つのテーマテンプレートがあります。「シングル投稿」と「アーカイブ、検索結果」です。前者はWordPressの投稿用、後者はカテゴリアーカイブを含むすべてのアーカイブページおよび検索結果ページ用です。

現在、両方のテンプレートで同じサイドバーテンプレートが使用されています。

この場合、新しく作成したサイドバーを「アーカイブ、検索結果」テンプレートで使用したいと考えています。編集したいテンプレートを見つけて、「デザインを編集」をクリックするだけです。

SeedProdエディタで、サイドバーのある領域にカーソルを合わせ、上にオレンジ色のツールバーが表示されたらクリックします。

左側の設定パネルに「編集中：テンプレートパーツ」と表示されるはずです。

テンプレートパーツのドロップダウンメニューで、作成したサイドバーテンプレートを選択する必要があります。

新しいサイドバーがページテンプレートに追加されたはずです。

その後、「保存」をクリックするだけで変更が公開されます。

ステップ6：SeedProdテーマを有効化する

この段階で、さらにサイドバーを作成し、以前と同じ手順を繰り返して他のページに追加できます。

満足したら、SeedProd » Theme Builderに戻り、「SeedProdテーマを有効にする」設定を「YES」と表示されるまで切り替えます。これにより、ウェブサイトでSeedProdテーマが有効になります。

それで終わりです！

カスタムサイドバーは次のようになります。

方法2：無料プラグインで特定のページに異なるサイドバーを表示する（クラシックテーマ）

ほとんどのクラシックなWordPressテーマには、定義済みのサイドバーエリアがあり、通常はサイト全体で同じサイドバーが表示されます。

これは機能しますが、セクションごとにユニークなコンテンツを表示したい場合は、制限があるように感じることがあります。

幸いなことに、無料のプラグインを使用することで、より簡単に制御できます。ここでは、Lightweight Sidebar Managerをお勧めします。このプラグインを使用すると、無制限のカスタムサイドバーを作成し、特定の投稿、ページ、カテゴリなどに割り当てることができます。

ステップ1：Lightweight Sidebar Managerプラグインのインストール

まず、Lightweight Sidebar Managerプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

ステップ2：新しいカスタムサイドバーの作成

有効化したら、外観 » サイドバーに移動する必要があります。最初のサイドバーを作成するには、「新規追加」ボタンをクリックします。

これで、新しいWordPressサイドバーのタイトルを入力できます。これは参照用なので、好きなものを自由に使用できます。

これで、‘Sidebar To Replace’ ドロップダウンメニューを開きます。この設定により、テーマのデフォルトのサイドバーエリア（‘Main Sidebar’ や ‘Blog Sidebar’ など）のどれを新しいカスタムサイドバーに置き換えるかを選択できます。

サイドバーを表示したい場所を選択します。表示されるオプションは、WordPressテーマによって異なる場合があります。 

ステップ3：表示および除外ルールを設定する

これで、インクルージョンまたはエクスクルージョンルールを作成することで、サイドバーが表示される場所を制御できます。 

含めるルールを作成するには、「表示先」ドロップダウンを開き、サイドバーを使用したいページ、投稿、カスタム投稿タイプ、またはカテゴリを選択します。 

例えば、サイドバーを特定のページに追加することもできます。例えば、404エラーページ、著者アーカイブ、またはブログページなどです。

他のオプションとして、特定のページ/投稿/分類法を選択して、特定のページ、投稿、またはカテゴリにサイドバーを使用する方法があります。

これにより、ページ、投稿、またはカテゴリを入力できるボックスが追加されます。

より多くの表示ルールを作成するには、[表示]ルールの追加ボタンをクリックするだけです。

これにより、新しいインクルージョンルールを作成できるセクションが追加されます。

必要に応じて、除外ルールを作成することもできます。たとえば、ホームページを除くすべてのページにサイドバーを表示したい場合があります。 

含めるルールと除外するルールを組み合わせて、サイドバーがWordPressブログのどこに表示されるかを正確に制御することもできます。

サイドバーの場所を除外するルールを作成するには、「除外ルールの追加」ボタンをクリックするだけです。

新しい「表示しない」セクションで、ドロップダウンメニューを開き、このサイドバーを使用しないページまたは投稿を選択します。 

上記と同じ手順に従うことで、特定のカテゴリを持つWordPressページからサイドバーを除外することもできます。

ステップ4：ユーザーロールの表示を設定する（オプション）

サイドバーを表示する場所を決定した後、ユーザーごとに異なるコンテンツを表示したい場合があります。

たとえば、メンバーシップサイトがある場合、訪問者とログインメンバーで異なるサイドバーを使用したい場合があります。

これを行うには、「ユーザー」ドロップダウンを開き、ドロップダウンメニューからロールを選択します。これで、この特定のユーザーロールを持つユーザーのみがサイドバーを表示できるようになります。

最後に、オプションの説明を入力することもできます。これはWordPressダッシュボードにのみ表示されるため、他の管理者やユーザーと情報を共有するのに適しています。

たくさんのサイドバーを作成する場合は、このフィールドを使用して自分用のメモや役立つリマインダーを残すこともできます。

入力した情報に満足したら、「公開」をクリックするだけです。

ステップ5：新しいサイドバーにウィジェットを追加する

これが完了したら、外観 » ウィジェットに移動します。テーマがデフォルトでサポートするすべてのウィジェットエリアと、前のステップで作成した新しいサイドバーが表示されます。

これで、他のウィジェットセクションと同様に、サイドバーにウィジェットを追加できます。

手順については、WordPressウィジェットの追加と使用方法のガイドをご覧ください。 

サイドバーの設定に満足したら、「更新」をクリックします。

これで、WordPress ブログにアクセスすると、新しいサイドバーがライブで表示されます。

より多くのテーマサイドバーを作成するには、これらの手順を繰り返すだけです。 

WordPressフルサイトエディター（ブロックテーマ）で特定のテンプレートに異なるサイドバーを追加する方法3

Twenty Twenty-Four や Hestia のようなブロックテーマを使用している場合は、フルサイトエディターを使用してカスタムサイドバーを作成し、好きな場所に配置できます。

この方法を説明するために、Twenty Twenty-Four テーマを使用します。

ブロックテーマの素晴らしい点は、すべて同じ標準ツールである フルサイトエディター を使用していることです。各テーマ内の特定のテンプレートは異なる場合がありますが、編集プロセスは一貫しています。

これは、ページや投稿に別のサイドバーを追加するために特別なサイドバープラグインを必要としないことを意味します。

ステップ1：フルサイトエディターを開く

まず、WordPress管理画面の外観 » エディターに移動します。

ここには、ブロックテーマをカスタマイズするためのいくつかのメニューが表示されます。

新しいサイドバーを作成するには、「パターン」を選択する必要があります。

ステップ2：サイドバーテンプレートパートを複製する

次に、「すべてのテンプレートパーツ」をクリックします。

テンプレートパートは、ヘッダー、フッター、サイドバーのような、サイトの複数のページに表示できる再利用可能なコンテンツブロックです。

‘Sidebar’ という名前のテンプレートパートが表示されるはずです。3点メニューをクリックし、「複製」を選択してください。これにより、サイドバーテンプレートのコピーが作成され、カスタマイズできるようになります。

新しいポップアップで、後で簡単に見分けられるように新しいサイドバーに名前を付けます。

「エリア」セクションで「一般」を選択します。完了したら、「複製」をクリックするだけです。

ステップ3：新しいサイドバーをカスタマイズする

新しく複製されたサイドバーがテンプレートパーツのリストに表示されるはずです。

サムネイルをクリックするだけで、編集インターフェイスが開きます。

サイドバーのカスタマイズ、ブロックの追加、またはウェブサイトのデザインに合わせて設定を開始できるようになりました。フルサイトエディターは、テンプレートパーツにブロックをドラッグ＆ドロップするだけでよいという点で、ブロックエディターと同様に機能します。

この例では、最新の投稿、メールリストに登録するための行動喚起ボタン、そしてこれらの要素を区切るためのシェイプディバイダーを表示することにしました。

サイドバーの外観に満足したら、「保存」ボタンをクリックします。

ステップ4：新しいサイドバーをページテンプレートに追加する

次に、この新しいサイドバーをページテンプレートに追加する必要があります。

まず、フルサイトエディターのメインメニューに戻ります。次に、「テンプレート」をクリックします。

Twenty Twenty-Fourテンプレートにはサイドバー付きのページテンプレートがいくつかありますが、すべて同じサイドバーテンプレートパーツを使用しています。新しく作成したサイドバーでそのうちの1つを変更してみましょう。

これを行うには、サイドバーのあるページテンプレートを選択します。この場合、通常のページのサイドバーとWordPressの個別投稿のサイドバーが異なるように、「サイドバー付きページ」を選択します。

編集インターフェースで、「サイドバー」セクションをクリックします。

ブロックツールバーで、3点メニューをクリックし、「削除」を選択して古いサイドバーを削除します。

次に、同じセクションの「+」アイコンをクリックします。

その後、「テンプレートパーツ」を探して選択します。

それが完了したら、「選択」をクリックします。

これにより、作成したばかりのサイドバーを選択できるようになります。

テーマが持つさまざまなテンプレートパーツが表示される新しいポップアップが表示されます。

ここで、新しいサイドバーテンプレートをクリックします。

この段階で、必要に応じてテンプレートのカスタマイズを続けることができます。

次に、「保存」をクリックするだけです。

これで、ページテンプレートをカスタマイズし、カスタムサイドバーを追加しました。

ステップ5：新しいテンプレートをページに割り当てる

ただし、このテンプレートが実際にウェブサイトで使用されていることを確認する必要があります。これを行うには、フルサイトエディターのメインメニューに戻り、「ページ」をクリックします。

次に、サイドバーを追加したいページを選択します。

例として、「プライバシーポリシー」ページを使用します。

現在、ページ左上の設定アイコンをクリックし、ページ設定パネルで「ページ」をクリックしてください。

その後、「テンプレートをスワップ」を選択する必要があります。

これを行うと、ポップアップが表示されます。

ここで、新しいサイドバーが含まれるページテンプレートを選択するだけです。

これで完了です！同じ手順を繰り返して新しいカスタムサイドバーを作成し、さまざまなページや投稿に実装してください。

新しいサイドバーを追加したサンプルプライバシーポリシーページは次のようになります。

カスタムサイドバーに関するよくある質問

WordPressで特定の投稿またはページにカスタムサイドバーを追加することについて、読者からよく寄せられる質問を以下に示します。

1. 特定のブログ投稿のみにユニークなサイドバーを作成するにはどうすればよいですか？

Lightweight Sidebar Managerのようなプラグインを使用している場合は、新しいサイドバーを作成し、「表示先」ルールを「特定のページ/投稿/タクソノミー」に設定できます。次に、表示したい正確な投稿の名前を入力するだけです。

SeedProdのようなテーマビルダーを使用している場合は、新しいページテンプレートを作成し、カスタムサイドバーを割り当ててから、投稿エディターから個々の投稿にそのテンプレートを適用できます。

2. 多くの異なるサイドバーがあると、ウェブサイトの速度が低下しますか？

一般的には、いいえ。作成するサイドバーの数は、サイトの速度にほとんど影響しません。パフォーマンスは、それらに何を入れるかに大きく依存します。

大量の画像や複雑なスクリプトなど、多くの重いウィジェットが配置されたサイドバーは、ページの速度を低下させる可能性があります。ただし、サイドバー管理プラグインやツール自体は軽量で、パフォーマンスのために最適化されています。

3. モバイルデバイスではカスタムサイドバーはどのように機能しますか？

ほとんどの最新のWordPressテーマはレスポンシブです。これは、スマートフォンなどの小さな画面では、サイドバーのコンテンツが横に表示されないことを意味します。代わりに、「スタック」されてメインのページコンテンツの下に表示されるようになります。

カスタムサイドバーはモバイル訪問者にも引き続き表示されますが、記事をスクロールして下まで行かないと表示されません。

4. 特定のページからサイドバーを削除することはできますか？それとも置き換える必要がありますか？

はい。ほとんどのWordPressテーマには、「フル幅」または「サイドバーなし」のページテンプレートが含まれています。ページエディターからこのテンプレートを選択すると、その特定のページからサイドバーを削除できます。

お使いのテーマにこのオプションがない場合は、SeedProd（方法1）のようなテーマビルダーを使用すると、サイドバーのないテンプレートを完全に制御して作成できます。

この記事が、WordPressでページや投稿ごとに異なるサイドバーを表示する方法を学ぶのに役立ったことを願っています。また、WordPressでサイドバーの配置を変更する方法に関するガイドや、ウェブサイトのグラフィックに最適なCanvaの代替ツールについても確認することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。