今ではWordPressの標準となったブロックテーマ。文字通り、テーマテンプレートの構成をブロックエディターと同じ仕組みで構築するというもので、旧来のクラシックテーマにあったウィジェットと呼ばれるものは機能しないようになっています。
ただプラグインの中には独自ウィジェットを使って何かを表現するものも結構多数残っていて、ウィジェット機能のないブロックテーマでは基本的に動作しません。
そこで今回は旧来のウィジェットを使える状態にし、ブロックテーマのテンプレート内にショートコードを挿入してウィジェットエリアを出力するような仕組みを作る方法を例として紹介します。
ウィジェットメニューとカスタムウィジェットを追加する
有効化しているテーマのfunctions.phpへ以下のコードを追加すると、クラシックテーマのように「外観」メニューの中に「ウィジェット」というメニューが追加され、開くと「カスタムウィジェットエリア」というウィジェット領域が表示されるようになります。
コード追加後保存しても画面は自動でリフレッシュされませんので、コード追加後は画面をリロードしてから「外観」メニュー内に「ウィジェット」メニューがあるかを確認してください
/* ウィジェットエリアの追加 */
function pwcn_add_custom_widget_area() {
register_sidebar( array(
'name' => 'カスタムウィジェットエリア',
'id' => 'pwcn_custom_widget_area',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'pwcn_add_custom_widget_area' );もしも画面をリロード後に確認しても「外観」メニュー内に「ウィジェット」メニューが表示されない場合は、以下のコードを追加して試してみてください（この場合も画面をリロードして確認してください）。
/* ウィジェットのサポートを追加 */
add_theme_support('widgets');また、ウィジェット設定画面を旧来のクラシック形式にしたい場合は以下のコードも追加します。
/* ウィジェット設定をクラシック表示に戻す */
add_filter('use_widgets_block_editor', '__return_false');
ウィジェットエリア内の内容をショートコードで呼び出す
ブロックテーマのテンプレート内でウィジェットエリアに追加した内容を表示するには、ショートコードを作るのが一番簡単です。
有効化しているテーマのfunctions.phpへ以下のコードを追加します。
/* custom_widgetショートコードでウィジェットの内容を出力 */
function pwcn_display_custom_widget_area() {
ob_start();
if (is_active_sidebar('pwcn_custom_widget_area')) {
dynamic_sidebar('pwcn_custom_widget_area');
}
return ob_get_clean();
}
add_shortcode('custom_widget', 'pwcn_display_custom_widget_area');ブロックテーマのテンプレート内に以下のショートコードを追加して、プレビューや実際の表示画面でウィジェットの内容が表示されるかを確認ください。
[custom_widget]複数のウィジェットエリアを追加したいときは
先ほどのコードをよく見ていただくと、「pwcn_custom_widget_area」というIDを持つウィジェットエリアを追加し、そのIDのウィジェットエリアをショートコードで表示させるという流れになっていることを理解いただけると思います。
別のウィジェットエリアを追加するときは、別のユーザー定義関数を使い、IDを「pwcn_custom_widget_area」以外のものにし、add_shortcode()で追加するショートコードの名前（上記の場合では「custom_widget」）を変えたコードをさらに追加してください。
