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. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる

    ぺんです。商品紹介のリンクを貼るときに、サムネイルのサイズを指…

  2. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法

    ぺんです。今回は、ワードプレスの親テーマのウイジットを子テーマで書き…

  3. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投稿する方法

    ぺんです。ブログ記事を投稿した際に、FacebookとTwit…

  4. WordPress

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

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

  5. WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、WordPressプラグ…

    ぺんです。ブログ記事に広告(ASPへのリンク)を貼っていると、…

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

    Server

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

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

コメント

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

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

最近の記事

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

    ようこそ、「あふぃぶ」へ
  2. イラスト

    画像素材

    コンテンツをより魅力的にする、高品質な無料イラスト素材
  3. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ve…
  4. Server

    アフィリエイト収益ブログの始め方(2)- 利用サービスの選定における3つのポイン…
  5. ウイジェットエリア

    WordPress

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