メニューに画像を表示する【Menu Image, Icons made easy】

テキストだけのメニューでは、ちょっと味気ないし、ぱっと見でどんなメニューなのかが分かりづらい。
『Font Awesome』を使用してアイコンフォントを表示するという手もありますが、自分の好きな画像を使いたいというときもあるでしょう。

Menu Image, Icons made easy】は、メニュー項目に画像を表示することができるプラグイン。

マウスオーバーで画像を切り替えて表示することもできます。

こんな場合にオススメ
  • メニューに画像を表示したい
  • メニューにアイコンを表示したい
プラグインを使ってできること
  • メニュー項目に画像を表示することができる
  • メニュー項目にDashIconsを使用することができる
目次

インストール

Menu Image, Icons made easy インストール
Menu Image, Icons made easy インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Menu Image, Icons made easyで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

メニューに画像を表示する方法

STEP
メニューを開く

管理画面 > 外観 > メニュー をクリックし、メニュー画面を開きます。

Menu Image, Icons made easy 使用方法
STEP
【Menu Image】をクリック
プラグインを有効化すると、メニュー項目に画像を設定する Menu Imageが表示されますので、クリックし設定を行います。
Menu Image, Icons made easy 使用方法
Menu Image, Icons made easy 使用方法
STEP
タイトル位置の選択

ナビゲーションラベルを表示する位置を選択します。

Menu Image, Icons made easy 使用方法
STEP
画像またはアイコンを選択する

画像の場合はメディアライブラリから表示したい画像を選択し、画像サイズを指定します。

Menu Image, Icons made easy 使用方法

アイコンの場合は、公式アイコンフォント【Dashicons】から選択することができます。
また、【Font Awesome】プラグインを使用すると、【Font Awesome】のフォントを選択することもできます。

STEP
保存
項目を設定したら変更を保存します。
STEP
使用イメージ
Menu Image, Icons made easy 使用イメージ

【Menu Image, Icons made easy】の設定

STEP
Menu Imageを開く

プラグインを有効化すると、管理画面 内に『Menu Image』項目が表示されるので、そこから設定を行います。

Menu Image, Icons made easy 設定
STEP
項目の設定
Menu Image, Icons made easy 設定
Menu image Hoverマウスオーバー時の画像を使用できるようにするかの選択
1st Menu Image size1つめの画像サイズを指定
2nd Menu Image size2つめの画像サイズを指定
3rd Menu Image size3つめの画像サイズを指定
STEP
保存
項目を設定したら変更を保存します。

動作確認環境

  • バージョン 3.0.4
  • WordPress 5.8

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Menu Image, Icons made easy】は、メニューに画像を追加表示するプラグイン。
  • テキストだけのメニューよりも画像が表示されていた方が、どのようなメニューなのか視覚的に分かりやすくなります。
よかったらシェアしてね!
目次
閉じる