WordPressでサイドバーを追加・削除・カスタマイズする方法を完全ガイド

11月11日 19:43更新

043360

WordPressサイドバーとは

WordPressのサイドバーは、通常ページの左側または右側に配置されますが、ページの上部または下部に配置することもできます。サイドバーの主な機能は、追加コンテンツの表示、ナビゲーションの提供、ユーザーエクスペリエンスの向上です。サイドバーには通常、検索ボックス、最近の投稿、クラシファイド、タグクラウド、ソーシャルメディアリンク、広告、カレンダー、カスタムHTMLコードなどの様々なウィジェット（ガジェット）が含まれています。

ウェブサイトのサイドバーの例

1.ウィキペディア

2.エレメンタヘルプセンター

サイドバーの主な機能と用途

ナビゲーションと検索サイドバーには、ナビゲーションメニューや検索ボックスを設置することができ、ユーザーが興味のあるコンテンツを見つけやすくなります。
最新コンテンツ・ショーケースサイドバーに最新の投稿やコメント、人気記事を表示することで、ユーザーのクリックを誘い、ページビューを増やすことができます。
広告とプロモーションサイドバーは、効果的にユーザーの注意を引くことができる広告やプロモーションコンテンツを表示するのに理想的です。
ソーシャルメディアリンクサイドバーにソーシャルメディアのアイコンとリンクを追加することで、ユーザーがソーシャルプラットフォームでコンテンツを共有することを促し、サイトの露出を増やすことができる。
カスタマイズされたコンテンツサイドバーは、カスタムHTMLコード、テキスト、その他のコンテンツを追加して、よりパーソナライズされた機能を提供することができます。

WordPressカスタマイザーからサイドバーを管理する

テーマのサイドバーを管理する主な方法のひとつは、WordPress Customiserを使うことです。あなたのテーマがサイドバーやカスタマイズをサポートしていれば、通常はここに表示されます。

設定の正確な場所はテーマによって異なりますが、通常は「レイアウト設定」、「一般設定」、「サイト全体の設定」などのオプションを探す必要があります。

例えば、OceanWPテーマを使用する場合、一般設定で右サイドバー、左サイドバー、または左右両方のサイドバーなど、異なるサイドバー構成を選択でき、サイドバーの幅も設定できます。

これらの設定が見つからない場合は、WordPressのカスタマイザーでさまざまなエリアを検索してみてください。または、テーマ開発者のサポートドキュメントを確認してください。

個々のコンテンツのサイドバーを管理する

テーマによっては、個々の投稿やページのサイドバーをコントロールできるページレベルの設定もあります。

テーマにこの機能がある場合、WordPressエディタを使用する際にこれらのオプションを見ることができます。エディターの下にあるメタボックス、またはドキュメントサイドバーに表示されます。

例えば、OceanWPテーマを使用している場合、個々のページや投稿で異なるサイドバーレイアウトを選択することができます。

WordPressのサイドバーにウィジェットを追加する方法

サイドバーとは、ウェブサイト上にあるエリアのことである。コンテンツの追加WordPressのウィジェットを使用したい場合は、WordPressのウィジェットを使用する必要があります。

テーマのサイドバーには2つの方法でウィジェットを追加できます：

ワードプレスカスタマイザー
専用ウィジェット・エリア

どちらの方法でも自動的に同期されるので、どちらを使っても問題ない。WordPressカスタマイザーを使用する利点は、ウィジェットの効果をリアルタイムでプレビューできることです。

WordPressカスタマイザーでウィジェットを管理する

WordPressのカスタマイザーでサイドバー・ウィジェットを管理するには、以下の手順に従ってください：

切り替える 外観 → カスタム.

オプション ウィジェット メニューオプション。
管理したいウィジェットエリアを選択するプロンプトが表示されます。テーマによっては、一つのオプションしか表示されないか、サイドバー以外のエリア（フッターなど）を含む複数のオプションが表示されます。

をクリックします。「ウィジェットの追加ボタンをクリックして、サイドバーへのウィジェットの追加を開始する。ウィジェットが追加されたら、サイドバーのオプションを使用して設定します：

新しいウィジェットを追加すると、すぐにサイトのライブプレビューに表示されます。また、ドラッグ＆ドロップで既存のウィジェットの並び順を変更することも可能です。

カスタマイザーを使用するだけでなく、WordPressにはウィジェットを管理するための専用エリアが用意されています。外観」メニューの「ウィジェット」オプションからアクセスできます。

このエリアでは、ウェブサイトに追加できるすべてのウィジェットと、テーマに付属しているサイドバーエリア（およびフッターなどの他のウィジェットエリア）を見ることができます。

あなたのウェブサイトにウィジェットを追加するには、利用可能なウィジェットのリストから、サイドバーやその他の置きたい場所にドラッグ＆ドロップするだけです。その後、ウィジェットの設定ボタンをクリックして、テキストを調整したり、画像を選択したりなど、ウィジェットの内容をカスタマイズすることができます：

Elementorでカスタムウィジェットをデザインする

Elementor Proを使えば、カスタムウィジェットを簡単にデザインしてサイドバーに追加できます。ここではエレメンタの直感的なインターフェイスで、ステップバイステップでカスタムウィジェットを作成・追加できます：

まず、WordPressのバックエンドを開き、Elementorの "Templates "セクションに移動し、"新しいアイテムの追加「をクリックして、新しいセクションテンプレートを作成します。このテンプレートは、Eメール購読フォームや魅力的なコールトゥアクションフレーズ（CTA）など、紹介したいものであれば何でもかまいません。

テンプレートを作成するときは、Elementorのドラッグ＆ドロップインターフェイスを使用して、テキスト、画像、ボタンなどのさまざまな要素を簡単に追加してレイアウトします。テンプレートが完成したら、Publishボタンをクリックしてライブラリに保存してください。

次に、このカスタムウィジェットを表示したいサイドバーエリアに移動します。カスタムウィジェットを表示したいサイドバーエリアに"エレメンタ・ライブラリ"ウィジェット。追加されると、テンプレートのドロップダウンリストが表示されます。このリストから、先ほど作成した特定のテンプレートを選択します。

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

WordPressのウェブサイトにカスタムサイドバーを追加したいが、テーマが組み込みのサイドバーをサポートしていない、またはもっとサイドバーを追加したい場合は、以下の簡単な手順に従ってください：

ステップ1: カスタムサイドバーの登録

まず、サイドバーをWordPressに登録し、"外装状態" → "ウィジェット"ページに追加します。以下の2つの方法でコードを追加できる：

テーマのfunctions.phpファイルを編集する。(テーマファイルを直接編集するのは安全ではないかもしれないので、子テーマを使うのがベストであることに注意）：
- 子テーマを作成する（まだ存在しない場合）。
- 子テーマのfunctions.phpファイルにサイドバーを登録するコードを追加します。
コード・スニペット・プラグインの使用(Code Snippets、Insert Headers and Footersプラグインなど）：
- Code Snippetsプラグインをインストールし、有効化します。
- 新しいコード・スニペットを作成し、サイドバーを登録するコードを追加します。

サイドバーを登録するサンプルコード::

ファンクション my_custom_sidebars() {
    register_sidebar(array(
        
        'id' =&gt; 'custom-sidebar-1'、
        
        'before_widget' =&gt; '<div id="%1$s" class="widget %2$s">',
        'after_widget' =&gt; '.</div>',
        'before_title' =&gt; '.<h2 class="widgettitle">',
        'after_title' =&gt; '.</h2>',
    ));

    // もっとサイドバーが必要な場合は、上のコードをコピーして、'name'、'id'、その他のパラメータを変更してください。
}
add_action( 'widgets_init', 'my_custom_sidebars' )；

ステップ2：フロントエンドにサイドバーを表示する

サイドバーは登録され、フロントエンドのテンプレートファイル（例えば header.phpそしてサイドバー.phpそしてフッター.php または単一ページ・テンプレート・ファイル）を使用して、サイトにサイドバーを表示するために呼び出します。これは通常 ダイナミック・サイドバー() 関数と適切な条件判断

例えば、sidebar.phpファイル：

 次のようにします。
        
    </aside

このコードは、'custom-sidebar-1'というサイドバーにアクティブ・ウィジェットが含まれているかどうかをチェックし、含まれていれば表示します。

以上の手順で、外観 → ウィジェットページに新しいサイドバーが表示され、ウィジェットを追加することができます。

Elementorでサイドバーを作成する方法

Elementorを使用してカスタムサイドバーを表示するには、メインコンテンツエリアと同様にサイドバーを含む新しい投稿またはページテンプレートを作成します。

まずテンプレート → テーマビルダー.次に、サイドバーを最初に追加する場所を選択します。 シングルポストもしかしたらシングルページ::

あらかじめ用意されたテンプレートから1つを選ぶことができます。または、完全にゼロからあなたのデザインを構築します。最も簡単なオプションは、すでにサイドバーが含まれているテンプレートの1つだけを選択することです：

次にサイドバーウィジェットでサイドバーを選択ドロップダウンリストは、前のステップで登録したカスタムサイドバーを選択します。

これが完了すると、追加されたすべてのウィジェットのライブプレビューが表示されます：

タスクを完了し、確実にするためにポストテンプレート。このアクションを実行すると、表示条件を使用して、サイドバー・テンプレートが表示される場所を制御できます。すべてのコンテンツに表示する（サイト全体でサイドバーを使用する）。または、表示ルールを使って、特定のコンテンツだけにサイドバーを追加します。

HTML、CSS、PHPの使用に慣れている場合は、コードでサイドバーを追加することができます。そうでない場合は エレメンタ 方法。

WordPressでコードを使ってカスタムサイドバーを表示するには、テーマのテンプレートファイルを直接編集する必要があります。これはテーマを直接修正することになるので、テーマの更新時に変更が上書きされるのを防ぐために子テーマを使用することが重要です。

子テーマの作成と使用に関する詳細は、WordPress 子テーマの総合ガイドを参照してください。

子テーマを作成したら、親テーマフォルダの シングル.php ファイルを子テーマのフォルダにコピーする。次に、子テーマを シングル.php ファイルを開き、カスタム・サイドバーを表示したい場所に以下のコード・スニペットを追加する：

<?php get_sidebar(); ?>

WordPressでサイドバーを削除する方法

使いたくないサイドバーを削除する方法。例えば、テーマにはサイドバーが付属しているが、コンテンツの一部または全部を全幅テンプレートで表示したい場合。

WordPressでサイドバーを削除するには、2つのオプションがあります：

Elementor Proの使用
使用コード

これらの方法を使う前に、お使いのテーマにサイドバーを無効にする機能が組み込まれているかどうかを確認してください。多くのテーマでは、WordPressのカスタマイザーにサイドバーを無効にするオプションが用意されており、手動でサイドバーを無効にする必要はありません。あるいは、WordPressエディターを使用する際に選択できる全幅テンプレートがテーマに付属している場合もあります。

お使いのテーマにこれらのオプションがない場合は、以下の手順に従って手動でサイドバーを削除してください。

Elementorでサイドバーを削除する

Elementorを使ってWordPressのサイドバーを削除するには、サイドバー領域を含まないテンプレートを作成する必要があります。手順は以下の通りです：

テンプレートの作成詳細 "テンプレート" → "テーマ・ジェネレーションWare "をクリックし、サイドバーを削除したい場所（1つの投稿や1つのページなど）を選択します。
グローバルアプリケーションサイト全体のサイドバーを削除したい場合は、このテンプレートですべてをカバーすることができます。
ローカルアプリケーション特定のページだけサイドバーを削除したい場合は、サイドバーのないテンプレートを選ぶことができます。

終了したらポストテンプレートを使い、表示条件を使って表示場所をコントロールする。

WordPressのサイドバーをコードで削除する

WordPressのサイドバーは、テーマのテンプレートファイルを直接編集することで削除できます。手順は以下の通り：

子テーマの使用テーマファイルを編集する必要があるため、必ず子テーマを使用してください。こうすることで、テーマを更新してもあなたの変更が上書きされるのを防ぐことができます。
テンプレートファイルのコピー: サイドバーから削除する必要のあるテンプレートファイル（例えば シングル.phpそしてアーカイブ など)を親テーマから子テーマフォルダへ移動します。
テンプレートファイルの編集これらのファイルを開き、類似のファイルをすべて削除する。 <?php get_sidebar(); ?> スニペット（コードは若干異なるかもしれませんが、基本的にサイドバーを呼び出します）。
HTMLとCSSの調整ページのレイアウトが正しくなるように、必要に応じてHTMLとCSSのコードを調整してください。

異なるコンテンツに異なるサイドバーを表示する方法

前回、テーマがサイドバーをサポートしていなくてもWordPressにサイドバーを追加する方法について説明した。しかし、異なるコンテンツに異なるサイドバーを表示したい場合はどうすればいいでしょうか？これを使えば、コンテンツの種類ごとに異なるウィジェットのコレクションを表示することができます。

例えば、"レビュー "カテゴリのブログ記事用にウィジェットのセットを使い、"チュートリアル "カテゴリのブログ記事用に別のウィジェットのセットを使いたいかもしれません。

利用するエレメンタ異なるサイドバーを表示する

これは最も簡単な方法で、以下の手順に従ってください：

テンプレートの作成: まず、複数のElementorテンプレートを作成し、それぞれにサイドバーを設置します。
設定条件次に、「条件設定」で、各テンプレートを関連するカテゴリー、ページ、その他の条件に割り当てます。

コンテンツ・アウェア・サイドバー・プラグインの使用

もう一つの方法は、無料のContent-Aware Sidebarプラグインを使用することです。プラグインをインストールして有効化したら、以下の手順に従ってください：

新しいサイドバーを追加するコンテンツアウェア → 新規追加」。
設定条件デフォルトのサイドバーを置き換える条件を選択します。例えば、"コメント "カテゴリのすべてのブログ記事にこのサイドバーを使用したい場合は、カテゴリ条件を作成します。

切り替える作戦タブをクリックし、置き換えたいサイドバーを選択します。また、サイドバーを "マージ "して、両方の内容を含めることもできます：

をクリックします。"創造".次に外観 → ウィジェットをクリックして、条件付きサイドバーにコンテンツを追加します：

概要

Elementorまたはコードを使用して、コンテンツタイプごとに異なるウィジェットのコレクションを設定したり、より高度なカスタマイズのためにContent-Aware Sidebarプラグインを使用したりすることができます。WordPressカスタマイザーを使うか、手動でテンプレートファイルを編集するかに関わらず、このガイドでは様々なユーザーのニーズに対応する包括的な手順と方法を提供しています。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み