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

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約2年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : |

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

憧れていたんです。

三本線のボタンを押すと横からニューッ!と出てくるメニューに。

簡単に実装できるんです。

そう、WordPress のプラグインならね!

今回は御紹介するのは プラグイン Responsive Menu です。

実装後のスマホ画面を見てみよう

まずは有効化した時のスマホ画面を

↓ こちらが閉じてる状態

Responsive Menu 押す前はこんな感じ

右上に出てますねー なんでも通は「ハンバーガーメニュー」って呼ぶらしい。

確かに三本線がハンバーガーに見えます。

一般的には「ドロワーメニュー」。Drawer は「引き出し」ってこと。

↓ 押した状態。

Responsive Menu 押すとこうなる

イイ感じ!

基本的には有効化するだけで動きますので、初心者の方でもラクラク導入できます。

Responsive Menu

Responsive Menu 設定

設定は英語ですがそれほど難しくないです。

Transient Caching
キャッシュ機能。有効化するとロード時間が短縮される。
導入当初は色々とカスタマイズするからオフにしといて、落ち着いたらオンにすれば良い。

Shortcode Support
ショートコードでも動かせるみたい。
私は使わない方向でいくのでオフ。

Click Button Settings
 Click Button Title
 ボタンの下に表示する文字 menu とか メニュー とか。入れなくてもイイし。

 Change click menu to an X on click
 ボタンを押した後にバツマークにするか。

 Fixed Positioning
 スクロールしてもボタンを画面に固定するか。

Click Button Size Settings
ボタンの大きさや三本線の間隔などを調整する項目。

Click Button Location Settings
ボタンをどのあたりに配置するか。
上からはpxで指定。 左右はパーセントで指定します。

Menu Settings
開いて表示されるエリアの設定です。
こちらの Choose Menu To Responsify で選ばれた「カスタムメニューで作られたメニュー」を表示します。

Menu Advanced Settings
 Menu Breakpoint
 デフォは800px。この場合、横幅が800px以下になったらボタンが表示されます。

 Menu Width
 ニューッと出たメニューをどこまで広げるか。
 デフォは横幅の4分の3で75パーセント。

 Remove Search Box
 検索窓は標準で装備されるようですが、不要でしたらチェック。

 Click to Close Menu on Link Click
 メニューをクリックしてページ遷移するときにアニメーションでニューッと出たエリアを閉じるか否か。

 Click to Close Menu on Page Click
 出てきたエリア以外をクリックするとメニューを元に戻すか。

Technical Settings
 Minify output
 出力される script や style を圧縮するか。
 少しでも早くしたいならチェック。

 Include script in footer
 script を footer で出すか。
 これも head よりfooter の方が他の読み込みの邪魔をしなくなるのでチェック。

 Include CSS/JS as external files
 CSS と js を外部ファイルで読み込むか。

 Remove CSS !important tags
 出力される CSS の important を除くか?
 チェックして問題なければチェック。 

Sub Menu Arrow Settings
カスタムメニューで作ったメニューが階層になっている場合のマーク
画像にも変更できるようだ。

Colour Settings
メニューの色を指定できます。

Style Settings
文字の大きさなどを変更できます。

Animation Settings
 Slide Animation
 overlay と push が選べます。
 overlay は基本ページに被って表示
 push は基本ページを押し出して表示
 但し、push の時には head の viewport を下記のようにする必要あり。

 後はアニメーションのスピードなどの設定です。

Additional HTML Content Settings
HTMLコードを書き加える事が可能。
しかもショートコードも使えます。これ大事かも。

使った感想

初心者の人も簡単に導入できるし、慣れてきたらカスタマイズも豊富です。

非常に完成度の高いプラグインだと思いました。

次はショートコードを使ってのカスタマイズを紹介したいなと。


2016年5月12日 記事追加
ウィジェットで操作できるようにカスタマイズする方法を記事にしました。
WPプラグイン【Responsive Menu】をウィジェットエリアで使いやすくする術

WPプラグイン 横からニューと出るスマホメニューを 【Responsive Menu】」への5件のフィードバック

  1. ピンバック: スマホのメニュー表示 | ミュウミュウのこと。

  2. ぱお

    始めまして。
    とても参考にさせていただいております。

    現在、Responsive Menuを利用してハンバーガーメニューを実装しているのですが、
    設定画面が見つからない状況です。

    設定画面は、管理画面のどこから遷移可能か教えて頂けないでしょうか。

    どうぞ宜しくお願い致します。
    ぱお

  3. taku-k (くーた) 投稿作成者

    >ぱお さん

    コメントありがとうございます。
    設定画面ですが、管理画面の左のメニューの下の方に Responsive Menu というのが表示されていませんか?
    もし無かったら、またコメントください。

  4. ぱお

    taku-k (くーた) さん

    ご返信ありがとうございます。
    表示されているのですが、taku-k (くーた)さんみたく、「Look & Feel」や「Click Button Settings」という項目がなく、設定を変更できない状態でございます。

    そのためほかに設定画面があるのかと思ってしまいまして。。。
    なぜ私の環境では「Look & Feel」がないのでしょうか。おわかりになりますでしょうか。

  5. taku-k (くーた) 投稿作成者

    >ぱお 様

    プラグインのバージョンアップで色々と変更になったみたいですね。。すみません。
    この記事は バージョン 2.8.9 くらいの時のプラグインの設定だと思います。

    https://wordpress.org/plugins/responsive-menu/developers/

    本日現在、上記から 2.8.9 はダウンロード可能みたいですので、それをFTPでアップすると 以前のバージョンが使用可能かと思います。

    最新のバージョンは PRO Version にしないと機能がかなり制限されるようですね。

    私の古い記事で混乱させてしまったようで申し訳ないです。
    時間を作って書き直さないとです。

コメントを残す

メールアドレスが公開されることはありません。

*