シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

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

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

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

WordPressでサイドバーを追加する方法を知りたいですか?

サイドバーは、読者がWordPressサイトをナビゲートしたり、ニュースレターに登録したり、ソーシャルメディアのプロフィールをフォローしたりするのに役立つ貴重なスペースです。しかし、コンテンツのニーズに合わせたサイドバーを作成するにはどうすればよいのでしょうか?

この記事では、3つの異なる方法を使ってWordPressにサイドバーを追加する方法を紹介します。

WordPressのサイドバーとは?

WordPressのサイドバーは、メインのコンテンツエリアの左側または右側にある縦長のスペースです。ウィジェット化された領域で、主要なコンテンツ領域の外側にコンテンツを表示することができます。

各ページで主要なコンテンツエリアが変わっても、サイドバーはウェブサイト全体でほとんど変わりません(複数のサイドバーを作成しない限り)。

WordPressのテーマは、デフォルトでサイドバーの見え方をコントロールします。そのため、そのまま使用すると、テーマがサイドバーの配置、一度に使用できるサイドバーの数、そもそもサイドバーがあるかどうかをコントロールします。

デフォルトのサイドバーには、あなたのビジネスニーズに合わないウィジェットが付属している可能性もあります。デフォルトのサイドバーが要件を満たさない場合、新しいカスタムサイドバーを作成する必要があるかもしれません。

WordPressのサイドバーは何に使える?

WordPressのウィジェットを使って、サイドバーにほとんどのコンテンツを追加することができます。以下はその例です:

  • ナビゲーション-ナビゲーションメニューウィジェットを使って、ユーザーが関連するページを見つけやすくしたり、ブログの記事をカテゴリー別にフィルタリングするメニューを作ることができます。
  • 検索- サイドバーに検索ボックスを追加することは、ユーザーが探しているものを素早く見つけるための優れた方法です。
  • Eメール購読- サイドバーにオプトインのEメールフォームを追加して、Eメールアドレスを収集し、リストを増やすことができます。
  • 注目のコンテンツ- サイドバーは、ユーザーにとって他の記事よりも価値のある記事を紹介するのに最適な場所です。
  • ソーシャルメディア- フォロワーを増やし、ブランド認知度を高めるために、ソーシャルフォローボタンやソーシャルメディア共有ウィジェットを簡単に追加できます。
  • 広告- サイドバーは、収益を上げるために広告を表示するのに最適な場所です。
  • 行動喚起(CTA)- 新しいオンラインコース、製品、オファーがある場合、サイドバーにCTAを追加して読者にチェックを促すことができます。

ここまでで、サイドバーが何であるか、そしてそれがウェブサイト訪問者に価値あるコンテンツを表示する簡単な方法であることはお分かりいただけたと思います。それでは、WordPressでサイドバーを追加する方法を見ていきましょう。

以下では、WordPressのカスタマイザー、WordPressのウィジェット画面、ウェブサイト・ビルダーのプラグインを使った3種類の方法を紹介する。さらに、どの方法もコードを使う必要はありません。

SeedProdでWordPressにカスタムサイドバーを追加する方法

WordPressサイトでカスタムサイドバーを作成したり、複数のサイドバーを同時に使用したいですか?

そのためには、WordPressのプラグインか、コードを使ってゼロから新しいサイドバーを作成する知識が必要です。幸運なことに、パワフルで軽量なプラグインを使えば、WordPressのカスタムサイドバーを簡単に作成することができます:SeedProdです。

SeedProd WordPressウェブサイトビルダー

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つの選択肢がある。

  1. 既製のSeedProdテーマのいずれかを出発点として使用します。
  2. テーマテンプレートをゼロから手動で作成

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

テーマテンプレートを追加する

テーマテンプレートを選択するには、テーマボタンをクリックし、利用可能なテーマのいずれかを選択します。ウェブサイトによってテーマが異なりますので、ニーズに合ったものをお選びください。

seedprodテーマのテンプレートを選択する

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

Seedprodテーマのテンプレート

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

SeedProdでサイドバーをカスタマイズするには、サイドバーテンプレートを見つけ、デザイン編集リンクをクリックしてください。

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

そうすると、SeedProdのドラッグ&ドロップビルダーでサイドバーが起動します。右カラムにサイドバーテンプレートのライブプレビューが表示され、左カラムに編集パネルが表示されます。

SeedProdドラッグ・アンド・ドロップ式サイドバー・エディター

サイドバーの項目を変更するには、指をさしてクリックするだけです。例えば、ゴミ箱のアイコンをクリックしてブロックを削除することができます。

ゴミ箱アイコンをクリックすると、コンテンツを削除できます。

また、任意のブロックをクリックすると、左のパネルでそのブロックの設定を見ることができます。

カスタム・ブロック設定 seedprod

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

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

選べるブロックには以下のようなものがある:

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

サイドバーにコンテンツを追加するだけでなく、SeedProdではサイドバーの色、フォント、間隔、ボーダーなどをカスタマイズすることができます。

例えば、セクションの設定アイコンをクリックすると、背景色の変更、背景画像のアップロード、幅の変更などのオプションが表示されます。さらに、「詳細設定」タブでは、ボーダーやスペーシングなどをコントロールすることができます。

サイドバーの背景色をカスタマイズする

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

テーマの他のテンプレートについても、このプロセスを繰り返す:

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

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

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

SeedProdでは、簡単なスイッチでWordPressのカスタムサイドバーを適用することができます。

SeedProd " Theme Builderページに行き、'Enable SeedProd Theme'オプションの横のスイッチを'Yes'に切り替えるだけです。

seedprodテーマを有効にする

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

これで、あなたのウェブサイトを訪問して、カスタムWordPressサイドバーが動いているのを見ることができます。

ワードプレスにサイドバーを追加する方法

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

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

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

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

または、以下の指示に従ってください。

まず、SeedProd " Theme Builderページに行き、Add New Theme Templateボタンをクリックします。

新しいテーマテンプレートを追加する

そこで、グローバル・パート・オプションを選択し、「保存」をクリックする。

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

これで、前のステップと同じようにカスタムサイドバーを構築することができます。

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

単一ページのテンプレートを編集する

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

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

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

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

そこから、ドロップダウンメニューから新しく作ったサイドバーを選ぶことができます。

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

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

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

カスタマイザーでWordPressにサイドバーを追加する方法

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

この方法を使うには、サイドバー・ウィジェット・エリアを含むWordPressテーマが必要です。まだテーマを持っていない場合は、中小企業向けの最も人気のあるWordPressテーマをご覧ください。

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

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

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

カスタマイズボタンをクリック

WordPressのカスタマイザーページが表示され、テーマのレイアウトやデザインを編集することができます。このページに表示される設定はテーマによって異なりますが、Astraテーマを使ってサイドバーを追加する方法を紹介しますので、何をすればいいのか見当がつくと思います。

カスタマイザー内の左側のパネルを見て、「サイドバー」の見出しを見つけてください。その見出しをクリックすると、サイドバーのカスタマイズオプションが開きます。

テーマカスタマイザーでサイドバーの見出しをクリックします。

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

  • デフォルトレイアウト- サイドバーなし、右サイドバー、左サイドバー。
  • Pages- 単一ページでサイドバーを表示する場所。
  • Posts- 単一の投稿にサイドバーを表示する場所。
  • アーカイブ-ブログページのようなアーカイブページでサイドバーをどのように表示するか。
カスタマイザー・サイドバー・レイアウト設定

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

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

サイドバー・レイアウトを選んだら、ウィジェットを追加しましょう。そのためには、WordPressのカスタマイザーメニューで「ウィジェット」の見出しを見つけ、クリックして設定を開きます。

WordPressのカスタマイザー・ウィジェット

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

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

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

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

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

お好みの形になるまで、サイドバーにウィジェットを追加し続けてください。そして、「公開」ボタンをクリックして変更を保存します。

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

新しいWordPressサイドバーの例

ウィジェット画面を使ってWordPressにサイドバーを追加する方法

次の方法は、WordPressのウィジェット画面を使ってWordPressにサイドバーを追加する方法です。前の方法と似ていますが、サイドバーの配置を変更できる代わりに、サイドバーにウィジェットを追加できるだけです。

この方法を使うには、WordPressのダッシュボードから「外観」≫「ウィジェット」と進んでください。この画面で、テーマが現在サポートしているすべてのサイドバーを見ることができます。

WordPressのウィジェット画面を開き、サイドバーをカスタマイズする。

私たちのケースでは、テーマにはカスタマイズ可能な4つのサイドバーエリアが含まれています:

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

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

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

サイドバーの作成が完了したら、更新ボタンをクリックしてください。これであなたのサイトにアクセスして、新しいサイドバーを見ることができます。

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

今はここまでだ!

この記事が、WordPressでサイドバーを簡単に追加する方法を学ぶのにお役に立てば幸いです。

サイドバーを完全にコントロールする最も簡単な方法はSeedProdです。ビジュアルでドラッグアンドドロップのビルダーを提供し、コードやテーマファイルを直接編集する必要がなく、WordPressダッシュボードの中からサイドバーをカスタマイズすることができます。

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

お読みいただきありがとうございました!ご質問やご意見がありましたら、お気軽にコメントをお寄せください。

また、YouTubeX(旧Twitter)Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。