【AFFINGER5】WordPressのメニューに画像を入れるカスタマイズ方法を解説

ワードプレスカスタマイズ

WordPress(ワードプレス)のメニューをよりわかりやすく見せる方法を知っていますか?本記事ではWordPress(ワードプレス)のメニューに画像を追加する方法を解説します。

 

完成後のイメージはこんな感じです。

画像追加イメージ

 

AFFINGER5(アフィンガー)でのカスタマイズ方法として紹介しますが、基本的には同じ考え方で他のワードプレステーマでも応用することができますよ!

 

本記事はこんな方におすすめ

  • WordPress(ワードプレス)のヘッダーメニューをカスタマイズしたい
  • AFFINGER(アフィンガー)でどんなカスタマイズができるか知りたい

 

詳しく解説していきます。

 

 

WordPress(ワードプレス)のヘッダーメニュー作成方法

WordPress(ワードプレス)のヘッダーメニュー作成方法を紹介します。

 

もうカテゴリは既に作ってあるから、早くカスタマイズ方法を教えてほしい!という方は読み飛ばして次へ進んでください。

 

WordPress(ワードプレス)のヘッダーメニュー作成方法は基本的にどのテーマでも同じ方法です。

 

ヘッダーメニュー作成方法

  • カテゴリを作る
  • メニューを作る

 

カテゴリを作る

まずはカテゴリを作りましょう。

 

ワードプレスダッシュボード > 投稿 > カテゴリーをクリック

カテゴリー名とスラッグを追加します。スラッグはURLのことです。

カテゴリ追加

 

カテゴリは多くなってしまうと、わかり辛いので3〜5個程度に収めるようにしましょう。

もし増やしたい場合は、子カテゴリに設定するなど、最初に全体のサイトの構成を考えて決めていきましょう。

 

メニューを作る

次にメニューを追加します。

 

ワードプレスダッシュボード > 外観 > メニューをクリックします。

「メニュー構造」の中に作成したカテゴリーをドラッグして追加します。

ここでは、「メイン」という名前をつけて説明します。

外観 メニュー

 

作ったメニューをヘッダー用として設定しましょう。

同様に、「外観」> メニュー > 位置の管理 > ヘッダー用メニューに上記で設定した「メニュー」を選んで追加します。

メニュー 位置を設定

 

これでヘッダー用のメニュー作成完了です。

 

WordPressのメニューにアイコン画像を追加しよう!【アフィンガーカスタマイズ】

 

作ったメニューにアイコン画像を追加していきましょう。

メニューはユーザーが訪れた際に一番最初に目に付く重要な箇所です。

 

文字を読むと同時に、アイコン画像のイメージで見せると、より直感的にどんな記事があるかを伝えることができますよ。

 

ではステップの解説です。

 

メニューにアイコン画像を追加する

  • Font Awesomeを導入する
  • ヘッダーメニューにコードを追加する

 

 

Font Awesomeを導入する

Font Awesomeというサービスを使うと、簡単に画像を追加することができます。無料で使えて、ダウンロードなども不要です。

 

Font Awesome

 

導入方法を解説します。

 

Font Awesome用のスクリプトを追加する

スクリプトと聞くと難しく聞こえるかもしれませんが、コピペするだけなので安心してください。

 

スクリプトを追加する場所

ワードプレスダッシュボード > 外観 > テーマエディター

WING-AFFINGER5を選択し、テーマフッター(footer.php)をクリックします。

テーマエディター

 

コピペするスクリプト

以下のコードを、上記の画像のように</body>の前にコピペします。(そのまま貼り付けOK)

 

<script type="text/javascript">
var mycss=function(){// mycss関数を定義。{}内の処理を実行。
var l=document.createElement("link");// link要素をlに代入。
l.rel="stylesheet";// lにrel="stylesheet"属性を付与。
l.href="https://use.fontawesome.com/releases/v5.8.1/css/all.css";// lにhref属性を付与。
var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入
s.parentNode.insertBefore(l,s);// sの直前にlを出力
};
window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行
</script>

 

 

Font Awesomeにアクセスして画像を選ぶ

Font Awesomeから、メニューアイコンに設置したい画像を選びましょう。

海外のサイトのため英語で入力します。

 

例えば、「おすすめビジネス書」であれば、「book」と入力します。

すると、いくつか候補が出てきます。

  • 黒い画像→無料
  • グレーの画像→有料

なので、無料の画像から選びましょう。

 

「book-open」というアイコンが気に入ったので、クリックします。

font awesome

 

左上の<i>〜</i>というところをクリックしましょう。するとコピーされます。

 

<i class="fas fa-book-open"></i>

 

次に、このコピーされたコードをヘッダーメニューに貼り付けます。

 

ヘッダーメニューにコードを追加する

 

ダッシュボード > 外観 > カスタマイズ から先ほど作ったヘッダーメニューの「メイン」をクリックします。

ナビゲーションラベルというところに、Font Awesomeでコピーしたコードを、日本語テキストの前以下のように追加しましょう。

外観カスタマイズ

 

間が詰まってしまうので、日本語テキストの先頭に半角スペースを入れておきましょう。

 

以下が実際に入力している内容です。

<i class="fas fa-book-open"></i> おすすめビジネス書

 

これで画像の追加は完了です。

 

完成イメージはこんな感じです。

画像追加イメージ

 

簡単な作業で、サイトのイメージがすごく変わるので、ぜひ試してみてくださいね!

 

あわせて読みたい
AFFINGER how to
AFFINGER5(アフィンガー)の使い方を図解付きで解説【よく使うおすすめ装飾】

続きを見る

 

-WordPress
-, , ,

© 2020 NOMAD LIFE DESIGN