最新のSeedProdニュース

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

WordPressにカスタムサイドバーを追加する方法(コーディング不要)

カスタムサイドバーをWordPressに追加する方法(コーディング不要) 

執筆者: 著者アバター ステイシー・コリン
著者アバター Stacey Corrin
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。
    
レビュー担当者: レビュアーアバター ターナー ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同創設者です。彼は20年以上のビジネスおよび開発経験を持ち、彼のプラグインは2500万回以上ダウンロードされています。

要約:WordPressにサイドバーを追加する方法

  1. SeedProdテーマビルダー:ドラッグ&ドロップで完全にカスタムなサイドバーを作成し、任意のページまたは投稿に割り当てることができます。
  2. WordPressカスタムizer:クラシックテーマの設定を使用して、サイドバーのレイアウトを設定し、ウィジェットを追加します。
  3. ウィジェット画面:[外観] → [ウィジェット]に移動して、サイドバー領域に直接ブロックを追加します。
  4. ブロックテーマサイトエディター:[外観] → [エディター]を使用して、サイドバー効果のためにテンプレートにカラムブロックを追加します。

初期の頃のサイトでは、サイドバーがいかに強力であるかを発見するまで、メニューやフォームをレイアウトに収めるのに苦労したことを覚えています。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サイトで複数のサイドバーを同時に使用したいですか?

そのためには、WordPressプラグインが必要になるか、コードで新しいサイドバーをゼロから作成する知識が必要です。幸いなことに、1つの強力で軽量なプラグインであるSeedProdを使用して、WordPress用のカスタムサイドバーを簡単に作成できます。

SeedProd ドラッグ&ドロップ WordPress ウェブサイトビルダー

SeedProdは、最高のドラッグアンドドロップWordPressウェブサイトビルダーです。これを使用して、コードなしでカスタムWordPressテーマとページレイアウトを作成できます。

SeedProdは個々のテンプレートを使用して、テーマのすべての部分を作成します。それらのテンプレートの1つがサイドバーであり、数回クリックするだけでサイトにカスタムサイドバーを追加できます。

さらに良いことに、SeedProdで好きなだけサイドバーを作成し、ウェブサイトの特定のページや投稿に表示できます。

したがって、SeedProdを使用してWordPressにサイドバーを追加するには、以下の手順に従ってください。

ステップ1. SeedProdウェブサイトビルダーをインストールする

最初のステップは、SeedProd Website Builderプラグインをインストールすることです。

注意:テーマビルダー機能を使用するには、SeedProd ProまたはEliteライセンスが必要です。

この手順にヘルプが必要な場合は、WordPressプラグインのインストールに関するこのガイドに従ってください。

プラグインの.zipファイルをインストールしてアクティブ化した後、SeedProd ≫ 設定 ページに移動し、ライセンスキーの詳細を入力します。ライセンスキーは、SeedProdウェブサイトのアカウントダッシュボードで見つけることができます。

WordPress 設定に SeedProd ライセンスキーを入力する

ステップ2. WordPressテーマテンプレートを作成する

SeedProd でカスタムサイドバーを作成するには、まずテーマのさまざまな部分を作成する必要があります。心配いりません。これは非常に簡単で、テンプレートファイルを直接編集する必要はありません。

まず、SeedProd » Theme Builder ページに移動します。このページには、現在の SeedProd テーマのテンプレートのリストが表示されます。

まだ開始していないため、グローバル CSS テンプレートしかありません。

開始するには、2 つのオプションがあります。

  1. 既製の SeedProd テーマを最初のステップとして使用する
  2. テーマテンプレートをゼロから手動で作成する

既製のテーマテンプレートから始めることをお勧めします。これにより、SeedProd がすべてのテンプレートファイルを自動的に生成できるため、要件に合わせてテンプレートを編集するのに役立ちます。

SeedProd テーマビルダーでカスタム WordPress テーマテンプレートを追加する

テーマテンプレートを選択するには、Themes ボタンをクリックし、利用可能なテーマのいずれかを選択します。さまざまなウェブサイトに対応するさまざまなテーマがあるため、ニーズに最も合ったものを選択してください。

WordPress サイドバーを作成するための SeedProd テーマテンプレートを選択する

テーマを選択すると、SeedProd がすべてのテーマテンプレートを自動的に作成します。その結果、ビジュアルドラッグアンドドロップエディターで各テンプレートを個別に編集できるようになります。

WordPress カスタムサイドバー用の SeedProd テーマテンプレートパーツ

ステップ3. WordPressサイドバーをカスタマイズする

SeedProd でサイドバーをカスタマイズするには、Sidebar テンプレートを見つけて、Edit Design リンクをクリックします。

SeedProd サイドバーテンプレートを使用して WordPress にサイドバーを追加する方法

これにより、SeedProd のドラッグアンドドロップビルダーでサイドバーが起動します。右側の列にサイドバーテンプレートのライブプレビューが表示され、左側の列に編集パネルが表示されます。

SeedProd ドラッグ&ドロップサイドバーエディター

サイドバーの項目を変更するのは、ポイントしてクリックするのと同じくらい簡単です。たとえば、ゴミ箱アイコンをクリックしてブロックを削除できます。

ゴミ箱アイコンをクリックしてコンテンツを削除できます

または、任意のブロックをクリックして、左側のパネルでその設定を表示することもできます。

WordPress サイドバーエディターの SeedProd カスタムブロック設定パネル

SeedProd のテーマブロックを使用して、サイドバーにさまざまなコンテンツを追加できます。左側からブロックをドラッグして、サイドバーの所定の位置にドロップするだけです。

WordPress サイドバーにコンテンツをドラッグ&ドロップする

選択できるブロックの一部を次に示します。

  • テンプレートタグ – WordPress からブログ投稿、コメント、アイキャッチ画像などの動的なコンテンツを追加できるブロック。これは動的なサイドバーを作成するのに最適な方法です。
  • 標準ブロック – 画像、ボタン、テキスト、ビデオなど、ほとんどのウェブサイトで使用される一般的なウェブデザイン要素です。
  • 高度なブロックお問い合わせフォーム、ソーシャルプロファイル、共有ボタン、オプトインフォーム、Google マップなどの高度なリード獲得機能。
  • WooCommerce – オンラインストアを運営している場合は、WooCommerce ブロックを使用して、人気の商品、ショッピングカート、その他のストア機能をサイドバーに表示できます。

サイドバーにコンテンツを追加するだけでなく、SeedProd を使用すると、色、フォント、間隔、境界線などをカスタマイズすることもできます。

たとえば、セクションの設定アイコンをクリックすると、背景色を変更したり、背景画像を追加したり、幅を変更したりするオプションが表示されます。さらに、高度なタブには、境界線、間隔などを制御するための設定があります。

SeedProd のドラッグ&ドロップ WordPress ビルダーでサイドバーの背景色をカスタマイズする

サイドバーのデザインに満足したら、画面右上にある緑色の保存 ボタンをクリックします。

次に、テーマ内の他のテンプレートについてもこのプロセスを繰り返します。以下が含まれます:

その結果、すべてのビジネスニーズに合ったカスタムWordPressテーマを作成できます。

ステップ4. WordPressでカスタムサイドバーを公開する

カスタムWordPressサイドバーのデザインに満足したら、最後のステップはWordPressサイトでそれを有効にすることです。

SeedProdでは、簡単な切り替えでカスタムWordPressサイドバーを適用できます。

単にSeedProd » テーマビルダーページに移動し、「SeedProdテーマを有効にする」オプションの隣にあるスイッチを「はい」に切り替えます。

SeedProd テーマを有効にしてカスタム WordPress サイドバーを公開する

SeedProdは、既存のデザインを新しいWordPressテーマとサイドバーに置き換えます。

これで、ウェブサイトにアクセスして、カスタムWordPressサイドバーが機能していることを確認できます。

WordPress にサイドバーを追加する方法

SeedProdでWordPressに複数のサイドバーを追加する方法

カスタムサイドバーができたので、いつでもデザインを編集できます。しかし、複数のサイドバーが必要で、ウェブサイトの異なるセクションに表示したい場合はどうでしょうか?

たとえば、ブログサイドバーとは異なるページ用のサイドバーを作成したい場合があります。これは、SeedProdのグローバルテンプレートパーツを使用することで実現できます。

ここでは、グローバルパーツがどのように機能するかを示すテーマビルダーチュートリアルのパート13を紹介します。

または、以下の書き込み手順に従うこともできます。

まず、SeedProd » テーマビルダーページに移動し、新しいテーマテンプレートを追加ボタンをクリックします。

2番目のWordPressサイドバーに新しいSeedProdグローバルパーツテンプレートを追加する

そこから、グローバルパーツオプションを選択し、保存をクリックします。

新しいグローバルパーツテーマテンプレート

これで、前のステップで行ったようにカスタムサイドバーを構築できます。

新しいサイドバーを作成した後、SeedProdのドラッグアンドドロップエディターでシングルページテンプレートを開きます。

シングルページテンプレートを編集する

サイドバーのスペースを確保するには、既存のレイアウトを2列のセクションに置き換える必要があります。

シングルページに2列セクションを追加する

次に、新しいセクションの2列目にテンプレートパーツブロックをドラッグします。

新しいテンプレートパーツブロックを追加する

そこから、ドロップダウンメニューで作成した新しいサイドバーを選択できます。

カスタムWordPressサイドバーを選択する

保存をクリックして変更を保存します。次にページに移動すると、新しいカスタムサイドバーが自動的に表示され、ブログ投稿には最初のサイドバーが表示されます。

WordPressページ用のカスタムサイドバー

WordPressカスタム機能を使用してサイドバーを追加する方法

WordPressの組み込みカスタム機能を使用すると、WordPressサイトにカスタムサイドバーを簡単に追加できます。カスタム機能は、デフォルトのWordPressテーマ設定を使用して、サイドバーのレイアウト、コンテンツ、配置を制御します。

この方法を使用するには、サイドバーウィジェット領域が含まれているWordPressテーマが必要です。まだテーマをお持ちでない場合は、中小企業向けの最も人気のあるWordPressテーマはこちらです。

このガイドでは、Astra WordPressテーマを使用します。

ステップ1:WordPressサイドバーレイアウトを追加する

テーマをインストールしたら、外観 ≫ テーマに移動し、青いカスタマイズボタンをクリックします。

サイドバーレイアウトを追加するためにWordPressカスタムizerを開く

これにより、WordPressカスタムizerページに移動し、テーマのレイアウトとデザインを編集できます。このページに表示される設定はテーマによって異なりますが、Astraテーマを使用してサイドバーを追加する方法を示すので、何をすべきかのアイデアが得られます。

カスタムizer内の左側のパネルを見て、「サイドバー」という見出しを探します。その見出しをクリックして、サイドバーのカスタマイズオプションを開きます。

テーマカスタムizerでサイドバーの見出しをクリックする

次の画面で、次のサイドバーオプションから選択できます。

  • デフォルトレイアウト – サイドバーなし、右サイドバー、または左サイドバー。
  • ページ – シングルページでサイドバーを表示する場所。
  • 投稿 – シングル投稿でサイドバーを表示する場所。
  • アーカイブブログページのようなアーカイブページでサイドバーがどのように表示されるか。
カスタムizerのサイドバーレイアウト設定

同じページでサイドバーの幅を選択することもできます。サイドバーのレイアウトに満足したら、公開ボタンをクリックします。

ステップ2.カスタムizerでサイドバーにウィジェットを追加する

サイドバーレイアウトを選択したら、ウィジェットを追加できます。これを行うには、WordPressカスタムizerメニューの「ウィジェット」という見出しを見つけてクリックし、設定を開きます。

WordPressカスタムizerウィジェット

次の画面には、その特定のページで現在利用可能なサイドバーのリストが表示されるので、カスタマイズしたいサイドバーをクリックします。

テーマカスタムizerでサイドバーを選択する

これで、選択したウィジェットを表示する準備ができたサイドバービルダーが表示されます。プラス(+)アイコンをクリックして、サイドバーに表示したいブロックまたはウィジェットを検索します。

サイドバーにウィジェットを追加するにはプラスアイコンをクリックする

ブロックをクリックすると、自動的にサイドバーに追加されます。

サイドバーが希望どおりの外観になるまでウィジェットを追加し続けます。次に、公開ボタンをクリックして変更を保存します。

これで、ページにアクセスすると、カスタムWordPressサイドバーが表示されます。

カスタムizerを使用してフロントエンドに表示される完成したWordPressサイドバー

WordPressサイドバーにウィジェットを追加するにはどうすればよいですか?

次の方法は、WordPressウィジェット画面を使用してWordPressにサイドバーを追加します。前の方法と似ていますが、サイドバーの配置を変更するのではなく、サイドバーにウィジェットを追加することのみが可能です。

この方法を使用するには、WordPressダッシュボードから外観 ≫ ウィジェットに移動します。この画面では、テーマが現在サポートしているすべてのサイドバーを確認できます。

サイドバーをカスタマイズするためにWordPressウィジェット画面を開く

この例では、テーマには4つのカスタマイズ可能なサイドバー領域が含まれています。

  1. メインサイドバー
  2. ヘッダー
  3. フッターバーセクション1
  4. フッターバーセクション2

サイドバーにウィジェットを追加することは、前の手順と同様です。プラスアイコンをクリックして、サイドバーに追加したいウィジェットを検索するだけです。

WordPressのサイドバーにブロックとウィジェットを追加する

サイドバーの作成が完了したら、更新ボタンをクリックします。これでサイトにアクセスして、新しいサイドバーを確認できます。

WordPressのサイドバーをウェブサイトでライブ表示する

WordPressブロックテーマにサイドバーを追加するにはどうすればよいですか?

Twenty Twenty-Fiveのようなブロックテーマでは、従来のサイドバーウィジェット領域は使用しません。代わりに、サイトエディターを使用して、ページテンプレート内に直接サイドバー効果を作成します。

私もこの混乱に遭遇したことがあります。ブロックテーマに切り替えると、カスタムizerはサイドバーの配置を制御しなくなり、多くの人が混乱します。

ブロックテーマでサイドバーを追加するには、WordPressダッシュボードで外観 → エディターに移動します。テンプレートをクリックし、編集したいテンプレート(例:シングル投稿またはページ)を選択します。

WordPressサイトエディターでシングル投稿テンプレートを選択する

テンプレートエディター内で、+ボタンをクリックし、カラムを検索します。2カラムレイアウトを挿入し、サイドバーカラムがコンテンツカラムより狭くなるようにサイズを変更します。

WordPressサイトエディターでテンプレートにカラムを追加する

幅の広いカラムに投稿コンテンツブロックを使用して、メインのページコンテンツを追加します。狭いカラムに、最近の投稿検索、またはカスタムHTMLブロックなどのサイドバーコンテンツを追加します。

WordPressサイトエディターテンプレートのサイドバーカラムエリアに最近の投稿を追加する

レイアウトに満足したら、保存をクリックします。これで、そのテンプレートを使用するすべてのページにサイドバーが表示されます。

これはブロックテーマにのみ適用されることに注意してください。クラシックテーマを使用している場合は、上記のメソッド1、2、または3が適切です。

WordPressにサイドバーを追加することに関するFAQ

WordPressで左右のサイドバーを追加するにはどうすればよいですか?

右サイドバーの場合、外観 → カスタマイズに移動し、テーマのレイアウトまたはサイドバー設定を見つけます。レイアウトオプションから右サイドバーまたは左サイドバーを選択します。SeedProdを使用すると、ドラッグアンドドロップエディターで直接カラムの配置を設定できます。ブロックテーマの場合は、サイトエディターのカラムブロックを使用して、サイドバーコンテンツを任意のカラムに配置します。

WordPressのサイドバーとは何ですか?

WordPressのサイドバーは、通常、ページの左側または右側にある、メインコンテンツの隣に配置される縦長のウィジェットエリアです。ナビゲーションメニュー、最近の投稿、メール登録フォーム、または広告などを配置できます。ほとんどのクラシックWordPressテーマには、デフォルトでサイドバーが含まれています。ブロックテーマには、サイトエディターを通じて追加しない限り、サイドバーは含まれていません。

WordPressのサイドバーを編集するにはどうすればよいですか?

クラシックテーマの場合は、外観 → ウィジェットに移動し、サイドバーエリアにブロックを追加または並べ替えます。カスタマイザーでは、代わりに外観 → カスタマイズ → ウィジェットに移動します。SeedProdを使用する場合は、テーマビルダーを開き、サイドバーテンプレートを見つけて、デザインの編集をクリックしてビジュアルエディターで更新します。変更は保存して公開すると反映されます。

WordPressテーマにサイドバーがない場合はどうすればよいですか?

クラシックテーマにサイドバーが含まれていない場合は、ウィジェットエリアをサポートするテーマに切り替えるか、SeedProdのテーマビルダーを使用して作成します。ブロックテーマの場合、カスタマイザーのサイドバー設定は表示されません。ブロックテーマはサイトエディターを使用するためです。外観 → エディターに移動し、テンプレートを開いて、カラムブロックを追加してサイドバーレイアウトを作成します。

WordPressでページごとに異なるサイドバーを表示できますか?

はい。多くのクラシックテーマでは、カスタマイザーを通じて、投稿、ページ、アーカイブなどの特定のページタイプに異なるサイドバーエリアを割り当てることができます。SeedProdを使用すると、無制限のサイドバーを作成し、それぞれを特定のテンプレートまたはページに割り当てることができます。これにより、投稿にはブログサイドバーを、サービスページやランディングページには別のサイドバーを表示することが容易になります。

サイドバーの制御を適切に行うことで、すべてのページがより効果的に機能します。メインのレイアウトを変更せずに、読者を最高のコンテンツに誘導し、エンゲージメントを維持できます。

最もデザインの柔軟性を高めるために、SeedProd のテーマビルダーを使用すると、無制限のカスタムサイドバーを作成し、任意のページまたは投稿に割り当てることができます。コードは不要です。

リストを増やすための最高のリードマグネットの例に関するこの記事も気に入るかもしれません。よりカスタマイズされたサイドバーが必要な場合は、WordPress でページごとに異なるサイドバーを追加する方法に関するこの記事をご覧ください。

お読みいただきありがとうございます!皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTubeX および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。

著者アバター
Stacey Corrin コンテンツマーケティングスペシャリスト
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

[weglot_switcher]