WP Responsive Menu

WordPress

  2017.10.29(  最終更新 )

WP Responsive Menu – スマホ対応のレスポンシブメニューを追加する、WordPressプラグインはこれで決まり!



ぺんです。

サイトを運営する上で、スマホ対応はとても重要です。
その意味では、小さな画面でも迷わないように、分かりやすいナビゲーションメニューを提供することは重要ですね。

今回は、スマホ対応のレスポンシブメニューを追加する、WordPressプラグイン「WP Responsive Menu」をご紹介します。



WP Responsive Menuの特徴

今回、このWP Responsive Menuを見つけるまでに、いろいろなプラグインを試してみました。
その際に重視したポイントは以下の通りです。
WP Responsive Menuは、無料バージョンでも実に様々な機能を提供してくれます。

メニューの表示位置など、簡単にカスタマイズが行える

WP Responsive Menuの設定画面です。メニューの表示位置や背景画像など細かい設定が可能です。
より細かい設定は、有料のProバージョンで!という話なのですが、個人的には無料バージョンで十分に満足してしまいました。

WP Responsive Menuの設定画面

表示するメニューを選択する

(1)と記載のあるアイコンに、サイトに登録されているメニューが表示されます。これをクリックしないとメニューが表示されないので注意。

メニュー表示時に、非表示とする要素を指定する

WP Responsibl Menuを表示した際に、ワードプレステーマで用意されているメニューを非表示にしないと、モバイル画面にメニューが2つ表示されてしまいます。その場合は、(2)と記載のある個所にCSSクラス指定をすると、そのCSSクラスの要素が非表示となります。画面の例は、このブログでも利用していうTDC MAGの例です。(下記でご紹介しています)

無料バージョンでもメニューのアニメーションに対応

これも、本日10月29日の、バージョン: 3.0.2 で対応してくれました! それ以前は、無料バージョンでは、ハンバーガーメニューをクリックしても、アニメーションが無かったので、少々華やかさに欠けていました。

ハンバーガーメニューとは?

ハンバーガーメニューとは、スマホアプリやモバイルウェブ画面でおなじみの、画面右上や左上に表示される、三本線のアイコンです。よく、CSSでアニメーション表示されることが多いですね。
ハンバーガーメニュー
この三本線が、ハンバーガーの様に見えることから、名づけられたようです。(諸説あります)
ハンバーガー

無料バージョンでもメニューの背景に画像を貼れる

他のツールも調べていたのですが、無料版でメニュー部分に背景画像を貼れるツールは見つかっていませんでした。これも今回のアップデートでサポートされました!

まとめ

いかがでしたか?

今回ご紹介したWP Responsive Menuプラグインは、無料バージョンでも美しいメニューを簡単に追加できます。
本サイト「あふぃぶ」でも、早速採用してみました。画面の幅を小さくすると、WP Responsive Menuのメニューが表示されますのでお試しください。



関連記事

  1. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方

    ぺんです。前回、このブログをエックスサーバー上で運営することは…

  2. WordPress

    TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法

    ぺんです。 Google Chromeを使っていると、突然このような表…

  3. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法

    ぺんです。Wordpressサイトのカスタマイズをするは、細心…

  4. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法

    ぺんです。本サイト「あふぃぶ」で使っているワードプレステーマは…

  5. WordPress

    おすすめ無料ワードプレステーマ 2017年8月

    Theme HORSEこちらのサイトでは、ハイクオリティーな無料ワ…

  6. 初心者向けWordPressサイトのバックアップ、リストア手順の解説

    Server

    (初心者向け)WordPressサイトのバックアップ、リストア(復旧)手順の詳細解説

    ぺんです。 Wordpressサイトを運営していて、気になるのがサイト…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Twitterアカウントの登録方法
  2. マイクロソフトアカウントの登録方法
  3. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  4. WordPressのローカル環境を簡単に構築する方法
  5. ウイジェットエリア
  1. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡…
  2. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方
  3. マイクロソフトアカウントの登録方法

    SNS

    2018年最新版-マイクロソフトアカウントの登録方法
  4. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法
  5. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法
PAGE TOP