長年にわたり、私たちは何千人もの読者がWordPressサイトをカスタマイズして、ユーザーエクスペリエンスと視覚的な魅力を向上させるのを支援してきました。ウェブデザインに関する実践的な経験から、WordPressナビゲーションメニューに画像アイコンを追加することで、サイトの使いやすさが劇的に向上することを学びました。
なぜなら、画像アイコンは訪問者に直感的な視覚的手がかりを提供し、サイトのナビゲーションを容易にするからです。これにより、ウェブサイトのインターフェースがよりインタラクティブで魅力的になり、直帰率の低下に役立ちます。
この記事では、WordPressのナビゲーションメニューに画像アイコンを簡単に追加する方法を紹介します。
WordPressのナビゲーションメニューに画像アイコンを追加する理由
通常、WordPressのナビゲーションメニューはプレーンテキストリンクです。これらのリンクはほとんどのウェブサイトでうまく機能しますが、常に興味深く魅力的に見えるとは限りません。
ナビゲーションメニューに画像アイコンを追加することで、訪問者の注意を引き、サイトの閲覧を促すことができます。
メニューに多くの異なるオプションがある場合、画像アイコンを使用すると、訪問者がコンテンツをスキャンして探しているものを見つけやすくなります。これは、WordPressのページビューを増やし、直帰率を減らすための簡単な方法になります。
オンラインマーケットプレイス の最も重要なメニュー項目（例：チェックアウトリンク）を強調するために、画像アイコンを使用することもできます。
メニューに行動喚起をハイライト表示することで、より多くのサインアップ、販売、メンバー登録、その他のコンバージョンを獲得できることがよくあります。
それでは、WordPressのナビゲーションメニューに画像アイコンを追加する方法を見てみましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。
- 方法1：プラグインを使用してナビゲーションメニューに画像アイコンを追加する（迅速かつ簡単）
- 方法2：コードを使用してWordPressメニューにアイコンを追加する（よりカスタマイズ可能）
- ボーナス：WordPressメニューにソーシャルメディアアイコンを追加する
方法1：プラグインを使用してナビゲーションメニューに画像アイコンを追加する（迅速かつ簡単）
WordPressメニューにアイコンを追加する最も簡単な方法は、Menu Imageを使用することです。このプラグインには、数クリックで追加できるdashIconアイコンが付属しています。
ウェブサイトにFont Awesomeを設定している場合は、メニュー画像を使用してこれらのアイコンをナビゲーションメニューに簡単に追加できます。Font Awesomeのインストール方法については、WordPressテーマにアイコンフォントを簡単に追加する方法に関するガイドを参照してください。
もう 1 つの方法として、WordPress メディアライブラリの画像やアイコンを使用することもできます。
まず、Menu Imageプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
アクティベーション後、WordPressダッシュボードのメニュー画像をクリックします。この画面で、セキュリティと機能の通知を受け取るか、「スキップ」ボタンをクリックするかを選択できます。
これにより、プラグインの設定を構成できる画面が表示されます。まず、画像アイコンに使用できるさまざまなサイズが表示されます。
Font Awesomeまたはdashiconsのアイコンを使用する予定の場合、メニュー画像はそれらを自動的にリサイズします。ただし、メディアライブラリから画像を使用する場合は、サイズを手動で選択する必要があります。
このプラグインは、サムネイル、画像、大などのデフォルトのWordPressの画像サイズをサポートしています。また、デフォルトで24×24、36×36、48×48ピクセルに設定された3つの独自のサイズも追加します。
これらの設定はほとんどのウェブサイトでうまく機能するはずですが、最初の、2番目、または3番目のメニュー画像のサイズに異なる数値を入力することで、アイコンを大きくしたり小さくしたりできます。
メニューにアイコンを追加すると、デフォルトで「ホバー時の画像」フィールドが表示されます。これにより、訪問者がそのメニュー項目にカーソルを合わせたときに別のアイコンを表示できます。
この設定は、独自の画像を使用している場合にのみ利用可能であることに注意してください。dashIconsまたはFont Awesomeアイコンを使用する予定の場合は、「ホバー時の画像」機能について心配する必要はありません。
異なるアイコンを表示することで、訪問者はナビゲーションメニューのどこにいるかを確認できます。メニューに多くの項目がある場合に特に役立ちます。たとえば、現在選択されている項目を強調するために、異なる色やアイコンサイズを使用できます。
異なるホバー効果を作成したい場合は、「ホバー時の画像フィールドを有効にする」にチェックが入っていることを確認してください。
それが終わったら、「変更を保存」をクリックして設定を保存します。
ナビゲーションメニューにアイコンを追加するには、外観 » メニューページに移動します。デフォルトでは、WordPressはサイトのプライマリメニューを表示します。
別のメニューを編集したい場合は、「編集するメニューを選択」ドロップダウンを開き、リストからメニューを選択します。その後、「選択」をクリックします。
次に、アイコンを追加したい最初のメニュー項目にカーソルを合わせます。「メニュー画像」が表示されたら、クリックします。
これで、独自の画像を使用するか、Font Awesomeアイコンのような既製のアイコンを選択するかを決定できます。
事前に作成されたアイコンを使用するには、「アイコン」の横にあるラジオボタンをクリックします。
その後、ダッシュアイコンまたはFont Awesomeアイコンのいずれかをクリックして選択できます。
独自の画像を使用したい場合は、「画像」の隣にあるラジオボタンを選択し、「画像セット」リンクをクリックしてください。
WordPressメディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードするかを選択できます。
プラグインの設定で「ホバー時に画像を有効にする」フィールドにチェックを入れた場合は、「ホバー時に画像をセット」もクリックする必要があります。
次に、このメニュー項目にカーソルを合わせたときに表示する画像を選択します。
場合によっては、この設定を無視して、どのような場合でも同じアイコンを表示したいことがあります。これを行うには、「ホバー時に画像を設定」をクリックし、まったく同じアイコンを選択します。
画像を選択しない場合、訪問者がホバーしたときにアイコンは完全に消えます。
その後、「画像サイズ」ドロップダウンを開き、リストからサイズを選択します。
すべてのアイコンに同じサイズを使用すると、メニューがより整理されているように見えます。ただし、最も重要な項目にはより大きなアイコンを使用する方が良い場合もあります。
例えば、WooCommerce のようなプラグインを使用してオンラインストアを作成した場合、「チェックアウト」に大きなアイコンを使用して目立たせることができます。
アイコンに満足したら、メニュー項目のラベルを確認する時間です。デフォルトでは、プラグインはアイコンの後にタイトルラベルを表示します。
これを変更するには、「タイトルの位置」セクションのいずれかのラジオボタンを選択してください。
もう1つのオプションは、ナビゲーションラベルを完全に削除して、アイコンのみのメニューを作成することです。メニューに多くの項目がある場合、これによりすっきりさせることができます。
ただし、各アイコンの意味が明白な場合にのみラベルを非表示にしてください。不明瞭な場合、訪問者はWordPressブログやウェブサイトのナビゲーションに苦労するでしょう。
ラベルを非表示にするには、「なし」の隣にあるラジオボタンを選択します。
メニュー項目の設定が完了したら、「変更を保存」をクリックします。
他のメニュー項目にアイコンを追加するには、上記と同じプロセスを繰り返してください。
終了したら、「メニューを保存」ボタンをクリックすることを忘れないでください。これで、WordPressウェブサイトにアクセスすると、更新されたナビゲーションメニューがライブで表示されます。
方法2：コードを使用してWordPressメニューにアイコンを追加する（よりカスタマイズ可能）
CSSを使用して、ナビゲーションメニューに画像アイコンを追加することもできます。
このように、メニュー内のアイコンの表示場所を正確に制御できます。任意の画像をアイコンとして使用できるため、独自のブランディングを追加するのに最適な方法です。
開始する前に、アイコンとして使用したいすべての画像ファイルをアップロードしてください。これらは、ストックフォト、オンラインで見つけたロイヤリティフリーの画像、またはCanvaのようなアプリで作成したカスタムグラフィックである可能性があります。
各画像をWordPressのメディアライブラリに追加したら、そのURLをコピーしてメモ帳のようなテキストエディタに貼り付けてください。次のステップでこれらのリンクすべてが必要になります。
画像のURLを見つけるには、WordPressメディアライブラリで画像を選択し、「ファイルURL」フィールドを確認してください。
より詳細な手順については、WordPressにアップロードした画像のURLを取得する方法に関するガイドをご覧ください。WordPressにアップロードした画像のURLを取得する方法。
その後、WordPressダッシュボードから外観 » メニューページにアクセスする必要があります。
次に、「編集するメニューを選択」ドロップダウンを開き、画像アイコンを追加したいメニューを選択します。
その後、「選択」をクリックしてください。
次に、「画面オプション」をクリックしてカスタムCSSクラスを有効にする必要があります。
表示されるパネルで、「CSS クラス」の横にあるチェックボックスをオンにします。
これで、ナビゲーションメニューの任意の項目にカスタムCSSクラスを追加できます。これにより、各メニュー項目をWordPressメディアライブラリの画像にリンクさせることができます。
これらのクラスは好きなように名前を付けることができますが、メニュー項目を特定するのに役立つ名前を使用することをお勧めします。
開始するには、画像アイコンを追加したい最初の項目をクリックするだけです。「CSSクラス（オプション）」フィールドに、使用したいクラス名を入力します。
次のステップでこれらのカスタムCSSクラスを使用するので、メモ帳などのアプリに書き留めておいてください。
メニュー項目のすべてに個別のクラスを追加するには、同じプロセスに従ってください。その後、「メニューを保存」をクリックして設定を保存します。
これで、CSSを使用してWordPressナビゲーションメニューに画像アイコンを追加する準備が整いました。
WordPressのチュートリアルでは、WordPressテーマファイルにコードスニペットを追加するように指示されることがよくあります。しかし、そうすると一般的なWordPressのエラーが発生する可能性があり、初心者にはあまり優しくありません。
そのため、WPCodeをお勧めします。
100万以上のウェブサイトで使用されている最高のWordPressコードスニペットプラグインであり、テーマのfunctions.phpファイルを編集せずにカスタムコードを追加できます。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
注意: WPCodeには、このチュートリアルで使用できる無料プランがあります。ただし、プロバージョンにアップグレードすると、コードスニペットのクラウドライブラリ、スマート条件付きロジックなどが利用できるようになります。
有効化したら、コードスニペット » スニペットを追加に移動します。
これにより、「スニペットの追加」ページに移動し、WPCodeの既製のスニペットライブラリを確認できます。これには、XML-RPCを無効にすることによってWordPressのセキュリティを向上させるスニペットや、WordPressがデフォルトでサポートしていないファイルタイプをアップロードできるスニペットなどが含まれています。
「カスタムコードの追加」にマウスカーソルを合わせ、表示されたら「スニペットを使用」をクリックするだけです。
開始するには、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。
これが完了したら、「コードの種類」ドロップダウンを開き、「CSSスニペット」を選択します。
コードエディターで、表示したいすべてのアイコンに対してコードを追加する必要があります。
お役に立てるよう、以下のサンプルコードを作成しました。前のステップで作成したカスタムCSSクラスに合わせて「.carticon」を変更できます。また、WordPressのメディアライブラリにある画像へのリンクにURLを置き換える必要があります。
.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
重要 注意: コードスニペット内のCSSクラスの前にドット「.」を付ける必要があります。これにより、WordPressはそれがクラスであり、他の種類のCSSセレクターではないことを認識します。
上記のスニペットは、上記で作成した個々のメニューアイテムごとに調整する必要があります。
コードに満足したら、「挿入」セクションまでスクロールします。WPCodeは、すべての投稿の後、フロントエンドのみ、または管理画面のみなど、さまざまな場所にコードを追加できます。
カスタムCSSコードをWordPressのブログ全体またはウェブサイト全体で使用するには、「自動挿入」が選択されていない場合は選択してください。
次に、「Location」ドロップダウンメニューを開き、「Site Wide Header」を選択します。
その後、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。
最後に、「スニペットを保存」をクリックして、カスタムCSSをライブにします。
これで、ウェブサイトにアクセスすると、ナビゲーションメニューにすべての画像アイコンが表示されます。
WordPressのテーマによっては、CSSを調整して画像アイコンを正確な位置に表示する必要がある場合があります。その場合は、WordPressダッシュボードのコードスニペット » コードスニペットに移動してください。
次に、スニペットの上にカーソルを合わせると表示される「編集」リンクをクリックします。
これでコードエディタが開かれ、変更を加える準備が整います。
ボーナス：WordPressメニューにソーシャルメディアアイコンを追加する
メニューアイコンとは別に、ソーシャルメディアアイコンをWordPressナビゲーションメニューに追加することもできます。これにより、サイトのスペースを取りすぎることなく、視覚的に魅力的な方法でソーシャルメディアプロフィールを宣伝するのに役立ちます。
これを行うには、Menu Imageプラグインを使用できます。有効化したら、WordPressダッシュボードから「外観 » メニュー」ページにアクセスし、左側の列にある「カスタムリンク」タブを展開します。
次に、ソーシャルメディアIDのURLを追加し、プラットフォームの名前を入力します。次に、「メニューに追加」ボタンをクリックします。
ソーシャルメディアプロフィールがメニュー項目として追加されると、画面の右側に表示されます。
ここで、アイテムのタブを再度展開し、「メニュー画像」ボタンをクリックする必要があります。
これにより、画面に新しいプロンプトが表示され、「画像を設定」リンクをクリックしてメディアライブラリからソーシャルメディアアイコンをアップロードできます。
事前に作成されたアイコンを追加したい場合は、「アイコン」オプションを選択し、FontAwesomeからソーシャルメディアアイコンを追加できます。
最後に、「変更を保存」ボタンをクリックして設定を保存します。
これで、ソーシャルメディアアイコンをナビゲーションメニューに追加できました。詳細については、WordPressメニューにソーシャルメディアアイコンを追加する方法に関するチュートリアルを参照してください。
この記事が、WordPressナビゲーションメニューに画像アイコンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでメニューに条件付きロジックを追加する方法やWordPressでスティッキーフローティングナビゲーションメニューを作成する方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
Menu Imageも使用していますが、いくら褒めても足りないくらいです。メニューにアイコンを入れたい初心者にとって、これは素晴らしい選択肢です。以前はFont Awesomeの実装に苦労していましたが、これははるかにクリーンで優れたオプションです。
JT
CSSの方法で、アイコンをメニュー項目の横ではなく上に配置するにはどうすればよいですか？
WPBeginnerサポート
それを実現するためにテーマに何を追加する必要があるかは、特定のテーマによって異なります。現時点では、ご希望の機能を実現するためにプラグイン方式を使用することをお勧めします。
管理者
Linsey Retcofsky
こんにちは、メニューリンクを非表示にしてアイコンのみを表示するようにコードを変更するにはどうすればよいですか？ご協力ありがとうございます。
WPBeginnerサポート
プラグインを使用すると、あなたが望むことを行うことができます。
管理者
カイル
こんにちは、
お手伝いいただけますでしょうか。
CSSを使用して、メニュー内の投稿にそれぞれのアイキャッチ画像を表示するにはどうすればよいですか？
ありがとう
WPBeginnerサポート
That would require more than CSS, we would recommend reaching out to your theme’s support and they should be able to assist with your featured image display
管理者
Nick
このプラグインを試しましたが、サブメニューの作成中に問題が発生しています。すべてガイドラインに従って設定しました。しかし、それらのメニューにはサブメニューがあり、画像が表示されません。
助けてください。
WPBeginnerサポート
まず、プラグインのサポートに連絡することをお勧めします。彼らが対応できるはずです。
管理者
Quy
有益な記事をありがとうございます。
WPBeginnerサポート
You’re welcome
管理者
Carlos Reddy
皆さん、最高です！
本当にありがとうございます！
WPBeginnerサポート
Glad you like our content
管理者
ソティル
Hey thanks a lot for this advise
WPBeginnerサポート
You’re welcome
管理者
リッチモンド・サゴエ
メソッド2を使用しましたが、機能しました。しかし、アイコンの横に「home」と表示されます
WPBeginnerサポート
このチュートリアルは、メニュー内の単語の横にアイコンを配置する方法です。配置が正しくない場合は、インスペクト要素を使用して、サイトで行える CSS 変更をテストできます: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Jo Lee
上記のすべてを行いましたが、メニュー内にはアップロードした画像が表示されており、すべてうまくいったように見えますが、ウェブサイトのフロントページにアクセスすると画像が表示されません。なぜ機能しないのか理解できません。
WPBeginnerサポート
プラグインを使用している場合は、プラグインのサポートに問い合わせることをお勧めします。そうでない場合は、テーマの設定によって上書きされている可能性があるため、テーマのサポートに問い合わせることをお勧めします。
管理者
Saviur Ukpong
いいですね、でも Font Awesome でどうすればいいですか？
Christina
みんな大好きです!!!!いつも必要なものがあります。これは完璧です!!!!ありがとうございます！
zviryatko
こんにちは、Menu Imageプラグインの作者です。まず、素晴らしい記事とビデオマニュアルをありがとうございます！このチュートリアルのリンクをプラグインの公式説明に使用してもよろしいでしょうか？
新しいリリースに追加できるので、もし役立つ機能が不足している場合は、お気軽にご連絡ください。
ちなみに、新しいタイトルの位置（画像の下と上）を持つ新しいバージョンがあります。
WPBeginnerサポート
こんにちは zviryatko 様
はい、リンクを追加していただいて構いません。感謝いたします。ただし、記事の全文コピーは許可しておりません。新しいバージョンについてお知らせいただきありがとうございます。
管理者
ステフ・リード
こんにちは、この最新バージョンを動作させようとしていますが（メニュー全体が壊れてしまい、リンクも含まれています）、サポートが完全に停止しているようです。@zviryatko、プラグインを維持するつもりはありますか？動作するときは本当に気に入っていますが、カスタムコーディングされたソリューションに切り替えることを検討しています。
zviryatko
ステフさん、こんにちは。
私は、テーマを修正するためのカスタムCSSで人々を助けるなど、小さな一歩を踏み出しています。しかし、古いテーマのサポートを修正し、ユーザーごとのサポートを改善したバージョンを提供する計画もまだあります。
イヴァン
Thanks!
hamied hassan
他のメニューにアイコンを追加したいのですが、この方法でできますか？
NenaRahin
ファイルを編集できません。カスタム画像サイズを追加したいのですが、保存しようとすると「ファイルを保存できません: "/var/www/html/wp-content/plugins/menu-image/menu-image.php" へのアクセス許可が拒否されました」と表示されます。
ファイルを編集しようとすると（Atom エディタで）常にこのメッセージが表示されます。助けていただけますか。よろしくお願いします。
Jenna
画像がタイトルと均等に並ぶようにする方法はありますか？そうすれば、画像が中央に配置されるのではなく、下部に揃います。
デビッド
これはきっと役立つでしょう。特に Font Awesome には常に十分なアイコンがあるわけではありません。
Catalin
プラグインが利用できません。新しいリンクをアップロードするか、プラグイン参照を変更してください。
CC
こんにちは！Menu-Iconsを使用していますが、そのプラグインではメニューテキストの上にアイコンを配置する方法がありません。Menu Imageプラグインはこのオプションを許可していますか？許可されていない場合、これを機能させるためにどちらかのプラグインをどのように調整すればよいですか。追伸：開発者ではないので、指示は簡単で詳細なほど良いです！どうもありがとう！
YJ
こんにちは、説明テキストボックスにショートコードを追加しました：[glt language="English" Label="English"]
このプラグインを使用した後、このショートコードは機能せず、ページにアイコンのみが表示されます。誰か助けてもらえませんか？
Chris
that worked really well, thanks!
Geoff Cox
こんにちは
「メニュー画像」プラグインを試してみて、自分のメディアライブラリからFacebookとYoutubeの画像を追加しました。
しかし！！Twenty Sixteen Themeを使用しており、ソーシャルメディアメニューにはジェネリコンが使用されていますが、それらはまだあります！
それらを自分の画像に置き換えたいです。Genericons を削除するにはどうすればよいですか？
Cheers
Geoff
Amanda
このプラグインは動作していません。しかし、アイコンのオプションはありますが、Font Awesome Menu Iconsはインストールされていません。テーマに組み込まれていて、このプラグインと競合している可能性がありますか？
Sean Vandenberg
Sheesh, thanks. This saved me lots of time I would have spent coding otherwise. Typically, I use ionicons or font awesome for menus – but the customer is always right!
再度、本当にありがとうございます！
ジェイ
基本的にこれをメニューラベルに追加しました
………………………..
基本的にテキストが白くなり、私の背景も白くなります。
適切な解決策があれば理想的です。
Evik
こんにちは、このプラグインは、元のテキストを非表示にする機能が機能すれば完璧なのですが。テキストの代わりに画像だけを表示したいのですが、「非表示」に設定しても、画像の手前にテキストが表示されたままです。何か原因をご存知ですか？
ご協力ありがとうございます。
マデリン
これらすべてはうまく機能していますが、ナビゲーションバーの各画像がテキストの横ではなく、テキストの後ろに固定されてしまっています。問題は、ナビゲーションバーメニューの各セクションがテキストと全く同じサイズであるため、スペースに収まるように画像を内側に押し込んでいることだと思います。パディングや画像サイズなどを色々試しましたが、うまくいきません。修正のお手伝いをいただけると幸いです！
マデリン
皆さん、これについて何か考えはありますか？本当に困っていて、簡単な解決策があるはずだと感じています！ありがとう、
マデリン
解決策を見つけたので、他の人の役に立つかもしれないので投稿します。ナビゲーションメニューの各項目に「min-width」要素を設定し、パディング、マージン、テキストサイズを縮小して、すべての項目が1行に収まるようにしました。画面サイズによって見た目が若干異なるため、100%理想的な解決策ではありませんが、これが私が考え出した最善の方法です。
Kristine
これ、ありがとうございます！クライアントの問題の解決策を見つけるために、あちこち探しました。すべてを置き換えるのではなく、ONE BUTTONを置き換えられたのが気に入っています。
Mahilet
ナビゲーションラベルがない場合、メニュー項目が削除されます。例えば、YouTubeアイコンがあり、テキストは不要でリンクだけ欲しい場合、「.」を入力します。
Tim Dehring
私が多用しており、推奨しているのは「Menu Icons」（https://wordpress.org/plugins/menu-icons/）です。Font Awesome、Genericons、その他多くの無料アイコンフォントをメニューアイコンとして選択できます。
マイク・ヘイル
Tim – Font Awesome 4 Menus https://wordpress.org/plugins/font-awesome-4-menus/ をサイトで使用していますが、そちらも確認してみます。ヒントをありがとうございます。
Tim Dehring
問題ありません、共有できて嬉しいです！