Responsive Menuでハンバーガーメニューを実装!【コピペで即使えるプラグイン】

ハンバーガー_メニュー_スマホ_プラグイン

プラグイン「Responsive Menu」を導入して
ハンバーガーメニューをすぐに実装!

システムエンジニア(SE)かっきーです。

スマートフォンでサイトやブログを見ていると、下記のようなマークをみかけることがあります。

ハンバーガーメニュー_Responsive Menu

ヘッダー部分の三本線のボタンを押すと、メニューが出現

これをハンバーガーメニューといいます。

今回は、ハンバーガーメニューを実装するプラグインのご紹介です。

プラグイン「Responsive Menu」を簡単編集できるように

ハンバーガーメニューを簡単に実装できるプラグイン、それが「Responsive Menu」です。
このプラグインを挿入し、有効化するだけで簡単にブログに実装することができます。

ただこのプラグインはメニューで設定した項目のリンクしか表示させる事が出来ません。

そのため、今回はウィジェットエリアから簡単に編集でき、テキストなどを配置できるようにしました。

挿入前に、まず「functions.php」を編集する

まず、「functions.php」を編集します。
ただ「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');

「Drawer Menu」はカスタムメニューを設置する

「Drawer Menu」は、カスタムメニューを使って表示させています。

今回の編集では、メニュー内にウィジェットのテキストエリアなどを配置するように行っているため、「Drawer Menu」用のカスタムメニューを設置します。

メニュー構造は適当で大丈夫ですので、1つ作成しておきましょう。

「テキスト」も設置できるのでアドセンスなど設置可能!

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

Responsive Menu

「Menu」「Additional Content」で、ショートコード 「my-drawer-menu」 を記載します。

Responsive Menu

これで完成!!
お疲れ様です。

ウィジェットエリアに、設置したメニュー用の項目ができております。

メニュー以外にも自由に「テキスト」を設定できますので、プロフィールを追加したり、広告バナーを貼ることもできます。

うまく実装できない場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です