やりたいこと

「Cocoon」のモバイルで表示されるスライドインメニュー（ハンバーガーメニュー）のコンテンツは通常は設定したメニューの内容のみが表示されます。
もうちょっと自由な内容を表示したいと思いませんか？

本記事ではそれに替えてウィジェットを表示できるようにします。

検証済みテーマ

「Cocoon」独自実装のスライドメニューを使用しているので「Cocoon」以外では十中八九使えません。

やりかた

テーマの「functions.php」にコードを記載する方法で実装します。

以下の場所から編集できます。
「Wordpress管理画面」>「外観」>「テーマファイルエディター」右側から編集するファイルを選択します。

functions.phpへ記載するコード

//ハンバーガーメニュー内にウィジェットエリアを設定
//スライドメニュー内容を上書きして出力をする
add_action('wp_nav_menu', 'add_slidemenu_contents', 10);
function add_slidemenu_contents($args = array()) {
	if(strpos($args, 'menu-drawer') !== false){
		dynamic_sidebar('add-slidemenu-contents');
	}
	else{
		return $args;
	}
}
//新規ウィジェットエリアの宣言
if (function_exists('register_sidebar')) {
	register_sidebar(array(
		'name' => 'スライドメニュー',
		'id' => 'add-slidemenu-contents',
		'description' => 'スライドメニューに表示するウィジェットです。',
		'before_widget' => '<div class="add-slidemenu-contents">',
		'after_widget' => '</div>',
	));
}

スライドインメニューとして出力されるはずの文字列をひっかけて上書きしています。
もっと良い方法があれば教えてください。

新たなウィジェットエリア「スライドメニュー」にウィジェットを登録する

「Wordpress管理画面」>「外観」>「ウィジェット」に「スライドメニュー」という新規エリアが追加されました。

確認のためテスト用のウィジェットを追加します。

完成

メニューの代わりに登録したウィジェット名とテキストが表示されました。

※通常は以下のようにメニューの内容が表示されます。

残課題

あくまで上書きでの表示しかできません。

そのためモバイルスライドインメニューに、上書きされ消えてしまうにもかかわらずメニューを設定しなければなりません。

参考

【WordPress】ハンバーガーメニューにオリジナルのプロフィールを追加してみた【Cocoon】

wordpressのcocoonテーマで作られたサイトのハンバーガーメニューに要素を追加してみたので、編集過程についての備忘録として記事にしてみました。編集したファイルは「mobile-navi-button.phpファイル」です。

satoimo.blog

WordPressでウィジェットエリアを追加・表示する方法（4ステップで解説） – ワードプレステーマTCD

WordPress のサイドバーは、外観 > ウィジェットから様々なアイテムを追加してサイト上に表示するのが一般的です。今回ご紹介するのは、以下のウィジェットエリアを追加する方法です。

tcd-theme.com

https://developer.wordpress.org/reference/functions/wp_nav_menu/

developer.wordpress.org