【Cocoon】モバイルスライドインメニューにウィジェットを配置してコンテンツメニューを作成する
当サイトでも使用しているWordPressテーマ「SWELL」
では簡単に出来る「スマホスライドインメニューにウィジェットを配置」を「Cocoon」でも出来るようにする方法です。
目次
コードを “functions.php” に追加
外観＞テーマファイルエディタ＞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>',
));
}スライドインメニューを設定
外観＞メニュー＞新しいメニューを作成＞モバイルスライドインメニューにチェック＞メニューを作成
Note
一つでいいのでメニュー項目を追加しておく必要があります。
最終的にウィジェットで配置したメニューに置き換わるため、メニュー名・追加するメニュー項目はどんなものでも大丈夫です。
パターンでメニューを作成しショートコードを確認
上部メニュー管理メニュー＞パターン一覧＞新規パターンを追加でメニューを作成＞保存＞ショートコード確認
ウィジェットにブロック追加
外観＞ウィジェット＞追加されたスライドインメニュー＞ブロック追加＞パーツのショートコード追加＞保存
以上でWordPressテーマ「SWELL」では簡単に出来る「スマホスライドインメニューにウィジェットを配置」を「Cocoon」でも出来るようにする方法となります。
動作確認： Mac mini M2 – Safari iPad Air 4 – Safari iPhone 12 – Safari
引用元の「なにものにもなれないぶろぐ」様のサイトにて詳しく丁寧に紹介されています。
引用元：なにものにもなれないぶろぐ – 【Cocoon】スライドインメニューにウィジェットを表示する
