WordPressの投稿とページに異なるサイドバーを表示する方法

公開: 2018-08-20

デフォルトでは、WordPressはすべての投稿とページに同じサイドバーを表示します。ただし、最も重要な投稿に対して完全に異なるサイドバーを表示したり、投稿カテゴリ全体に関連するサイドバーアイテムを表示したりする場合があります。あなたがそれを行う方法を疑問に思ったことがあるなら、あなたは幸運です！

この記事では、手動とWordPressプラグインの両方を使用して、さまざまな投稿やページに固有のサイドバーを作成する方法を紹介します。しかし、最初に、なぜこれをしたいかについてもっと話しましょう。

別のサイドバーが必要な理由

先に述べたように、ブログに多くのカテゴリがある場合、そのトピックに類似したオファー、広告、または製品を含むサイドバーを作成したくなるかもしれません。または、各ページの対象者に合わせた「AboutUs」サイドバーでビジネスについて話したい場合もあります。

このような状況では、独自のサイドバーが必要になります。 1つを作成するには、2つの方法があります。独自に開発するか、WordPressプラグインを使用して手動で作成します。

最初に手動の方法をカバーしましょう。

ツールルーラーのキーボードと植物の画像は、他の本やテクノロジーと一緒に机の上のワードプレスのサイドバーを表示するように配置されています

新しいWordPressサイドバーを手動で作成する方法

新しいサイドバーを手動で作成するには、理想的には、ローカル環境で子テーマを使用する必要があります。私はすでに17のテーマ用に私のものを作成しましたが、どのテーマでも同じプロセスに従うことができます。

まず、テーマにサイドバーが登録されているファイルを見つけます。通常はfunctions.phpファイルですが、テーマによって異なる場合があります。

ファイルを開き、サイドバーコードの関数を見つけます。通常、 register_sidebarで構成され、関数全体は次のようになります。

function twentyseventeen_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Blog Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-1',

'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'       => __( 'Footer 1', 'twentyseventeen' ),

'id'         => 'sidebar-2',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'      => __( 'Footer 2', 'twentyseventeen' ),

'id'         => 'sidebar-3',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);

}

add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

次に、関数全体をコピーし、子テーマにfunctions.phpファイルを作成し（まだ持っていない場合）、コードを貼り付けます。必ず関数名を変更してください。

作成する必要のある追加のサイドバーの数に応じて、同じコードを複製し、各サイドバーに一意のIDを割り当てることができます。また、名前と説明を変更して、それぞれを一意にする必要があります。ここで、2つの新しいサイドバーを作成しました。

function twentyseventeen_new_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Wordpress Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-4',

'description'   => __( 'Add widgets here to appear in your sidebar on wordpress related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);



register_sidebar(

array(

'name'       => __( 'Web Design Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-5',

'description'   => __( 'Add widgets here to appear in your sidebar on web design related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);

}

add_action( 'widgets_init', 'twentyseventeen_new_widgets_init' );

これで新しいサイドバーの準備が整いました。ウィジェットセクションをチェックすると、2つの新しいウィジェット領域が表示されます。サイドバーを認識できるように、各サイドバーにシンプルなテキストウィジェットを追加しました。

ワードプレスダッシュボードワードプレスウィジェットとコンテンツセレクター、および複数のフッターを備えた異なるサイドバー

サイドバーを作成したら、場所を割り当てます。既存の右側のサイドバーを置き換えることを検討しているため、ファイルが配置されている場所を見つける必要があります。

この例では、 sidebar.phpにあります。親テーマからファイルをコピーして、子テーマに貼り付けます。

ファイルを確認すると、メインの右側のサイドバーのIDであるsidebar-1が呼び出されています。

<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aside>

次に、Webデザインカテゴリ用に1つのサイドバーを作成し、WordPressカテゴリ用に別のサイドバーを作成します。これは、2つの異なる方法で実現できます。1つはテンプレート駆動型のアプローチで、もう1つはカテゴリ駆動型のアプローチです。

ここで始める前に、カスタムの単一投稿テンプレートを作成する方法を学びましょう。

テンプレート主導のアプローチ

このアプローチでは、要件に応じて異なるテンプレートを作成する必要があります。この例では、single.phpが単一の投稿を担当しているため、ファイルをコピーして子テーマに貼り付けることができます。それに応じて、 wordpress-post.phpのようにファイルの名前を変更し、テンプレート名も追加します。

/* Template Name: WordPress Sidebar

* Template Post Type: post*/

同様に、 webdesign-post.phpという名前の別のテンプレートを作成しました。

ローカルファイルにwordpress-postとwebdesign-postを含むwordpress27テーマ

次に、子テーマのsidebar.phpファイルに戻り、使用中のテンプレートを確認するための簡単な条件を追加します。このために、 is_page_template()関数を使用します。

コードは自明です。使用中のテンプレートをチェックし、それに応じてサイドバーを設定します。いずれの条件も満たされない場合は、デフォルトのサイドバーが使用されます。

<?php

if ( is_page_template('wordpress-post.php') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( is_page_template('webdesign-post.php') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

次に、新しい投稿を作成して、作成したテンプレートの1つを割り当てましょう。

別のサイドバーでワードプレスの投稿属性テンプレートを編集する

この特定の投稿にWordPressサイドバーを選択したことがわかります。

サイドバーが異なるライブ投稿のワードプレスプレビュー

カテゴリ主導のアプローチ

この例（投稿カテゴリに基づいてサイドバーを変更する）の場合、カテゴリ駆動型のアプローチは、テンプレート駆動型のアプローチよりもうまく機能します。これを行うには、 in_category()関数を使用して、テンプレートではなく、カテゴリに基づいてsidebar.phpの条件を調整する必要があります。

<?php

if ( in_category('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( in_category('web-design') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

これで、新しい投稿を編集または作成する場合は、目的のカテゴリを追加するだけです。それに応じてサイドバーが表示されるので、テンプレートを選択する必要はありません。ここでは、投稿カテゴリとしてWebデザインを選択したので、Webデザインのサイドバーが表示されます。

選択したカテゴリのWebデザインに基づくワードプレスサイドバーの更新

基本的には、特定の要件に応じてsidebar.phpの状態を調整する必要があります。

WordPressプラグインを使用してカスタムサイドバーを作成する方法

サイドバーを手動で作成するのに問題がある場合は、サイドバーを簡単に作成できる便利なWordPressプラグインを試すことができます。

そのようなプラグインの1つは、コンテンツ対応サイドバーです。これは、個々のページ、投稿、カテゴリなどにサイドバーを動的に作成できるシンプルなプラグインです。

デザイナーが愛するもっと素晴らしいプラグインをお探しですか？この無料ガイドをチェックしてください！

インストールすると、管理パネルにサイドバーメニューが表示されます。

サイドバー>新規追加

ワードプレスサイドバープラグインオプション新しいサイドバーを追加

まず、サイドバーに名前を追加します。次に、[サイドバーの状態]ドロップダウンから表示条件を設定できます。サイドバーには、ページ、投稿、カテゴリ、作成者などの複数の条件を設定できます。

サイドバーの提案をワードプレスの投稿とページに別のサイドバーに設定する

[スケジュール]タブからサイドバーをスケジュールし、[デザイン]タブでHTMLタグを変更できます。

右側に[オプション]ボックスが表示されます。そこから、新しいサイドバーの場所とルールを設定できます。サイドバーのショートコードを作成するなどのアクションを実行することもできます。

サイドバーが公開されると、 [外観]>[ウィジェット]セクションからアクセスできます。

外観ウィジェットでサイドバーオプションを編集して、投稿とページ用に別のワードプレスサイドバーを取得します

この新しいサイドバーは、設定に従って、ページと投稿に自動的に表示されます。

プラグインを使用すると、初期設定に関係なく、各投稿またはページを編集するときにサイドバーを選択することもできます。

投稿またはページ内に、右側にサイドバー–クイック選択パネルが表示され、既存のすべてのサイドバーが表示されます。そこから、初期設定で以前に設定したターゲット位置でサイドバーを選択できます。

たとえば、以前にマイサイドバーを作成し、ターゲットの場所がブログサイドバーだったため、クイック選択パネルでは、マイサイドバーはブログサイドバーでのみ使用できます。

投稿やページのブログサイドバーをすばやく選択して、さまざまなワードプレスサイドバーを取得します

ただし、ページの編集セクションから新しいサイドバーを作成することもできます。新しいサイドバーの名前を入力して、ページを公開または更新するだけです。

投稿とページに基づいて選択された新しいワードプレスサイドバー

新しいサイドバーを作成する場合は、 [外観]>[ウィジェット]セクションでアクティブにする必要があります。

WordPressダッシュボードの投稿とページのさまざまなサイドバーの詳細

注：ページにサイドバーを割り当てることもできますが、ページテンプレートにサイドバーが含まれていることを確認してください。これがないと、編集ページセクションで設定してもサイドバーは表示されません。

結論

ワードプレスの投稿とページに異なるサイドバーを表示する方法をチーム化するFlywheelers

Flywheelのデザインインターン、Rese、アートディレクター、Andrea

これで、サイドバーを作成するための2つのオプションが表示されました。手動開発とプラグインです。コードに慣れていない場合は、プラグインを使用するのが最善のオプションかもしれませんが、特定の要件があり、サイトにプラグインを追加したくない場合は、手動で行う必要があります。重要なことは、要件を理解してから、最適なオプションを選択することです。

別のチュートリアルの準備はできましたか？ 次のいずれかを試してください。

あなたのウェブサイトに粘着性のある背中合わせのボタンを追加する方法
カスタムシングルポストテンプレートを作成する方法
WordPressサイトをモバイルフレンドリーにする方法
WordPressサイトのクローンを作成する方法