PHPを使ったカスタマイズの記事を読んでくださった皆様、PHPの世界に慣れてきましたでしょうか？
今回は、独自のウィジェットエリアを追加し、それを公開画面に反映させる方法をご紹介します。この手法を案件に活かせば、クライアントが直感的にカスタマイズできるため、満足度を上げられると考えています。
手順はとてもシンプルで、すぐに実践できます。具体的な例を示しながらの方が分かりやすいと思うので、基礎編課題２のヘッダー部分をカスタマイズする一例として、独自のウィジェットエリアを追加する方法について説明していきます。
一緒にマスターしましょう！
管理画面のカスタマイズ
register_sidebar( ) 関数を使って外観ウィジェット画面に独自のウィジェットエリアを登録します。これにより、コンテンツのカスタマイズが簡単に行えるようになります。
パラメーター
$args は配列または文字列の形式を取ります。
任意の引数なので、特に指定しない場合、name と id は自動的に生成されます。
デフォルト値は次のとおりです。
$defaults = array(
'name' => sprintf( __( 'Sidebar %d' ), $i ),
'id' => "sidebar-$i",
'description' => '',
'class' => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => "</li>\n",
'before_title' => '<h2 class="widgettitle">',
'after_title' => "</h2>\n",
'before_sidebar' => '',
'after_sidebar' => '',
'show_in_rest' => false,
);$args の要素は次のとおりです。
name：外観ウィジェット画面に表示されるウィジェットエリア名id：ウィジェットエリアの識別子description：ウィジェットエリアの説明文class：追加 CSS クラスbefore_widget：ウィジェットの先頭に追加するHTML要素after_widget：ウィジェットの末尾に追加するHTML要素-
before_title：タイトルの先頭に追加するHTML要素 after_title：タイトルの末尾に追加するHTML要素before_sidebar：サイドバーの先頭に追加するHTML要素after_sidebar：サイドバーの末尾に追加するHTML要素show_in_rest：このサイドバーを REST API で公開するかどうか
コード
次のコードを functions.phpファイルに記述する、またはCode Snippetsプラグインを使用して追加します。
// ウィジェットエリアの登録
add_action( 'widgets_init', function() {
register_sidebar( array(
'name' => 'zero1pg before header logo',
'id' => 'zero1pg_before_header_logo',
'description' => 'ヘッダーロゴ前のウィジェットエリアです。',
'before_widget' => '<nav>',
'after_widget' => '</nav>',
) );
} );$args は任意のパラメーターなので省略可能です。以下のコードだけでもウィジェットエリアを追加できます。試してみてください。
add_action( 'widgets_init', function() { register_sidebar( ); } ); 公開画面のカスタマイズ
register_sidebar() 関数を使用してウィジェットエリア（sidebar）を登録（register）しても、公開画面に表示されません。実際に表示するためには、サイドバーを表示したい場所に dynamic_sidebar( ) 関数を記述する必要があります。
パラメーター
$index は整数または文字列の形式を取ります。
任意の引数なので、特に指定しない場合、デフォルトのサイドバーが表示されます。
register_sidebar( ) 関数で指定した name または id の値を渡します。
コード
テーマがフックを提供している場合、 functions.phpファイルに記述する、またはCode Snippetsプラグインを使用して追加することが可能です。しかし、テーマがフックを提供していない場合は、直接PHPファイルを編集することになります。
直接PHPファイルを編集する場合、テーマのアップデートで編集内容が上書きされてしまう可能性があるため、注意が必要です。セキュリティーの観点からも、テーマのアップデートを避けて通るわけにはいきません。この問題に対処するために、子テーマを作成し、その中に編集したいPHPファイルをコピーして編集する方法があります。子テーマを使用することで、親テーマのアップデートがあっても、子テーマ内の編集内容は保持されます。これにより、テーマの機能を最新のままに保ちつつ、編集内容も守ることができます。
基礎編課題２で使用するCocoonは、フックを提供しているテーマです。ヘッダー部分をカスタマイズしたいので、tmp/header-container.phpを参照します。
次のコードをfunctions.phpファイルに記述する、またはCode Snippetsプラグインを使用して追加します。
// ウィジェットエリアの表示
add_action( 'wp_header_logo_before_open', function() {
if ( is_active_sidebar('zero1pg_before_header_logo') ) {
dynamic_sidebar( 'zero1pg before header logo');
}
} );まとめ
ウィジェットエリアを登録して表示するための準備はこれだけです。あとは［外観 ｜ウィジェット］から自由に編集します。見た目の調整が必要な場合はCSSを使うこともあります。
WordPressのメニュー機能を有効活用しましょう。［外観｜メニュー］から作成したメニューは、ナビゲーションメニューとして、ウィジェットから呼び出せます。
