WordPress

  (最終更新日:2016.05.3)

【WordPress】プラグインでメニューにアイコンを表示する方法

WordPressのメニューといえば、上部に表示されているグローバルメニュー(ナビゲーションメニュー)ですが。そこに文字だけじゃなくてアイコン(例えば下図)を表示したいことってありますよね。

wordpress-plugin-FontAwesome4Menus-title

方法はいろいろありますが、ここではプラグインを導入することで一番簡単に出来る方法を解説したいと思います!

Font Awesome 4 Menusプラグインを使う

メニューにアイコンを挿入して表示するには、《Font Awesome 4 Menus》というプラグインがおすすめです。

プラグイン→新規追加》から《Font Awesome 4 Menus》を検索してインストールを行います。 インストール完了後に有効化するのをお忘れなく。

使い方

まずはメニューのCSSクラス機能を有効化します。
WordPress管理画面から《外観→メニュー》をクリック。

表示オプション》をクリック。

CSSクラス》にクリックでチェックを入れて有効化します。

CSSクラスを有効化すると、メニューの設定画面に《CSS class(オプション)》というのが表示されるようになっているはずです。こちらにアイコン(Font Awesome)のCSSクラスを入力していくことになります。

Font AwesomeのCSSクラスは Font Awesome Icons から検索して取得できます。 例としてホームアイコンを検索してみましょう。

検索文字列として《Home》を入力(②)すると、下段に検索結果のアイコン一覧が表示されます。ここで使いたいアイコンをクリック(②)します。

するとアイコンのサンプルがいろいろなサイズで表示されます。ここで、下図の場所に記載されているのがFont AwesomeのCSSクラス名になります。 この文字列をコピーします。

先ほどのメニューカスタム画面の CSS Class にコピーしたクラス名を貼り付けます。

これで完了。最後に《メニューを保存》をクリックして保存完了です。

ブログ画面を確認してみると無事にアイコンが表示されるようになっています。

あとは同じようにアイコンのCSSクラスを検索して貼り付けての繰り返しですね。 どんなアイコンがあるのかは、じっくり Font Awesome Icons のサイトを見てみればわかりますよー。 ちょっと面倒ですけどね‥。

ではでは!

関連記事

  1. WordPress

    Batch Cat : WordPressでカテゴリーの一括変更を超簡単にできるプラグイン

    ちょっとWordpressで不要なカテゴリーが増えてきたなぁ と感じて…

  2. WordPress

    【WordPress】Markdown記法で投稿を楽々入力する方法

    どうも。自分のノウハウはMarkdownを使って esa.io にガシ…

  3. WordPress

    【WordPress】Simple Image Sizesのアップデート後にsyntax error…

    WordPressのプラグイン『Simple Image Sizes』…

  4. WordPress

    WordPressテーマのMAGで最終更新日を表示する方法

    このブログのテーマでも利用しているWordPressテーマのMAG(T…

  5. WordPress

    Simplicityを1.7にしたらタイトルが表示されなくなった事件の顛末

    シンプルビューティー(ビューティーは違うような気もする‥)で人気急上昇…

  6. WordPress

    【WordPress有料テーマ比較】MAGとアルバトロスの決定的な違い

    WordPressの有料テーマとして大御所中の大御所といえば、TCDが…

コメント

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

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

最近の記事

Twitter

  1. LINE

    プレリリースのLINE Playが微妙に楽しくなくて残念な件。これからに期待した…
  2. 飲料水

    日清ヨーク飲料水「ゆずレモン」。ゆずの芳醇な香りとレモンの酸っぱさが相性バツグン…
  3. au

    au WALLETをトイザらス(ベビザらス)で使ってみた
  4. 気になるアイテム

    【クリンスイ タンブラー】オシャレで可愛い浄水機能付きのタンブラー。
  5. テレビ番組

    世界初!ダイオウイカの泳ぐ姿を捉えた映像がNHKで13日に放映へ。これは録画して…
PAGE TOP