WordPressサイトをよりスマートに見せるための私のお気に入りの方法のひとつは、各ページのコンテンツを調整することだ。訪問者には、可能な限り関連性の高い情報を見せたいものです。
これを実現する素晴らしい方法は、WordPressでページごとに異なるサイドバーを追加することだ。
つまり、「会社概要」ページのサイドバーは、ブログのサイドバーとはまったく異なる役割を果たすことができるのだ。
ちょっとした調整で、あなたのサイトは驚くほどプロフェッショナルになり、訪問者によりよく機能するようになる。
このガイドでは、コードを書かずに設定する方法を紹介する。
クイックステップ
WordPressでページごとにサイドバーを使い分ける理由
ステップに入る前に、なぜこの小さな変更が大きな違いを生むのかについてお話ししましょう。一律サイズのサイドバーは、技術的にはうまくいくかもしれませんが、間違ったページでは場違いだと感じることがよくあります。
サイドバーをカスタマイズすると、あらゆる種類の便利なアップグレードがアンロックされます。
私が見た最大のメリットは以下の通りだ：
- 関連性を高める
ページの目的に合ったコンテンツを表示することができます。例えば、ブログの関連記事や、問い合わせページの営業時間や地図など。
- ユーザーエクスペリエンスの向上
訪問者が必要なものをすぐに見つけることができれば、より長く滞在し、より良い体験をすることができます。実際、直感的なデザインはユーザーのリテンションを最大60％向上させる可能性があり、（的を絞ったサイドバーのような）よく整理されたレイアウトがエンゲージメントにどれだけ影響するかを示しています。
- よりプロフェッショナルに見える
ページに応じてレイアウトが変化するサイトは、よりスマートに感じられます。細部にまで気を配っていることが訪問者に伝わります。
- 訪問者を誘導する
サイドバーはアクションを起こすのに最適なスペースです。あなたのブログにニュースレターのサインアップを追加したり、サービスページに「今すぐ予約」ボタンを追加して、ユーザーが最も興味を持つタイミングを逃しません。
この1つの変更を加えるだけで、サイトのデザインとパフォーマンスの両方が実にシャープになる。
SeedProdでWordPressのサイドバーをページごとに追加する方法
WordPressでカスタムサイドバーを作成し、割り当てる最も簡単な方法は、WordPressのための最高のドラッグアンドドロップウェブサイトビルダーであるSeedProdを使用することです。
SeedProdを使えば、コードを一行も書くことなく、完全にカスタム化されたテーマ、ページ、レイアウトを構築することができます。シンプルなビジュアルブロックを使ってヘッダー、フッター、サイドバーなどをデザインできる強力なテーマビルダーが含まれています。
つまり、サイトの各ページに異なるサイドバーを作成し、表示する場所を正確にコントロールし、テーマファイルに触れることなくいつでも変更できるのです。
ステップ・バイ・ステップで説明しよう。
ステップ1：SeedProdのインストールと有効化
まずは、SeedProdのウェブサイトにアクセスし、アカウントにログインしてください。
ダウンロード」タブをクリックし、プラグインファイルをコンピュータにダウンロードします。ZIPファイルとして保存されます。
注： SeedProdには無料版もありますが、このチュートリアルではテーマビルダーを使えるようにPro版を使っています。
次に、WordPressのダッシュボードに移動し、プラグインをインストールして有効化します。詳しくは、SeedProd Proのインストール方法をご覧ください。
ステップ2：カスタムテーマの作成
SeedProdがインストールされたので、カスタムWordPressテーマを作り始めることができます。
WordPressのダッシュボードで、SeedProd " Theme Builderにアクセスしてください。ページ上部のテーマテンプレートキットボタンをクリックします。
プロがデザインしたスターターテーマのライブラリが表示されます。
あなたのブランドに合ったテンプレートを選んでください。後でドラッグ＆ドロップビルダーですべてを変更できます。
キットを選択すると、SeedProdは自動的に以下のようなコアとなるテーマパーツをすべて作成します：
- ヘッダー
- フッター
- シングルポスト
- ページ
- サイドバー
- さらに
SeedProdのビジュアルエディターで各パーツを編集できるので、コードに触れることなくレイアウトをカスタマイズできます。
この仕組みの完全なウォークスルーが必要な場合は、カスタムWordPressテーマの作成方法のガイドをご覧ください。
ステップ3：カスタムサイドバーテンプレートの作成
ページごとに異なるサイドバーコンテンツを表示するには、既存のデザインに基づいて新しいサイドバーテンプレートを作成し、すべての一貫性を保つようにします。
まず、キットの中からサイドバー・テンプレート・パーツを探してください。これは、ページがサイドバーを必要とするとき、あなたのテーマが使用するデフォルトのサイドバーです。
このチュートリアルでは、このサイドバーを複製し、ブログ・ページではなくアーカイブ・ページ専用になるように少し変更します。
そのためには、テーマビルダーでサイドバーテンプレートにカーソルを合わせ、複製をクリックします。
テーマパーツのリストにコピーが表示されます。
複製されたバージョンの「デザインを編集」をクリックして、ビジュアルビルダーで開きます。
エディター内では、レイアウトを好きなようにカスタマイズできる。
私のアーカイブページのサイドバーでは、オプトインフォームのブロックを削除し、社会的証明を強調するために最近の投稿ブロックといくつかの証言に置き換えた。
これを自分で行うには、ブロックにカーソルを合わせてゴミ箱アイコンを選択するだけ。
次に、カスタムサイドバーに表示したいブロックの上にドラッグします。
これにより、サイドバー全体のデザインに一貫性が保たれます。同じフォント、間隔、構造を持ちながら、コンテンツをページの意図に合わせることができます。
より詳しい説明は、WordPressでカスタムサイドバーを追加する方法をご覧ください。
ステップ 4: サイドバーをページレイアウトに追加する
それでは、右のテンプレートに新しいサイドバーを追加しましょう。
私が使っているテーマキットには、サイドバーを特徴とする2つのテンプレートが含まれている：
- Single Post- 通常のブログ記事に使用
- アーカイブ、検索結果- カテゴリーリストや検索結果のようなアーカイブページに使用されます。
現在、これらのテンプレートは両方とも同じデフォルトのサイドバーを使用しています。
この場合、アーカイブ、検索結果テンプレートに、先ほど作成した新しいサイドバーを使わせたい。アーカイブ・コンテンツ用に作られたものだ。
そのためには、リストでArchives, Search Resultsテンプレートを見つけ、Edit Designをクリックします。
SeedProdエディター内で、オレンジ色のツールバーが表示されるまでサイドバーエリアにカーソルを合わせてください。そのセクションをクリックして選択してください。
左側の設定パネルに「編集」とあります：テンプレート・パーツ
テンプレートパーツのドロップダウンから、先ほど作成した新しいサイドバーテンプレートを選択します。
すぐにレイアウトが更新され、カスタムサイドバーが表示されます。
これでよければ、右上の「保存」をクリックします。
これで完了です！これで、ブログ記事の表示を変更することなく、アーカイブページに別のサイドバーを割り当てることができました。
ステップ5：テーマを保存、公開、有効化する
カスタムサイドバーを設置したら、最後のステップは、テーマがサイト上でライブであることを確認することです。
WordPressダッシュボードのSeedProd " Theme Builderにアクセスしてください。
ページの上部にある「SeedProdテーマを有効にする」というトグルをクリックします。
これにより、現在のWordPressテーマが、カスタムレイアウトとサイドバーの割り当てを含む、今作成したものに置き換えられます。
あなたのサイトにアクセスし、アーカイブページ（ブログのカテゴリーや検索結果など）に移動してください。新しいサイドバーが、あなたが配置した場所に正確に表示されるはずです。
他のテンプレートにもカスタムサイドバーを作成したい場合は、同じ手順を繰り返すだけです。
WordPressで異なるサイドバーを表示する他の方法
SeedProdを使用していない場合でも、WordPressサイト全体に異なるサイドバーを表示する方法がいくつかあります。これらの方法はドラッグ＆ドロップのような体験はできませんが、あなたのセットアップ次第ではまだ機能します。
ダイナミック・サイドバー・プラグインを使う
Custom Sidebars - Dynamic Widget Area Managerのようなプラグインをインストールするのも一つの方法です。
これにより、複数のサイドバーを作成し、シンプルなドロップダウンインターフェースを使用して、異なるページ、投稿、またはカテゴリに割り当てることができます。
- 長所コード不要、ほとんどのテーマに対応
- 短所：ウィジェットベースのレイアウトに制限され、SeedProdのような完全なビジュアル・コントロールができない。
テーマファイルの編集（コード方式）
コードの編集に慣れていれば、カスタムサイドバーを登録し、テーマテンプレートで条件ロジックを使って表示させることができます。しかし、コーディングに不慣れな方にはお勧めしません。
- 長所サイドバーを表示する場所と方法を完全にコントロールできる。
- 短所：初心者にはリスクが高い。子テーマなしでテーマを更新すると、変更が失われる可能性がある。
個人的には、毎回SeedProdを選んでいます。特に、コードを一行も触ることなく、サイドバーの見た目や表示位置を完全にコントロールしたい場合には、私が見つけた中で最も簡単なオプションです。さらに、どのようなレイアウトやデザインスタイルにも柔軟に対応できます。
WordPressのカスタムサイドバーに関するFAQ
サイドバーを各ページに合わせる
WordPressでページごとに異なるサイドバーを使用することは、大きなインパクトを与える小さな変更のひとつです。サイトをすっきりとしたデザインにし、ユーザーエクスペリエンスを向上させ、訪問者を目的の場所に正確に誘導することができます。
個人的には、SeedProdを使っています。それに、レイアウトを各ページの目的に完璧に合わせることができます。
SeedProdを使えば、数クリックでカスタムページレイアウトやサイドバーを構築でき、開発者は不要です。
WordPressサイトをカスタマイズする際には、以下のガイドも参考になるでしょう：
- WordPressでカスタムページを作成する方法
- WordPressでブログのレイアウトを変更する方法
- WordPressで余白を変更する方法
- WordPressでページタイトルを非表示にする方法
- WordPressにギャラリーを追加する方法
- WordPressでカスタムCSSを追加する方法
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
