WordPressのスマホ用ヘッダのカスタマイズ

WordPress+Cocoonで作成しているブログで、スマホデバイス用のヘッダをカスタマイズしました。
当ページでは、以下の図のような「ヘッダモバイルボタン」と「ヘッダモバイルメニュー」を作成するための設定内容についてまとめています。
 

ヘッダーモバイルボタンのカスタマイズ

ヘッダーモバイルボタンの追加

WordPress管理画面メニュー「Cocoon設定」の「モバイル」タブから「ヘッダーモバイルボタン」を選択することでヘッダーモバイルボタンが表示されるようになります。詳細は公式ページ参照。
「常にサイトヘッダーロゴを表示する」のチェックを外すことで既存のヘッダを非表示にできます。

色の変更

WordPress管理画面メニュー「外観>テーマファイルエディタ」へアクセスし、Cocoon子テーマのstyle.cssに以下のコードを追記します。 「background-color」に背景色、「color」に文字色を指定します。

ヘッダーモバイルメニューのカスタマイズ

WordPress管理画面メニュー「外観>メニュー」からメニューを作成し、「ヘッダーモバイルメニュー」にチェックを入れて保存すると、スマホデバイスでもメニューが表示されるようになります。
ただ、この初期状態では不格好なため、カスタマイズしていきます。

ヘッダーモバイルメニューを横スクロール表示

WordPress管理画面メニュー「外観>テーマファイルエディタ」へアクセスし、Cocoon子テーマのstyle.cssに以下のコードを追記します。

ヘッダーモバイルメニューにアイコンを挿入

各メニュー項目の頭にアイコンを追加する手順です。
WordPress管理画面メニュー「Cocoon設定>全体>サイトアイコンフォント」よりFont Awesomeのバージョンを確認します。
バージョン5を利用の場合は、以下のFont Awesomeのサイトからお好みのアイコンを検索します。
 
検索したアイコンのHTMLを「ナビゲーションラベル」に以下のように追加することでアイコンが追加できます。
 
アイコンと文字の間隔を調整したい場合、以下のようなCSSを追加します。
 
ナビゲーションラベルが存在しない場合は、以下のようなコードをjavascript.jsへ追加します。