この記事で解決できるお悩み
- WordPress（ワードプレス）のメニューに画像を追加する方法を、知りたいです。AFFINGER（アフィンガー）でどんなカスタマイズができますか？
こんな悩みを解決できる記事を書きました。
完成のイメージです↓
カテゴリーの作成
WordPress → 投稿 → カテゴリーに進みます。
メニューの作成
WordPress → 外観 → メニューに進みます。
その後、Wordpress → 外観 → メニュー→ 位置の管理 →ヘッダー用メニューに進みます。
Font Awesomeで画像を設定
Font Awesome で無料で画像を設定していきましょう。
① スクリプトをコピーして、貼り付けします。
WordPress → 外観 →テーマエディター → WING-AFFINGER5 → テーマフッター(footer.php) に進みます。
「スクリプト」コピー↓ </body>の前にコピーします。
<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 → 画像の選択 → <i>〜</i>の部分をコピー
*画像の検索は、英語で行いましょう。
③ ヘッダメニューへ<i>〜</i>を貼り付けます。
WordPress → 外観 → カスタマイズへ進みましょう。
このように入力します 「<i>〜</i> 反映させたい文字」
<i class="fas fa-globe-americas"></i> 暮らし
このように完成しました！