3分でできた!WordPressグローバルメニューにアイコンを設定する方法

Font Awesome Icons

カスタマイズをするのも結構楽しいですね。ちょっと備忘録としてまとめておきます。

カテゴリーが表示されるグローバルメニュー。これにちょっとアイコンを入れてみました。ちょっとしたことなんですけど、なんだかブログがオシャレになりますね。って単なる自己満足です。

こういうのを調べていたらどんどん時間過ぎて、記事書くの忘れてしまいます。いけないいけない。ブログは記事が大事ですからね。

でも、カスタマイズも時にはするのもおもしろくて、どんどんブログへの愛着が湧いてきますよ。めちゃくちゃ誰でも簡単、たったの5分でできるカスタマイズです。

では、どうぞ!

スポンサーリンク

グローバルメニューにアイコンを設定する簡単な方法

Font Awesome 4 Menusプラグインを利用する

WordPressを利用すると、プラグインのお世話になることもありますね。当ブログは、開始してから、わいひらさんの「Simplicity」にお世話になっています。

利用したプラグインは、Font Awesome 4 Menusというプラグインです。それを利用すると、グローバルメニューにアイコン設定をすることができます。こんな感じ。

グローバルメニュー

なんだかいい感じですね(単なる自己満足)。

プラグインで新規追加

まずは、「プラグイン」⇒「新規追加」でFont Awesome 4 Menusを検索します。

Font Awesome 4 Menus

メニューで「CSSクラス」にチェック

次に、「外観」から「メニュー」ボタンをクリックします。

Font Awesome 4 Menus

画面右上にある「表示オプション」を押すと、下記の画面が現れますので、「CSSクラス」にチェックを入れます。

Font Awesome 4 Menus

これで準備は完了!!

Font Awesome Iconsから好きなアイコンを選ぶ

Font Awesome Icons

次に「Font Awesome Icons」のサイトを見てください。これは、いろんなアイコンを用意してくれているサイトです。全然知りませんでした。

サイトに行くと、100以上のアイコンが用意されています。こんな感じ。

Font Awesome Icons

好きなアイコンをクリックしてみましょう!

Font Awesome Icons

すると、上記画面が出てきますので赤枠で囲ったところをコピーします。

カテゴリーで貼り付けするだけ!

次に、Wordpressのダッシュボード(管理画面)に戻ります。

もう一度「外観」⇒「メニュー」を選択しましょう。さきほどコピーしたアイコンを貼り付けたいカテゴリーの「編集」をクリックします。

Font Awesome 4 Menus

CSS class(オプション」に貼り付けるだけ!!

これだけでさきほど冒頭に見てもらったように、グローバルメニューにアイコンを設定することができます。

Font Awesome 4 Menus

めっちゃ簡単です!!!

これだけなので、ものの3分もあればできますよ。カテゴリーが多かったので、私は結構時間がかかりましたけど。アイコン眺めるだけでも楽しかったです。

このほかカテゴリー関連のプラグイン

WordPressでは、カテゴリーの順番の入れ替えができなくて困っていませんか?私も記事数が増えるにつれて、カテゴリーを増やしていたので、順番がバラバラ。。。

そんなときには、「Taxonomy Order」というプラグインが便利です。

このプラグインを入れておくと、自由にカテゴリーの順番を変更することができますよ。

たまにカスタマイズもいいね

カスタマイズをどんどんする知識が欲しいなぁと思います。私はweb知識がないので、記事を書く方を優先していますが。

たまにこうしてブログをいじるのも面白いものですね。ブログは自分オリジナルにカスタマイズができるので、愛着が湧いてきて、また更新の励みにもなります。

今回のグローバルメニューにアイコンを設定する方法をまとめておきます。

ポイント
  • Font Awesome 4 Menusのプラグインを利用する
  • Font Awesome Iconsからアイコンを選ぶ

たった2つのことをするだけ!です。

私はレンタルサーバー「エックスサーバー」+テーマ「Simplicity」を利用していますが、不具合なく使えましたよ。

では。

あわせて読んでみる ⇒   WordPress初心者にテーマ「Simplicity」は断然オススメ!記事を書くことに専念させてくれます