Notice: Function wp_register_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. This notice was triggered by the wp-associate-post-r2-product-editor-script handle. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /home/xs340029/favorite-fashion.com/public_html/wp-includes/functions.php on line 5865
WordPress│グローバルメニューにFontアイコンを設置するプラグイン | 好きなことだけ通信
スポンサーリンク
Categories: ブログ関連情報

WordPress│グローバルメニューにFontアイコンを設置するプラグイン

この『好きなことだけ通信』のグローバルメニューに”fontのアイコン”が設置されているのにお気付きでしょうか?固定メニューへのアイコン設置は、専用のプラグインが必要となります。そこでご紹介させて頂くのが固定メニューのタイトルへ、アイコンを設置出来るプラグイン『Font Awesome 4 Menus』です。

目次

「Font Awesome 4 Menus」

それでは早速プラグインをご紹介したいと思います。

こちらが「Fontアイコン」の設置イメージです。当サイト『好きなことだけ通信』のグローバルメニューになります。

アイコンが設置させているだけで、さりげないけどインパクトがあるメニューになっているかと思います。

設置手順(画像は全て拡大します。)

①それでは、まずプラグインをインストールしましょう。

『Font Awesome 4 Menus』  

プラグインの新規追加からなら、

Font Awesome 4 Menus

で検索して下さい。

②インストールしたら、プラグインを有効化しましょう。

③有効化したら、外観の中にある「メニュー」へ行きます。

④メニュー内、画面の右上にある、「表示オプション」をクリックして下さい。

すると上画像のように表示オプション画面が開きます。

⑤その中の『CSSクラス』のチェックボックスにチェックを入れて有効化しましょう。

するとメニュー構造内に、CSS class(オプション)が追加されています。

確認してみて下さい

⑥『CSS class(オプション)』へ設置したい任意のCSS classを入力したら設置完了となります。

fontawesomeアイコン一覧表

fontawesomeアイコン一覧表のリンクを貼っておきます。

fontawesome.icons  

ブログのカテゴリに合った「Fontアイコン」を探して下さいね。

例えば「Instagram」インスタグラムであれば

「Instagram」をクリックすると「Fontアイコン」のアイコンイメージとショートコードがありますので

fa-instagram

コピーしてペーストします。

CSS class(オプション)』に

fa-instagram

を入力したら設置完了です。

さいごに

固定メニューにアイコンがあると無いとでも些細な箇所ではありますが、印象もぐっと変わってくると思います。

アイコンをすぐに設置しなくても、とりあえずいつでも設置出来るようにプラグインを入れておいて設定だけでもしておくといいかもしれませんね。

知っていて損はしないカスタマイズだと思います。

今回も少しでも皆様のお役に立てれば幸いです。

スポンサーリンク
なま たまご

Disqus Comments Loading...