WordPressのカスタムメニューにアイコンフォントを表示させる方法

wp-icon-fonts

WordPressのカスタムメニューにアイコンフォントを表示させる方法を紹介したいと思います。
サイトメニューにアイコンを利用すれば、どんなメニューなのかもひと目で分かりやすくなりますね。
また、アイコンフォントなので表示が軽く、Retinaディスプレイもボケずに表示がされます。
今回、使用するアイコンフォントは【Font Awesome】を利用したいと思います。
Font Awesomeの利用方法に関しては、下記をご参考下さい。

WordPressのカスタムメニューにアイコンフォントを表示方法

それでは、実装方法を紹介したいと思います。

カスタムメニューの有効

まずは、現在WordPressのカスタムメニューが有効でない場合は、下記コードをテーマ内のfunctions.phpに記載して下さい。
もしも有効であればここは、スルーして下さい。

/*-------------------------------------------*/
/*	カスタムメニュー
/*-------------------------------------------*/
register_nav_menus(array(
  'navigation' =>'ナビゲーション'
));

カスタムメニューのul要素にクラス名を付加

次に、カスタムメニューを表示させるテンプレートタグ wp_nav_menumenu_classでul要素にクラス名を付加します。
下記コードを貼り付けて下さい。

<?php wp_nav_menu(array(
	'theme_location'=>'navigation',
	'container' => '',
	'menu_class' => 'head-menu', //←追加する
));?>

上記コードでul要素に.head-menuというクラス名が付加されます。

メニューのli要素にクラス名を付加する

この設定は、管理画面の外観 > メニューでアイコンフォントを表示させたいメニューにクラス名を入力していきます。
※クラス名を入力していく時にFont Awesomeで利用されているクラス名と重複しないようにしましょう。

wp-icon-font

もしもクラス名が表示されていない場合は、右上の表示オプションをクリックしてCSSクラスにチェックをすると表示されるようになります。

アイコンフォントの必要ファイルの読み込み

次に一番重要なFont Awesomeのアイコンフォントを利用するCSSを読み込みます。
下記コードをfunctions.phpに貼り付けてください。

/*-------------------------------------------*/
/*	WebアイコンフォントFont AwesomeのCSSを読み込む
/*-------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'webendev_load_font_awesome', 99 );
function webendev_load_font_awesome() {
	if ( ! is_admin() ) {
		wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', null, '4.2.0' );
	}
}

または、下記コードをhead要素内に貼り付けて下さい。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

上記コードのどちらか片方を行って下さい。
どちらも最終的に同じコードとなりますので、やりやすい方で大丈夫だと思います。
上記コードでは、バージョンは、4.2.0を利用しています。
最新のバージョンなどは、下記リンク先でお確かめ下さい。

Font Awesome

CSS

最後にCSSを記載すれば、無事に表示されます。
今回は、メニューに王道のこちらのアイコンフォントを表示させたいと思います。
Unicodeをコピーしておいて下さい。
下記CSSコードをご参考下さい。

ul.head-menu .ico-home a:before{
	font-family: FontAwesome;
	padding-right:3px;
	content: "\f015"/*←にUnicodeの数字を貼り付ける*/
	}

paddingは、お好みで変更して下さい。
また、上記では、一つのメニューに対してですが、複数のメニューに違うアイコンフォントを表示させる場合は、下記のようなCSSで大丈夫だと思います。

ul.head-menu a:before{
	font-family: FontAwesome;
	padding-right:3px;	
	}
/*個別にアイコンフォントを指定する*/
ul.head-menu .ico-home a:before{
	content: "\f015"/*←にUnicodeの数字を貼り付ける*/
	}
ul.head-menu .ico-contact a:before{
	content: "\f1d8"/*←にUnicodeの数字を貼り付ける*/
	}

上記のように個別にアイコンフォントを表示させたいメニューのクラス名を指定していけば、OKです。
個別に指定する場合は、忘れずに管理画面の外観 > メニューでクラス名を事前に付加しておいて下さい。

最後に

どうしても、上記のCSSなどが面倒であれば、Font AwesomeのCSSを読み込んで、Font Awesomeのサイトに行き下記のようなアイコンフォントのコードをコピーします。

<i class="fa fa-angellist"></i>

上記のコードを直接、【ナビゲーションラベル】に貼り付けます。

wp-icon-font2
wp-icon-font3

すると上記のようにメニューにアイコンフォントが、表示されます。
あとは、Font AwesomeのCSSを利用するか、独自でスタイルを調整するだけで簡単に表示出来ますね。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS font-awesome

商用利用無料のWebアイコンフォント【Font Awesome】使い方

NEXT hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.レオル隊(上級) を攻略したパーティメンバー