WordPress で投稿とページに異なるサイドバーを表示する方法
公開: 2023-02-16デフォルトでは、WordPress はすべての投稿とページに同じサイドバーを表示します。 ただし、最も重要な投稿または投稿カテゴリ全体に関連するサイドバー アイテムに対して、まったく異なるサイドバーを表示したい場合があります。 その方法を知りたいと思ったことがあるなら、あなたは幸運です!
この記事では、さまざまな投稿やページに独自のサイドバーを手動で作成する方法と、WordPress プラグインを使用して作成する方法を紹介します. しかし、最初に、なぜこれを行う必要があるのかについて詳しく説明しましょう。
さまざまなサイドバーが必要な理由
前述のように、ブログに多数のカテゴリがある場合、そのトピックに類似したオファー、広告、または製品をサイドバーに表示したくなる場合があります。 または、各ページの対象者に合わせて調整された「会社概要」サイドバーでビジネスについて話したいと思うかもしれません。
このような状況では、独自のサイドバーが必要になります。 作成する方法は 2 つあります。手動で独自に開発する方法と、WordPress プラグインを使用する方法です。
最初に手動の方法をカバーしましょう。
新しい WordPress サイドバーを手動で作成する方法
新しいサイドバーを手動で作成するには、ローカル環境で子テーマを使用するのが理想的です。 すでに Twentyseventeen テーマ用に 1 つ作成していますが、どのテーマでも同じプロセスに従うことができます。
まず、サイドバーがテーマに登録されているファイルを見つけます。 通常は functions.php ファイルですが、テーマによって異なる場合があります。
ファイルを開き、サイドバー コードの関数を見つけます。 通常はregister_sidebarで構成され、完全な関数は次のようになります。
[php]
関数twentyseventeen_widgets_init() {
register_sidebar(
配列（
'name' => __( 'ブログサイドバー', 'twentyseventeen' ),
'id' => 'サイドバー-1',
'description' => __( 'ここにウィジェットを追加して、ブログ投稿とアーカイブ ページのサイドバーに表示します。', 'twentyseventeen' ),
'before_widget' => '<section id=”%1$s” class=”ウィジェット %2$s”>',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
register_sidebar(
配列（
'name' => __( 'フッター 1', 'twentyseventeen' ),
'id' => 'サイドバー-2',
'description' => __( 'ここにウィジェットを追加して、フッターに表示します。', 'twentyseventeen' ),
'before_widget' => '<section id=”%1$s” class=”ウィジェット %2$s”>',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
register_sidebar(
配列（
'name' => __( 'フッター 2', 'twentyseventeen' ),
'id' => 'サイドバー-3',
'description' => __( 'ここにウィジェットを追加して、フッターに表示します。', 'twentyseventeen' ),
'before_widget' => '<section id=”%1$s” class=”ウィジェット %2$s”>',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );
[/php]
関数全体をコピーし、子テーマに functions.php ファイルを作成して (まだ持っていない場合)、コードを貼り付けます。 関数名は必ず変更してください。
作成する必要がある追加のサイドバーの数に応じて、同じコードを単純に複製して、各サイドバーに一意の ID を割り当てることができます。 名前と説明も、それぞれが一意になるように変更する必要があります。 ここでは、2 つの新しいサイドバーを作成しました。
[php]
関数twentyseventeen_new_widgets_init() {
register_sidebar(
配列（
'name' => __( 'WordPress サイドバー', 'twentyseventeen' ),
'id' => 'サイドバー-4',
'description' => __( 'wordpress 関連のブログ投稿のサイドバーに表示されるウィジェットをここに追加します。', 'twentyseventeen' ),
'before_widget' => '<section id=”%1$s” class=”ウィジェット %2$s”>',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
register_sidebar(
配列（
'name' => __( 'Web デザイン サイドバー', 'twentyseventeen' ),
'id' => 'サイドバー-5',
'description' => __( 'ここにウィジェットを追加して、Web デザイン関連のブログ投稿のサイドバーに表示します。', 'twentyseventeen' ),
'before_widget' => '<section id=”%1$s” class=”ウィジェット %2$s”>',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'twentyseventeen_new_widgets_init' );
[/php]
新しいサイドバーの準備が整いました。 ウィジェット セクションを確認すると、2 つの新しいウィジェット エリアが表示されます。 各サイドバーに簡単なテキスト ウィジェットを追加して、認識できるようにしました。
サイドバーを作成したら、場所を割り当てます。 既存の右側のサイドバーを置き換えることを検討しているため、それが配置されているファイルを見つける必要があります。
この例では、 sidebar.phpにあります。 親テーマからファイルをコピーして、子テーマに貼り付けます。
ファイルを確認すると、右側のメイン サイドバーの ID であるsidebar-1が呼び出されています。
[php]
<aside id=”secondary” class=”widget-area” role=”complementary” aria-label=”<?php esc_attr_e( 'ブログサイドバー', 'twentyseventeen' ); ?>”>
<?php dynamic_sidebar( 'サイドバー-1' ); ?>
</脇>
[/php]
ここで、Web デザイン カテゴリ用に 1 つのサイドバーを作成し、WordPress カテゴリ用に別のサイドバーを作成します。 これは、2 つの異なる方法で実現できます。1 つはテンプレート駆動型のアプローチで、もう 1 つはカテゴリ駆動型のアプローチです。
テンプレート主導のアプローチ
このアプローチでは、要件に応じて異なるテンプレートを作成する必要があります。 この例では、single.php が単一の投稿を担当しているため、ファイルをコピーして子テーマに貼り付けることができます。 それに応じて、 wordpress-post.phpのようにファイルの名前を変更し、テンプレート名も追加します。
[php]
/* テンプレート名: WordPress サイドバー
* テンプレート投稿タイプ: post*/
[/php]
同様に、 webdesign-post.phpという名前の別のテンプレートを作成しました。
次に、子テーマのsidebar.phpファイルに戻り、どのテンプレートが使用されているかを確認する簡単な条件を追加します。 これにはis_page_template()関数を使用します。
コードは一目瞭然です。 使用中のテンプレートを確認し、それに応じてサイドバーを設定します。 どの条件も満たされない場合、デフォルトのサイドバーが使用されます。
[php]
<?php
if ( is_page_template('wordpress-post.php') ) {
dynamic_sidebar( 'サイドバー-4' );
}elseif ( is_page_template('webdesign-post.php') ){
dynamic_sidebar( 'サイドバー-5' );
}それ以外{
dynamic_sidebar( 'サイドバー-1' );
}
?>
[/php]
新しい投稿を作成し、作成したばかりのテンプレートの 1 つを割り当てましょう。
この特定の投稿に WordPress サイドバーを選択したことがわかります。
カテゴリー主導のアプローチ
この例 (投稿のカテゴリに基づいてサイドバーを変更する) では、カテゴリ主導のアプローチがテンプレート主導のアプローチよりもうまく機能します。 これを行うには、 in_category()関数を使用して、テンプレートの代わりにカテゴリに基づいてsidebar.phpの条件を調整する必要があります。
[php]
<?php
if ( in_category('ワードプレス') ) {
dynamic_sidebar( 'サイドバー-4' );
}elseif ( in_category('web-design') ){
dynamic_sidebar( 'サイドバー-5' );
}それ以外{
dynamic_sidebar( 'サイドバー-1' );
}
?>
[/php]
新しい投稿を編集または作成する場合は、目的のカテゴリを追加するだけです。 それに応じてサイドバーが表示されるので、テンプレートを選択する必要はありません! ここでは、投稿カテゴリとして Web デザインを選択したので、Web デザイン サイドバーが表示されます。
基本的に、特定の要件に応じて sidebar.php の条件を調整する必要があります。
WordPress プラグインを使用してカスタム サイドバーを作成する方法
サイドバーを手動で作成するのに問題がある場合は、簡単に作成できる便利な WordPress プラグインを試すことができます!
そのようなプラグインの 1 つがコンテンツ認識サイドバーです。 個々のページ、投稿、カテゴリなどにサイドバーを動的に作成できるシンプルなプラグインです。
インストールすると、管理パネルにサイドバーメニューが表示されます。
サイドバー > 新規追加
まず、サイドバーに名前を追加します。 次に、サイドバー条件ドロップダウンから表示条件を設定できます。 サイドバーには、ページ、投稿、カテゴリ、作成者など、複数の条件を設定できます。
スケジュール タブからサイドバーのスケジュールを設定し、デザイン タブで HTML タグを変更できます。
右側に[オプション]ボックスが表示されます。 そこから、新しいサイドバーの場所とルールを設定できます。 サイドバーのショートコードを作成するなどのアクションを実行することもできます.
サイドバーが公開されると、 [外観] > [ウィジェット]セクションからアクセスできます。
この新しいサイドバーは、設定に従ってページや投稿に自動的に表示されます。
このプラグインを使用すると、初期設定に関係なく、各投稿またはページを編集するときにサイドバーを選択することもできます.
投稿またはページ内では、右側に[サイドバー – クイック選択]パネルが表示され、既存のサイドバーがすべて表示されます。 そこから、初期設定で以前に設定したターゲットの場所でサイドバーを選択できます。
たとえば、以前にMy sidebarを作成し、ターゲットの場所はBlog Sidebarだったので、 Quick Selectパネルでは、 My sidebar はBlog Sidebarでのみ使用できます。
ただし、ページの編集セクションから新しいサイドバーを作成することもできます。 新しいサイドバーの名前を入力して、ページを公開または更新するだけです。
新しいサイドバーを作成する場合は、 [外観] > [ウィジェット]セクションで有効にするだけです。
注: ページにサイドバーを割り当てることもできますが、ページ テンプレートにサイドバーが含まれていることを確認してください。 そうしないと、編集ページセクションで設定しても、サイドバーが表示されません。
結論
サイドバーを作成するための 2 つのオプション、手動開発とプラグインを使用する方法を見てきました。 コードに慣れていない場合は、プラグインを使用するのが最適なオプションかもしれませんが、特定の要件があり、サイトにプラグインを追加したくない場合は、手動の方法を使用する必要があります。 . 重要なことは、要件を理解してから、最適なオプションを選択することです!