【WordPress】グローバルメニューにアイコンだけを表示する方法【簡単です】

wordpress

WordPressのグローバルメニューにアイコンだけ表示する方法を解説します。

グローバルメニューにアイコンやアイコンだけを表示すると、サイトを見ているユーザーにとってわかりやすくなるので、親切なサイトになります。

また、簡単に実装できるので、ご安心ください。

完成イメージ

メニュー部分

上記の画像のようにアイコンだけをグローバルメニューに表示していきます。

スポンサーリンク

グローバルメニューにアイコンだけを表示する方法

手順が2つあるので、サクッと解説しつつ実装します。

  1. アイコンフォントの準備をする
  2. WordPressのメニューを編集

1.アイコンフォントの準備をする

まずは、アイコンフォントを実装するために下記のコードをheader.phphead部分にコピペします。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

このコードを実装することで、アイコンが使えるようになります。

アイコンを選ぶ

次に自分が実装したいアイコンをこちらのサイトから選んで、コードをコピーしましょう。
Font Awesome

fontawesomeの画像

上記の画像のようにコピーすればOKです。

2.WordPressのメニューを編集

ではつぎに、WordPressのダッシュボードから「外観→メニュー」を選択し、

カスタムリンクを選択して先程のコピーしたコードを貼り付ければOKです。

wordpress管理画面

これで、グローバルメニュー部分にアイコンだけを表示することができます。

あとは自分が好きな順番にメニュー部分を変えたり、アイコンを追加したりできます。

それでは以上です。
参考になれば幸いです。