要約：WordPressにサイドバーを追加する方法
- SeedProdテーマビルダー：ドラッグ＆ドロップで完全にカスタムなサイドバーを作成し、任意のページまたは投稿に割り当てることができます。
- WordPressカスタムizer：クラシックテーマの設定を使用して、サイドバーのレイアウトを設定し、ウィジェットを追加します。
- ウィジェット画面：[外観] → [ウィジェット]に移動して、サイドバー領域に直接ブロックを追加します。
- ブロックテーマサイトエディター：[外観] → [エディター]を使用して、サイドバー効果のためにテンプレートにカラムブロックを追加します。
初期のサイトでは、サイドバーが何ができるかを理解するまで、メニューやフォームをレイアウトに収めるのに苦労していました。WordPressにサイドバーを追加する方法を学ぶことは、訪問者を惹きつけ続けるために行った最良の変更の1つであることがわかりました。
ナビゲーションリンク、最新の記事、またはニュースレターフォームで読者を引きつけ続けることができる場所です。このガイドでは、私がすべてのプロジェクトで頼りにしている4つの方法を使用して、WordPressにサイドバーを追加する方法を段階的に説明します。
SeedProdのビジュアルビルダー、クラシックテーマの場合は[外観] → [カスタムizer]、ブロックテーマの場合は[外観] → [エディター]を使用して、数回クリックするだけでWordPressにサイドバーを追加できます。いずれもコーディングは不要です。
WordPressサイドバーとは何ですか？
WordPressサイドバーは、通常、ページの左右どちらかの側にある、メインコンテンツの隣に配置される縦長のセクションです。メニュー、最新の記事、広告、ニュースレターフォームなどの追加コンテンツを、メインの記事スペースを散らかさずに表示できるウィジェットエリアです。
ページごとに変わるメインコンテンツとは異なり、サイドバーはサイト全体で同じであることがよくあります。より柔軟性が必要な場合は、ページごとに異なるサイドバーを設定することもできます。
WordPressテーマは、サイドバーが利用可能かどうか、いくつ使用できるか、どこに表示されるかを制御します。テーマによってはデフォルトで含まれているものもあれば、自分で追加する必要があるものもあります。
ほとんどのデフォルトサイドバーには基本的なウィジェットが付属していますが、目標に合わない場合もあります。より多くの制御が必要な場合は、カスタムサイドバーを作成して、訪問者に表示されるものを正確に選択できます。
WordPressサイドバーを何に使用できますか？
WordPressウィジェットを使用して、ほぼすべてのコンテンツをサイドバーに追加できます。
例をいくつかご紹介します：
- ナビゲーション – ナビゲーションメニューウィジェットを使用して、ユーザーが関連ページを見つけやすくしたり、カテゴリ別にブログ投稿をフィルタリングするメニューを使用したりできます。
- 検索 – サイドバーに検索ボックスを追加すると、ユーザーが必要なものをすばやく見つけるのに役立ちます。
- メール購読 – サイドバーにオプトインメールフォームを追加して、メールアドレスを収集し、リストを増やしましょう。
- 注目のコンテンツ – サイドバーは、他の投稿よりもユーザーにとって価値の高い個々の投稿を紹介するのに最適な場所です。
- ソーシャルメディア – フォロワーを増やすために、ソーシャルフォローボタンと共有ウィジェットを追加します。
- 広告 – サイドバーは、収益を上げるために広告を使用する場合、広告を表示するのに最適な場所です。
- 行動喚起 (CTA) – 新しいオンラインコース、製品、またはオファーがある場合は、サイドバーにCTAを追加して、読者に確認を促すことができます。
サイドバーとは何か、そしてそれがどのように役立つかを説明しました。次に、WordPressにサイドバーを追加しましょう。
WordPressカスタムizer、ウィジェット画面、サイトエディター、ビジュアルウェブサイトビルダーの4つの方法を以下に紹介します。いずれもコードは不要です。
あなたに適した方法は、セットアップによって異なります。デザインコントロールと無制限のサイドバーが必要な場合は、SeedProd（方法1）を使用してください。
クラシックテーマを使用している場合は、カスタムizerが最も速いオプションです（方法2）。Twenty Twenty-Fiveのようなブロックテーマを使用している場合は、方法4に直接進んでください。
SeedProdでカスタムWordPressサイドバーを構築する方法は？
単一のカスタムサイドバーが必要な場合もあれば、サイトのさまざまな部分に複数のサイドバーが必要な場合もあります。
いずれにしても、サイドバーを作成するにはWordPressプラグインまたはカスタムコードが必要です。簡単な方法はSeedProdで、コードなしで実現できます。
SeedProdは、最高のドラッグアンドドロップWordPressウェブサイトビルダーです。これを使用して、コードなしでカスタムWordPressテーマとページレイアウトを作成できます。
SeedProdは個々のテンプレートを使用して、テーマのすべての部分を作成します。それらのテンプレートの1つがサイドバーであり、数回クリックするだけでサイトにカスタムサイドバーを追加できます。
さらに良いことに、SeedProdで好きなだけサイドバーを作成し、ウェブサイトの特定のページや投稿に表示できます。
したがって、SeedProdを使用してWordPressにサイドバーを追加するには、以下の手順に従ってください。
ステップ1. SeedProdウェブサイトビルダーをインストールする
最初のステップは、SeedProd Website Builderプラグインをインストールすることです。
注意: テーマビルダー機能を使用するには、SeedProd ProまたはEliteライセンスが必要です。
この手順にヘルプが必要な場合は、WordPressプラグインのインストールに関するこのガイドに従ってください。
プラグインの.zipファイルをインストールしてアクティブ化した後、SeedProd ≫ 設定 ページに移動し、ライセンスキーの詳細を入力します。ライセンスキーは、SeedProdウェブサイトのアカウントダッシュボードで見つけることができます。
ステップ2. WordPressテーマテンプレートを作成する
SeedProdでカスタムサイドバーを作成するには、まずテーマのさまざまな部分を作成する必要があります。これは言うよりも早く完了し、テンプレートファイルを直接編集する必要はありません。
まず、SeedProd » Theme Builder ページに移動します。このページには、現在の SeedProd テーマのテンプレートのリストが表示されます。
最初に開くと、グローバルCSSテンプレートしか表示されません。
開始するには、2 つのオプションがあります。
- 既製の SeedProd テーマを最初のステップとして使用する
- テーマテンプレートをゼロから手動で作成する
既製のテーマテンプレートから始めることをお勧めします。SeedProdはすべてのファイルを生成するため、空白のページではなく、動作するテーマから開始できます。
テーマテンプレートを選択するには、Themes ボタンをクリックし、利用可能なテーマのいずれかを選択します。さまざまなウェブサイトに対応するさまざまなテーマがあるため、ニーズに最も合ったものを選択してください。
テーマを選択すると、SeedProdがすべてのテンプレートをビルドします。次に、ドラッグアンドドロップエディターでそれぞれを編集できます。
ステップ3. WordPressサイドバーをカスタマイズする
SeedProd でサイドバーをカスタマイズするには、Sidebar テンプレートを見つけて、Edit Design リンクをクリックします。
これにより、SeedProd のドラッグアンドドロップビルダーでサイドバーが起動します。右側の列にサイドバーテンプレートのライブプレビューが表示され、左側の列に編集パネルが表示されます。
サイドバーの項目を変更するのは、ポイントしてクリックするのと同じくらい簡単です。たとえば、ゴミ箱アイコンをクリックしてブロックを削除できます。
または、任意のブロックをクリックして、左側のパネルでその設定を表示することもできます。
SeedProdのブロックを使用して、ほぼすべてのものを追加できます。ブロックを左側からドラッグして、サイドバーの所定の位置にドロップします。
選択できるブロックの一部を次に示します。
- テンプレートタグ – WordPress からブログ投稿、コメント、アイキャッチ画像などの動的なコンテンツを追加できるブロック。これは動的なサイドバーを作成するのに最適な方法です。
- 標準ブロック – 画像、ボタン、テキスト、ビデオなど、ほとんどのウェブサイトで使用される一般的なウェブデザイン要素です。
- 高度なブロック – 連絡先フォーム、ソーシャルプロフィール、共有ボタン、オプトインフォーム、Google マップなどの高度なリード獲得機能。
- WooCommerce – オンラインストアを運営している場合は、WooCommerce ブロックを使用して、人気の商品、ショッピングカート、その他のストア機能をサイドバーに表示できます。
サイドバーにコンテンツを追加するだけでなく、SeedProd を使用すると、色、フォント、間隔、境界線などをカスタマイズすることもできます。
たとえば、セクションの設定アイコンをクリックすると、背景色を変更したり、背景画像を追加したり、幅を変更したりするオプションが表示されます。さらに、高度なタブには、境界線、間隔などを制御するための設定があります。
サイドバーのデザインに満足したら、画面右上にある緑色の保存 ボタンをクリックします。
次に、テーマ内の他のテンプレートについてもこのプロセスを繰り返します。以下が含まれます：
各部分で繰り返すと、サイトに合ったカスタムWordPressテーマを作成できます。
ステップ4. WordPressでカスタムサイドバーを公開する
カスタムWordPressサイドバーのデザインに満足したら、最後のステップはWordPressサイトでそれを有効にすることです。
SeedProdでは、スイッチを1つ切り替えるだけで公開できます。
SeedProd » Theme Builderページに移動し、「Enable SeedProd Theme」オプションの横にあるスイッチを「Yes」に切り替えます。
SeedProdは、既存のデザインを新しいWordPressテーマとサイドバーに置き換えます。
これでサイトにアクセスして、カスタムサイドバーが配置されていることを確認してください。
ページごとに異なるサイドバーを表示する方法
1つのサイドバーがすべてのページに適合することはめったにありません。ブログ記事に役立つリンクは、連絡先ページや販売ページでは場違いに感じられることがあります。
ページごとに異なるサイドバーを表示することで、これを解決できます。記事の横に最新の記事を表示したり、サービスページに予約ボタンを表示したり、ランディングページには何も表示しないようにしたりできます。
また、訪問者を移動させ続けます。インタラクティブでターゲットを絞ったデザインは、ユーザー維持率を最大60%向上させることができるため、ページに合ったサイドバーはそのスペースに見合う価値があります。
SeedProdを使用すると、好きなだけサイドバーを作成し、それぞれを特定のテンプレートに割り当てることができます。ここに最も簡単な方法を示します。
まず視聴したいですか？ここでは、再利用可能なグローバルパーツをカバーするテーマビルダーチュートリアルの部分を紹介します。
ステップ1.既存のサイドバーを複製する
2番目のサイドバーをゼロから作成するのではなく、既存のサイドバーを複製します。これにより、サイト全体でフォント、スペーシング、スタイリングの一貫性が保たれます。
SeedProd » Theme Builderで、Sidebarテンプレートパーツにカーソルを合わせ、Duplicateをクリックします。
テーマパーツのリストにコピーが表示されます。重複したものをクリックしてEdit Designをクリックすると、ビジュアルビルダーで開きます。
ステップ2.複製をページ用にカスタマイズする
次に、表示される場所に合うようにコンテンツを変更します。ブロックを削除するには、ブロックにカーソルを合わせてゴミ箱アイコンをクリックします。
次に、必要なブロックをドラッグします。アーカイブサイドバーの場合、オプトインフォームを最新の記事ブロックといくつかの証言に置き換えます。
レイアウトが適切になったら保存をクリックします。元のサイドバーから開始したため、ブランドに適合したままになります。
ステップ3.サイドバーを特定のテンプレートに割り当てる
次に、どのページに新しいサイドバーを使用するかを決定します。SeedProdテーマには通常、ブログ投稿用のシングル投稿テンプレートと、カテゴリおよび検索ページ用のアーカイブ、検索結果テンプレートが含まれています。
この例では、アーカイブページに新しいサイドバーを使用したいと思います。アーカイブ、検索結果テンプレートを見つけて、デザインを編集をクリックします。
エディター内で、オレンジ色のツールバーが表示されるまでサイドバー領域にカーソルを合わせ、クリックして選択します。左側のパネルには編集中のテンプレートパーツと表示されます。
テンプレートパーツドロップダウンを開き、作成したばかりのサイドバーを選択します。
レイアウトはすぐに更新されます。保存をクリックすると、アーカイブページにブログ投稿とは異なるサイドバーが表示されるようになります。
ページや特定のWooCommerceレイアウトなど、他のテンプレートについてもこれらの手順を繰り返します。それぞれに独自のサイドバーを持たせることができます。
ページビルダーなしで異なるサイドバーを表示する方法
テーマによっては、ビルダーの使用を避けたい場合、これにページビルダーは必要ありません。ビルダーなしのルートは2つあり、テーマによって異なります。
クラシックテーマでは、組み込みのカスタマイザーで投稿、ページ、アーカイブごとに個別のサイドバーレイアウトを設定できることがよくあります。これは、以下のカスタマイザー方法で説明します。
ブロックテーマでは、サイトエディターでテンプレートごとにサイドバーコンテンツを割り当てます。これは、さらに下にあるブロックテーマの方法で説明します。
ビルダーなしのクラシックテーマでページごとに制御したい場合は、Custom Sidebars, Dynamic Widget Area Managerのような無料プラグインで追加のウィジェットエリアを作成し、特定の投稿、ページ、またはカテゴリに割り当てることができます。
ほとんどのテーマで機能し、コードは不要です。ただし、SeedProdが提供する完全な視覚的制御なしで、ウィジェットベースのレイアウトに限定されるというトレードオフがあります。
WordPressカスタム機能を使用してサイドバーを追加する方法
WordPressの組み込みカスタム機能を使用すると、WordPressサイトにカスタムサイドバーを簡単に追加できます。カスタム機能は、デフォルトのWordPressテーマ設定を使用して、サイドバーのレイアウト、コンテンツ、配置を制御します。
この方法を使用するには、サイドバーウィジェット領域が含まれているWordPressテーマが必要です。まだテーマをお持ちでない場合は、中小企業向けの最も人気のあるWordPressテーマはこちらです。
このガイドでは、Astra WordPress Themeを使用します。
ステップ1：WordPressサイドバーレイアウトを追加する
テーマをインストールしたら、外観 ≫ テーマに移動し、青いカスタマイズボタンをクリックします。
これによりWordPressカスタマイザーページに移動し、テーマのレイアウトとデザインを編集できます。設定はテーマによって異なりますが、ここではAstraを使用して仕組みを示します。
カスタムizer内の左側のパネルを見て、「サイドバー」という見出しを探します。その見出しをクリックして、サイドバーのカスタマイズオプションを開きます。
次の画面で、次のサイドバーオプションから選択できます。
- デフォルトレイアウト – サイドバーなし、右サイドバー、または左サイドバー。
- ページ – シングルページでサイドバーを表示する場所。
- 投稿 – シングル投稿でサイドバーを表示する場所。
- アーカイブ – ブログページのようなアーカイブページでサイドバーがどのように表示されるか。
同じページでサイドバーの幅を選択することもできます。サイドバーのレイアウトに満足したら、公開ボタンをクリックします。
ステップ2.カスタムizerでサイドバーにウィジェットを追加する
サイドバーレイアウトを選択したら、ウィジェットを追加できます。これを行うには、WordPressカスタムizerメニューの「ウィジェット」という見出しを見つけてクリックし、設定を開きます。
次の画面には、その特定のページで現在利用可能なサイドバーのリストが表示されるので、カスタマイズしたいサイドバーをクリックします。
これで、選択したウィジェットを表示する準備ができたサイドバービルダーが表示されます。プラス（+）アイコンをクリックして、サイドバーに表示したいブロックまたはウィジェットを検索します。
ブロックをクリックすると、自動的にサイドバーに追加されます。
サイドバーが希望どおりの外観になるまでウィジェットを追加し続けます。次に、公開ボタンをクリックして変更を保存します。
これで、ページにアクセスすると、カスタムWordPressサイドバーが表示されます。
WordPressサイドバーにウィジェットを追加するにはどうすればよいですか？
次の方法は、WordPressウィジェット画面を使用してWordPressにサイドバーを追加します。前の方法と似ていますが、サイドバーの配置を変更するのではなく、サイドバーにウィジェットを追加することのみが可能です。
この方法を使用するには、WordPressダッシュボードから外観 ≫ ウィジェットに移動します。この画面では、テーマが現在サポートしているすべてのサイドバーを確認できます。
私の場合は、テーマに4つのサイドバー領域が含まれています。
- メインサイドバー
- ヘッダー
- フッターバーセクション1
- フッターバーセクション2
ウィジェットの追加は、前の手順と同様に行います。プラスアイコンをクリックして、目的のウィジェットを検索します。
サイドバーの作成が完了したら、更新ボタンをクリックします。これでサイトにアクセスして、新しいサイドバーを確認できます。
WordPressブロックテーマにサイドバーを追加するにはどうすればよいですか？
Twenty Twenty-Fiveのようなブロックテーマでは、従来のサイドバーウィジェット領域は使用しません。代わりに、サイトエディターを使用して、ページテンプレート内に直接サイドバー効果を作成します。
私もこの混乱に遭遇したことがあります。ブロックテーマに切り替えると、カスタムizerはサイドバーの配置を制御しなくなり、多くの人が混乱します。
ブロックテーマでサイドバーを追加するには、WordPressダッシュボードで外観 → エディターに移動します。テンプレートをクリックし、編集したいテンプレート（例：シングル投稿またはページ）を選択します。
テンプレートエディター内で、+ボタンをクリックし、カラムを検索します。2カラムレイアウトを挿入し、サイドバーカラムがコンテンツカラムより狭くなるようにサイズを変更します。
幅の広いカラムに投稿コンテンツブロックを使用して、メインのページコンテンツを追加します。狭いカラムに、最近の投稿、検索、またはカスタムHTMLブロックなどのサイドバーコンテンツを追加します。
レイアウトに満足したら、保存をクリックします。これで、そのテンプレートを使用するすべてのページにサイドバーが表示されます。
これはブロックテーマにのみ適用されることに注意してください。クラシックテーマを使用している場合は、上記のメソッド1、2、または3が適切です。
WordPressにサイドバーを追加することに関するFAQ
WordPressで左右のサイドバーを追加するにはどうすればよいですか？
右サイドバーの場合、外観 → カスタマイズに移動し、テーマのレイアウトまたはサイドバー設定を見つけます。レイアウトオプションから右サイドバーまたは左サイドバーを選択します。SeedProdを使用すると、ドラッグアンドドロップエディターで直接カラムの配置を設定できます。ブロックテーマの場合は、サイトエディターのカラムブロックを使用して、サイドバーコンテンツを任意のカラムに配置します。
WordPressのサイドバーとは何ですか？
WordPressのサイドバーは、通常、ページの左側または右側にある、メインコンテンツの隣に配置される縦長のウィジェットエリアです。ナビゲーションメニュー、最近の投稿、メール登録フォーム、または広告などを配置できます。ほとんどのクラシックWordPressテーマには、デフォルトでサイドバーが含まれています。ブロックテーマには、サイトエディターを通じて追加しない限り、サイドバーは含まれていません。
WordPressのサイドバーを編集するにはどうすればよいですか？
クラシックテーマの場合は、外観 → ウィジェットに移動し、サイドバーエリアにブロックを追加または並べ替えます。カスタマイザーでは、代わりに外観 → カスタマイズ → ウィジェットに移動します。SeedProdを使用する場合は、テーマビルダーを開き、サイドバーテンプレートを見つけて、デザインの編集をクリックしてビジュアルエディターで更新します。変更は保存して公開すると反映されます。
WordPressテーマにサイドバーがない場合はどうすればよいですか？
クラシックテーマにサイドバーが含まれていない場合は、ウィジェットエリアをサポートするテーマに切り替えるか、SeedProdのテーマビルダーを使用して作成します。ブロックテーマの場合、カスタマイザーのサイドバー設定は表示されません。ブロックテーマはサイトエディターを使用するためです。外観 → エディターに移動し、テンプレートを開いて、カラムブロックを追加してサイドバーレイアウトを作成します。
WordPressでページごとに異なるサイドバーを表示できますか？
はい。多くのクラシックテーマでは、カスタマイザーを通じて、投稿、ページ、アーカイブなどの特定のページタイプに異なるサイドバーエリアを割り当てることができます。SeedProdを使用すると、無制限のサイドバーを作成し、それぞれを特定のテンプレートまたはページに割り当てることができます。これにより、投稿にはブログサイドバーを、サービスページやランディングページには別のサイドバーを表示することが容易になります。
SeedProdで異なるサイドバーを管理するにはどうすればよいですか？
すべてのサイドバーは、SeedProd » Theme Builderの下にあるテンプレートパーツとして保存されます。そこでサイドバーパーツを複製または追加し、次に任意のテンプレートを開いて、そのサイドバー領域を選択し、テンプレートパーツドロップダウンから表示するサイドバーを選択します。
WooCommerceページにカスタムサイドバーを追加できますか？
はい。SeedProdはWooCommerceをサポートしているため、商品ページ、ショップアーカイブ、カート、チェックアウトにカスタムサイドバーを割り当てることができます。サイドバーをテンプレートパーツとして構築し、関連するWooCommerceテンプレートに設定します。
ページからサイドバーを完全に削除できますか？
はい。そのページレイアウトからサイドバーブロックまたはテンプレートパーツを削除するだけで、コンテンツが全幅に表示されます。これは、サイドバーが単に気を散らすだけのランディングページやお問い合わせページでよく選択されます。
サイドバーの制御を適切に行うことで、すべてのページがより効果的に機能します。メインのレイアウトを変更せずに、読者を最高のコンテンツに誘導し、エンゲージメントを維持できます。
最もデザインの柔軟性を高めるために、SeedProd のテーマビルダーを使用すると、無制限のカスタムサイドバーを作成し、任意のページまたは投稿に割り当てることができます。コードは不要です。
リストを増やすための最高のリードマグネットの例に関するこの記事も役立つかもしれません。また、レイアウト全体を改善している場合は、WordPressでブログレイアウトを変更する方法に関するガイドを参照してください。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
