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