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

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

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

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

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

WordPressの投稿と固定ページで異なるサイドバーを使用する理由

WordPressで異なるサイドバーを使用すると、訪問者が表示しているページや投稿に基づいて、より関連性の高いコンテンツを表示できます。

これにより、エンゲージメントを向上させ、より良いユーザーエクスペリエンスを作成し、コンバージョンを増やすことができます。WordPressで異なるサイドバーを使用する主なメリットをいくつかご紹介します。

• より関連性の高いコンテンツを表示する: 現在のページに関連する関連記事、商品、広告、リソースなどを表示できます。
• ユーザーエンゲージメントを向上させる: 文脈に沿ったサイドバーのコンテンツは、訪問者があなたのウェブサイトをさらに探索するように促すことができます。
• コンバージョンを増やす: 特定のコンテンツに基づいて、ターゲットを絞った行動喚起、ニュースレターフォーム、プロモーションを追加できます。
• より良いナビゲーションを作成する: 異なるサイドバーは、ウェブサイトの各セクションでユーザーを最も役立つ次のステップに誘導するのに役立ちます。
• サイトのさまざまな領域をカスタマイズする: ブログ投稿、ランディングページ、WooCommerceページ、メンバーシップエリアなどにユニークなエクスペリエンスを作成できます。

それでは、WordPressで投稿と固定ページに異なるサイドバーを追加する3つの方法を見ていきましょう。新しいサイトを構築している場合でも、クラシックテーマを使用している場合でも、モダンなブロックテーマを使用している場合でも、お客様に合ったソリューションをご用意しています。

以下のクイックリンクを使用して、最も適した方法にジャンプできます。

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

このチュートリアルで試したすべての方法の中で、私たちはカスタムテーマの作成を最も推奨します。このアプローチは、比類のない柔軟性と制御を提供します。

これにより、ヘッダーからフッター、サイドバーまで、サイトのすべての要素を完全にデザインできます。これは、プラグインやブロックエディター単独のより限定的なオプションとは異なります。

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

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

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

数十のテーマビルダーをテストした経験に基づいて、SeedProdやThrive Architectのようなツールを使用することをお勧めします。

これらのツールは、ドラッグアンドドロップインターフェイス、事前構築済みテンプレート、WordPressの組み込み機能を超えるデザインコントロールを提供し、完全なデザインの自由を可能にします。

当社のパートナーブランドの多くはSeedProdを使用しています。その直感的なドラッグアンドドロップインターフェイスは非常に初心者向けであり、100万以上のウェブサイトで信頼されています。ツールの詳細については、SeedProdレビューをご覧ください。

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

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

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

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

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

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

これで、利用可能なすべての[id="x1"]テーマテンプレートキットが表示されるはずです。カスタムテーマのベースとして、いずれかを使用してください。

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

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

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

たとえば、[id="x1"]Curbside Food Truckテーマキットには、すでにサイドバーが含まれている単一投稿テンプレートがあります。

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

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

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

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

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

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

ブログのカテゴリ[id="x1"]アーカイブページに表示されるサイドバーを、ブログ投稿のサイドバーとは異なるものにしたいとします。その場合は、2つの異なるサイドバーテーマテンプレートを作成する必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SeedProdには、[id="x1"]カウントダウンタイマーや[id="x2"]画像ホットスポットから、プログレスバーなど、数多くのオプションがあります。「ブロック」タブで検索バーを使用するか、下にスクロールして必要なブロックを見つけることができます。

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

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

これにより、顧客からの肯定的なレビューをソーシャルプルーフとして表示できます。あなたも追加する方法を学びたい場合は、[id="x1"]WordPressでローリングレビューを追加する方法に関するガイドを読むことができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それで終わりです！

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

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

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

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

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

さらに、WordPress.orgで80,000以上の有効インストールがあり、信頼できる選択肢となっています。

ステップ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）のようなテーマビルダーを使用すると、サイドバーのないテンプレートを完全に制御して作成できます。

5. WordPressでサイドバーをカスタマイズするにはどうすればよいですか？

WordPressでサイドバーをカスタマイズするには、ウィジェットを追加または削除したり、SeedProdのようなテーマビルダーでカスタムレイアウトをデザインしたり、ブロックテーマの場合はフルサイトエディターを使用したりできます。これらの方法により、特定の投稿やページに合わせてサイドバーのコンテンツ、外観、配置を調整できます。

この記事で、WordPressのページや投稿に異なるサイドバーを表示する方法を学んでいただけたなら幸いです。また、WordPressでサイドバーの位置を変更する方法に関するガイドや、ウェブサイトグラフィックに最適なCanvaの代替ツールの専門家による選び方もご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。