モバイルスライドインメニューにウィジェットを表示する方法

はじめに

通常、スライドインメニューには外観→メニューで作成した内容しか表示できません。

しかし、サイドバーのようにウィジェットを配置したい場合もあると思います。
そこで、スライドインメニューもサイドバー同様、自由にウィジェットを配置できるようにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// ウィジェットエリアを追加
add_action('widgets_init', function () {
  register_sidebar([
    'name'          => 'スライドインメニュー',
    'id'            => 'mobile-slide-in',
    'description'   => 'スライドインメニューに表示されるウィジェット。',
    'before_widget' => '<div class="menu-drawer">',
    'after_widget'  => '</div>',
  ]);
});


// ウィジェットエリアの内容を出力
add_filter('wp_nav_menu', function ($nav_menu, $args) {
  if ($args->menu_class === 'menu-drawer') {
    ob_start();
    dynamic_sidebar('mobile-slide-in');
    $nav_menu .= ob_get_clean();
  }

  return $nav_menu;
}, 10, 2);

さいごに

今回紹介した方法を使えば、モバイルスライドインメニューにウィジェットを自由に配置でき、メニュー以外のコンテンツも簡単に追加することができます。
ただし、サイドバーにウィジェットを配置すれば、同様のことは実現可能です。
そのため、あえてモバイルスライドインメニューにウィジェットを配置する必要があるかどうかは、サイトの構成や目的に応じて検討する必要があるでしょう。