まず、最初にカテゴリー設定が必要ですが、カテゴリー作成方法は皆様はできていると思いますので一旦省略させて頂きますね。
ヘッダーメニューの完成図
メニューの設定箇所は下記の手順設定画面から移動できます。
『Wordpressサイドバー』 → 『外観』 → 『メニュー』
主に設定する項目はこちらです。
・ナビゲーションメニュー
ナビゲーションメニューはヘッダーメニューに表示される名称になります。
ここで複雑な名前にするよりはシンプルでわかりやすい名称にしてあげる事によって
見てすぐに何についてのカテゴリーなのかを理解してもらえると思っています。
ヘッダーメニューにアイコンを設定する方法
メニュー文字の横にアイコンを挿入していきたいのですが、アレンジをする前に下準備として
『Font Awesome』の導入をしていきます。
（Font Awesomeはアイコンを提供してくれるサイトです。）
下記コードをコピーします。
<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>
コードの貼り付ける場所は → 外観 → テーマエディターから親テーマを選択し
『footer.php』の</head>タグ直前に貼り付けてください。
挿入前
挿入後
プログラミング詳しい方だと、なんでFontAwesomeの導入コードを<head></head>の中に挿入しないのかと疑問に思われる人もいるかも知れませんが、<head></head>タグ内にFontAwesomeの導入コードを挿入するとサイトのスピードが低下する原因になるためだそうです。
JavaScriptというプログラミング言語で囲って、アイコンを遅延ロードさせるようになっているのでSEO的にも、FontAwesomeの導入方法はこの方法が1番ベストと言う事でした。
FontAwesomeの導入はこれで以上になるので、次にFontAwesomeのサイトを確認してアイコンを探しましょう。
FontAwesome ←こちらをクリックします
こちらの画像がページ上に表示されるので検索するところに『Twitter 』を入力すると
黒色が無料で灰色が有料で使用できるアイコンとなっています。
ここにお金をかける必要はないと思いますので、気に入った無料アイコンを探して見て下さい。
ちなみに、FontAwesomeでアイコンの検索をするときは英語で検索する必要があるので、もしカテゴリーの英語名称がわからない場合などには、Google翻訳の『和英』を使用して、ヒントとなる英語を調べて見ましょう。
気に入ったアイコンが見つかったらそのアイコンをクリックしコードをコピーします。
例えば車のアイコンを探す場合は『CAR』と検索
コードが出てくるのでそれをコピーして貼りつけをします。
コピーしたコードの貼る場所は
WordPress → 外観 → メニュー にあるカテゴリー部分のアイコンを追加したいメニューです。
元々、何か文字が挿入されていると思いますが設定している文字の前にコピーしたコードを挿入します。
挿入すると下の画像のようにアイコンが追加されます。
このままでも良いと思う方もいると思いますが、少しアイコンとメニュー文字を話したいと言う方は
先程、挿入したナビゲーションメニューのメニュー文字の前にスペースを入れて見て下さい。
複数のメニューをお持ちであれば同様に設定をしていただければ完成です。
メニューの間隔が気になる方は
カスタマイズページ → メニューのカラー設定を選択 → PCヘッダーメニュー
ここから、メニュー幅を希望の幅に調整が可能です。
もう一つ別の方法は
このCSSは同じくカスタマイザー内の『追加CSS』に貼り付けていただければそのまますぐに適応されます。
貼り付けるコードはこちらです。
/*ヘッダーメニュー幅*/ header .smanone ul.menu li{ width: 155px !important; }
このコードを使用することによって、均一にメニューを表示させることが出来るので、サッと追加しておきましょう。
また、WordPressのヘッダーメニュー全共通で使用できているので、こちらはAFFINGER5ユーザー以外でも使用可能です。
