WPプラグイン【Responsive Menu】をウィジェットエリアで使いやすくする術

以前に紹介したプラグイン Responsive Menu ですが、使いやすくて手放せません。

→ WPプラグイン横からニューと出るスマホメニューを【Responsive Menu】

さて、この Responsive Menu に項目を追加するのにウィジェットで簡単に操作できるようにする方法です。

少しだけ複雑だけど、設定しとくと便利だと思うよ！

Contents （目次）

プラグインを導入
functions.php にコードを追加
Responsive Menu 用のウィジェットエリア設置完了
Drawer Menu 用のカスタムメニューを設置
仕上げの設定
完成したのでテスト

プラグインを導入

当たり前ですが、まずはプラグインを導入、有効化して下さい。

公式に登録されているので管理画面から検索すると出てきます。

functions.php にコードを追加

functions.php に下記コードを追加して下さい。

register_sidebar(array(
	'name' => 'Drawer Menu' ,
	'id' => 'drawermenu' ,
	'description'   => 'ドロワーメニュー用のウィジットエリアだよ',
	'before_widget' => '<div class="widget">',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>'
));

function my_drawer_menu_func() {
dynamic_sidebar('drawermenu');
			}
add_shortcode('my-drawer-menu', 'my_drawer_menu_func');

register_sidebar(array(

'name' => 'Drawer Menu' ,

'id' => 'drawermenu' ,

'description' => 'ドロワーメニュー用のウィジットエリアだよ',

'before_widget' => '<div class="widget">',

'after_widget' => '</div>',

'before_title' => '<h3>',

'after_title' => '</h3>'

));

function my_drawer_menu_func() {

dynamic_sidebar('drawermenu');

}

add_shortcode('my-drawer-menu', 'my_drawer_menu_func');

before_widget
after_widget
before_title
after_title
は表示したいタグに適宜変更して下さい。

ちなみに今回の場合ですと

<div class="widget">
<h3>(ウィジェットの)タイトル</h3>
<h3>(ウィジェットの)タイトル</h3>
・
・
</div>

<h3>(ウィジェットの)タイトル</h3>

・

</div>

と出力されます。

もし、あなたが初心者でしたら、プラグイン Code Snippets を導入すると良いでしょう。

→ functions.php をイジるのが怖いので Code Snippets を導入した

→ Code Snippets WP

Responsive Menu 用のウィジェットエリア設置完了

上記コードを追加すると Drawer Menu というウィジェットエリアが新設されたと思います。

ここに表示したいウィジェットをドラッグ＆ドロッブすればOK

なのですが！

もう少しだけする事があります。

Drawer Menu 用のカスタムメニューを設置

このプラグインはカスタムメニューを使用して表示する方式となっているので、それでこと足りている場合は今回の方法は必要ないのですが、私はウィジェットのテキストエリアとかを使用したくて今回のウィジェット方式を導入しています。

既に本プラグイン用のカスタムメニューを設置されている場合は新たに作る必要はありませんが、まだの方はカスタムメニューでドロワーメニュー用のものを１つ作っておいて下さい。

そして項目は適当に。（今回はトップページへ戻るリンクを設置した画像です）

仕上げの設定

プラグインの設定で、先ほど作ったカスタムメニューを選択します。

Look & Feel → Menu Settings → Choose Menu To Responsify で選択。

同じ画面の Additional HTML Content Settings でショートコード my-drawer-menu を設置します。

これで完成！　おつかれ！

完成したのでテスト

設置したドロワーメニュー用のウィジェットエリアに、ウィジェットのテキストを追加してみます

表示されました。

もう少しスマートな方法が見つかったら、また記事にしてみますね。