WordPressでサイドバーを自作する

ワードプレスのテーマtwentytwentyを基盤に、ページに表示するサイドバーを自作する実装を行ったので、備忘録的にこの記事を残す。

環境情報

PHP：version 7.3.12
WordPress：version 5.5.3
WPテーマ：twentytwenty

作業

ワードプレスのいろいろな機能は、全て「テーマのファイル」の中でプログラム的に記述されていて（定義されていて）、これはサイドバーも同じです。

ということから、サイドバーを増やす、ホームならホーム専用のものを別に作る、といった場合には、以下３つの事を行えば良さそうです。

１）サイドバーの定義（register_sidebar）を探す
　テーマのファイルの中で、サイドバーが定義されているところ（記述されているところ）を探す
２）サイドバーの定義を複製する
　その「定義されているサイドバーの記述」をコピペして、もう１つサイドバーを定義する
３）複製したサイドバーを場合分けで呼び出す
　サイドバーを表示するファイルの中で、ホームならホームの場合はこれ、と場合分けして、サイドバーを表示する

サイドバーの定義を探す

テーマファイルの中で、サイドバーは、register_sidebar （または register_sidebars ）で定義されてるので、その箇所を探します。

function.php

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' );

twentyseventeenではfunction.phpの中で定義されています。

サイドバーの定義を複製する

では、サイドバーの定義が分かったので、それを使って新たにサイドバーを複製（追加）してみます。

複製する場合、サイドバーの定義に対して３点の変更が必要ですが、今回はまず、ホーム（トップページ）専用のサイドバーを作ってみます。

１）３つの変更点

専用のサイドバーをつくるにあたり、先ほどコピーして抜き出したサイドバーの定義の中で、name, id, description の３点を変更しておきます。

ただ description は、サイドバーの定義の中にある場合だけ変更する、でOK。

name について

「ホーム専用サイドバー」とかにすると分かりやすいですね。以下のような感じです。

'name'          => __( 'ホーム専用サイドバー' ),

id について

今回はまずホーム専用サイドバー、ということで、たとえば、my-top-sidebar としていきます。
※元々あるサイドバーと同じ名前にしない！

'id'            => 'my-top-sidebar',

description について

テーマによって、サイドバーの定義に含まれないものもありますが、含まれている場合には、以下の様にしておけば分かりやすくて良さそうです。

'description' => 'ホーム専用サイドバーに表示されるコンテンツ',

作ったサイドバーを貼り付け

つづいて、上で変更したサイドバーの定義を子テーマのfunction.phpファイルの中に貼り付けます。
この時親テーマの関数とコンフリクトする場合は、別途関数定義を外す処理が必要。

複製したサイドバーを呼び出す

ここまででサイドバーを新たに追加した、ということになりますが、最後は、その追加したサイドバーを場合分けをして呼び出して表示するだけ。

サイドバーを呼び出している箇所を探す

まずサイドバーを呼び出して表示する箇所（dynamic_sidebar）を探します。

基本は「サイドバー」（sidebar.php）の中で、以下の様にな感じになっていると思います。

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

※丸カッコ内の sidebar-1 がテーマによって異なる（数字だったり違う名称となっている）

場合分けをして呼び出し表示

サイドバーを呼び出して表示する箇所（dynamic_sidebar）が分かったら、以下のような場合分けをしてサイドバーを呼び出すように変更します。

１）ホームでは
　今回追加したサイドバーを呼び出し表示する

２）その他では
　今まで使用していたサイドバーを表示する

今回追加したサイドバーは、上の方で id に「my-top-sidebar」を設定したので、呼び出すには以下のような記述になります。

dynamic_sidebar( 'my-top-sidebar' );

ということで、場合分け含めた具体的なサイドバーの呼び出しは、以下の様な感じになりますね。

<?php
if( is_front_page() ){ // ホームの場合
    dynamic_sidebar( 'my-top-sidebar' ); // 新たに追加したサイドバー
} else { // その他の場合
    dynamic_sidebar( 'sidebar' ); // 今まであるサイドバー
}
?>

追加したサイドバーを呼び出して表示

では実際に、新たに追加したサイドバーを呼び出せるように「サイドバー」（sidebar.php）を編集してみます。

sidebar.php

if( is_front_page() ){ // ホームの場合
    dynamic_sidebar( 'my-top-sidebar' ); // 新たに追加したサイドバー
} else { // その他の場合
    dynamic_sidebar( 'sidebar-1' ); // 今まであるサイドバー
}