今回は、クライアントの満足度を高めるカスタマイズ方法をご紹介します。
WordPressでヘッダーやフッターをカスタマイズする際、ウィジェットエリアがあれば直感的に編集できて便利です。テーマによっては最初から用意されていますが、ない場合でも独自のウィジェットエリアを追加できます。
手順はシンプルですので、すぐに実践できます。具体例を示しながら説明する方が分かりやすいと思いますので、Cocoonのヘッダー部分に独自のウィジェットエリアを表示する方法を解説します。一緒にマスターしましょう！
管理画面のカスタマイズ
register_sidebar()関数を使って［外観｜ウィジェット］画面に独自のウィジェットエリアを登録し、表示させます。これにより、ウィジェットエリアのコンテンツをノーコードで編集できるようになります。
パラメーター
register_sidebar()関数のパラメーターをみていきましょう。
register_sidebar( array|string $args = array() ): string
$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( )関数を記述する必要があります。
パラメーター
dynamic_sidebar()関数のパラメーターをみていきましょう。
dynamic_sidebar( int|string $index = 1 ): bool
$indexは整数または文字列の形式を取ります。
任意のパラメーターですので、特に指定しない場合は、デフォルトのウィジェットエリアが表示されます。
特定のウィジェットエリアを表示したい場合は、register_sidebar()関数で指定したidまたはnameの値を渡します。
コードの記述場所
テーマがフックを提供している場合、子テーマのfunctions.phpファイルに記述するか、Code Snippetsプラグインを使用して追加することが可能です。しかし、フックを提供していないテーマの場合、PHPファイルを編集することになります。
PHPファイルを編集する場合、テーマのアップデートで編集内容が上書きされてしまう可能性があるため、注意が必要です。セキュリティーの観点からも、テーマのアップデートを避けて通るわけにはいきません。この問題に対処するために、子テーマを作成し、その中に編集したいPHPファイルをコピーして編集する方法があります。子テーマを使用することで、親テーマのアップデートがあっても、子テーマ内の編集内容は保持されます。つまり、テーマを最新の状態に保ちつつ、編集内容を守ることができます。
ただし、この方法にも限界があります。子テーマに複製したファイルのアップデートがあった場合、そのは内容は反映されません。この問題を解決するために、WordPressにはフックという仕組みがあります。テーマファイルのカスタマイズは、可能な限り、テーマが提供するフックを使うようにしましょう。フックを活用することで、アップデートの影響を受けにくい安全なカスタマイズが可能になります。
Cocoonのヘッダー部分に独自のウィジェットエリアを表示する
Cocoonのヘッダー部分をカスタマイズしたい場合は、tmp/header-container.phpを参照します。
フック
ロゴの前後にコードを挿入するためのアクションフックが用意されています。
- ロゴ前：
wp_header_logo_before_open - ロゴ後：
wp_header_logo_after_open
コードの記述場所
Cocoonはフックを提供しているテーマですので、コードを子テーマのfunctions.phpファイルに記述するか、Code Snippetsなどプラグインを使用して追加します。
プラグインを利用すると、テーマを変更してもカスタマイズが維持されますが、今回のカスタマイズはCocoonに特化したものであるため、子テーマのfunctions.phpでも特に問題ありません。
コード
使用している関数は次のとおりです。
- add_action()でフックを利用し、指定した位置にウィジェットエリアを追加
is_active_sidebar()でウィジェットエリアが有効かをチェックdynamic_sidebar()で指定したウィジェットエリアを表示
// ロゴ前にウィジェットエリアを表示する
add_action( 'wp_header_logo_before_open', function() {
if ( is_active_sidebar('zero1pg_before_header_logo') ) {
dynamic_sidebar( 'zero1pg before header logo');
}
} );まとめ
ウィジェットエリアを登録し、公開画面で表示されるようにしたら、あとは［外観｜ウィジェット］画面で自由に編集するだけです。
見た目の調整が必要な場合はCSSを使うこともありますが、ブロックなどを使ってノーコードでコンテンツを編集できるため、クライアントにも喜ばれるはずです。
WordPressのメニュー機能も有効活用しましょう。［外観｜メニュー］から作成したメニューは、ナビゲーションメニューとして、ウィジェットから呼び出せます。
