WPプラグイン

WordPressで作成したウェブサイトにプラグインだけでレスポンシブ対応のハンバーガーメニューを実装できる「Responsive Menu」

投稿日: 更新日: 2017年11月08日

このブログは現在「はてなブログ」で書いていますが、開設から1年を経過したらWordPressに移行するかもしれません(現在、いろんな方向性を検討中)また、仕事ではWordPressを弄る機会が多いので、自分自身の備忘録も兼ねてはてなブログの記事だけどWordPressのネタを書いていこうと思います(^_^;)

今回紹介するのは記事タイトルの通り、プラグインをインストールするだけでWordPressのウェブサイトにレスポンシブデザイン対応のハンバーガーメニューを実装することができる「Responsive Menu」の紹介です。


 

スポンサーリンク

さいしょに

念のため「ハンバーガーメニューって何?」という疑問から解消しておきたいと思います。

f:id:d3dayo:20170903132632p:plain

よく、ウェブサイトの上部にこういったボタン?メニュー?が表示されていることってありませんか?

これがハンバーガーメニューです。

三本の線がハンバーガーに見えることがその名の由来になっているんですが…私にはこれがハンバーガーとは最初思えなかった(笑)

さて、このハンバーガーメニュー…メニューボタンとしては賛否あって、「そもそもこの三本の線が何を示しているのかがわかりにくいし使いづらい」という声もよく聞きます。

反面、できればメニューボタンは場所を取らない・目立たないようにしたいという要望を頂くこともあり、私がこのプラグインの存在を知ったきっかけは「誰でも簡単に実装できる・変更できるハンバーガーメニューを設置の仕方を教えてほしい(プラグイン運用可)」と以前に仕事関係の依頼で要望を頂いたからなんです。

 

実装手順

それでは、この「Responsive Menu」をウェブサイトに実装する手順を紹介していきましょう。

とはいっても、これはプラグインを使ってメニューを表示する方法なので、実装手順も簡単です(プラグインをインストールすればいい)

プラグインのインストール手順は、以下のプラグイン固有のページから

zipファイルをダウンロードして、WordPressの管理画面→[プラグイン]→[新規追加]→[プラグインのアップロード]からダウンロードしたzipファイルをWordPressにアップロードするか…

f:id:d3dayo:20170903134804p:plain

[プラグインを追加]ページ上の検索欄で「Responsive Menu」と検索することでウェブサイトにプラグインを追加することができます。

f:id:d3dayo:20170903135247p:plain

 

Responsive Menuの設定

ハンバーガーメニューの表示設定はWordPress管理画面の中にある「Responsive Menu」から変更することができます。

f:id:d3dayo:20170903140210p:plain

また、ハンバーガーメニューに内包されるメニュー項目は、WordPress管理画面の外観→メニューから設定することができます。

f:id:d3dayo:20170903150831p:plain

なお、インストールした「Responsive Menu」の表示設定について、実際に私がインストールして設定した内容を設定したメニューの[Import/Export]からインポートするだけで反映することができるように、以下、設定ファイルをキャビネットに置いておきますのでご自由にお使いください。

ここから設定ファイルをダウンロードすることができます

上記のリンクからダウンロードしたファイルは、ここからインポートすることで設定を反映させることができます。

WordPress管理画面→Responsive Menu→Import/Export→Import

f:id:d3dayo:20170903152303p:plain

 

おわりに

最後に、このプラグインを実装したWordPressサイトの動きをアニメーションgifにしたものを貼っておきます。これを見ればザックリとこのメニューを実装した後のイメージがわくのではないかと思います!

f:id:d3dayo:20170903153119g:plain

上のアニメーションgifはスマホでサイトを閲覧した際の様子ですが、PCでも同様に「三」のハンバーガーボタンをクリックすれば画面左からメニューが飛び出してくるようになります。

今回は難しいコード一切不要!プラグインをインストールするだけで使える、レスポンシブデザインにも対応のWordPressのハンバーガーメニューを紹介しました。プラグイン、本当にいろんなものがあって便利すぎますが、あまりたくさんインストールするとサイトが一気にモサッと重くなるのと…メンテナンスも面倒になるので…なるべく必要なものだけをインストールするようにしましょう!

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ