WordPressのフッターメニューの作り方/Cocoon

[図_1]
フッターメニュー配置位置

「フッターメニュー」はwebページ上では以下の位置（ページの最下部）に配置されます。
ヘッダーメニュー同様にフッターロゴの表示も可能です。
また、スタイルシートでコードを追加するなど特別な変更がない限り、この配置は変えられません。

[図_2]
ダッシュボードメニュー画面

フッターメニューの設定方法を説明していきます。フッターメニューは外観設定から行います。

① ダッシュボードメニューの[外観]より、
② [メニュー]をクリックします。

[図_3]
メニュー画面

ここでは先に作成した「ヘッダーメニュー」が表示されていますが、この時点で「フッターメニュー」はまだ作られておりません。新規メニューより作成します。

③「新しいメニューを作成しましょう。」をクリックします。

[図_4]
メニュー構造画面

④ メニュー名ですが、何でも良いです。自身で分かり易い名称にして下さい。ここではベタに「フッターメニュー」と入力します。
⑤ ✅フッターメニューに✔チェックします。
⑥ [メニューを作成] をクリックします。

[図_5]
メニュー項目追加画面

⑦ メニュー項目を選び編集します。
[固定ページ] は固定ページへのリンクを追加します。
[投稿] は投稿ページへのリンクを追加します。
[カスタムリンク] は外部サイトへのリンクを追加します。
[カテゴリー] はカテゴリ項目をそのまま追加します。

[図_6]
メニュー画面

⑩ ここで追加されたメニュー項目はマウスドラッグで階層や順位を入れ替えることが可能です。

この辺りの説明は、こちらの「Cocoonのヘッダーメニューの作り方」のページでも詳しく説明しております。宜しかったらこちらも参照して下さい。

[図_7]
フッターメニュー画面

フッターメニューはこの様に表示されます。スタイルシートでコードを追加するなど特別な変更がない限り、基本的にメニューは1行で表示されます。

メニューの横に付いているアイコンについては「Font Awesome」のページで説明しております。

[図_8]
フィッターウィジェット配置画面

「フッターウィジェットメニュー」を使用すると3ペイン表示が可能になります。コンプライアンスから組織図、関連企業まで列挙するような超大企業サイトではよく見かける表示形式です。トップページでユーザーの交通整理が必要になるほどサイトの情報量も閲覧者数も多いと言う事です。

[図_9]
ダッシュボードメニュー画面

フッターウィジェットの設定方法を説明していきます。ウィジェットは外観設定から行います。

① ダッシュボードメニューの[外観]より、
② [ウィジェット]をクリックします。

[図_10]
ウィジェット設定画面

ウィジェットの設定は今一つ使いづらいです。もう少し直観操作が行えるように設計して欲しい所です。

③ 中央を隔てて左カラムのウィジェット（ブログパーツ）を右カラムの配置エリアにドラッグ＆ドロップします。

[図_11]
フッター中画面

「テキスト」タイプのウィジェットを配置エリア「フッター中」にセットしました。
④ ウィジェットのカスタマイズが行えます。

オリジナリティのあるサイトデザインにしようとするとどうしてもHTMLの知識が必要になります。

[図_12]
デラックスメニュー配置

フッターウィジェットとフッターメニューを2つ同時に表示させる事も可能です。
その場合、配置は左の様になります。
お使いのテーマによって配置はかわりますが、このパターンが一般的です。

[図_13]
Offtoon blogフッター画面

こちらが実際の表示画面です。お使いのテーマにもよりますが、フッターメニューは右寄せになります。
サイドウィジェットと違い、フッターメニューはトップメニュー同様、どのページを開いた時でも固定で必ず表示されます。

[図_14]
ダッシュボードメニュー画面

フッターロゴはCocoon設定より行います。唐突に始まるCocoonの説明。Cocoonユーザーでない方は本当にスイマセン。

① ダッシュボードメニューの[Cocoon設定]より、
② [Cocoon設定]をクリックします。

[図_15]
Cocoon設定画面

① [フッター] のタブをクリックします。これだけ多いと探すの大変。
② フッターロゴ項目よりフッターに使う画像をアップロード出来ます。
③  [変更をまとめて保存]  をクリックします。
フッターロゴを特に指定しない場合、トップメニューに使われているロゴが表示されます。

[図_16]
ダッシュボードメニュー画面

サイトの外観表示を変更する場合は、スタイルシートに追加でコードを記述する必要があります。

① ダッシュボードメニューの[外観]より、
② [テーマファイルエディター]をクリックします。

[図_17]
子テーマ・スタイルシート画面

③ テーマファイルより[スタイルシート]をクリックします。
④ スタイルシートにロゴサイズをオリジナルサイズのまま表示させる為のコードを付け加えます。（コード2行、注釈含めて3行）
⑤  [ファイルを更新]  をクリックします。

/*フッターロゴサイズ*/
.footer-bottom-logo img {
    height: auto;
}

フッターボトムロゴの画像の高さを自動で修正せずにそのまま出力させるコードです。コピペで使えます。

[図_18]
Offtoon blogフッター部（昼）

この様にフッターが出来上がりました。シンプル is ベストで素晴らしい出来栄えではないでしょうか。

と言うよりも、メニュー項目を増やすほど記事量がありません！
大きく育てて行きたいものです。

[図_19]
フッターロゴの配置画面

実はこのフッターロゴ、…ロゴと言うよりサイズ的にバナーですが、フッターウィジェットの部分に覆い被さるように思いっ切りはみ出しています。

特大サイズでバナーを入れるなんて人いないのでしょうね^^;

[図_20]
Offtoon blogフッター部（夜）

バナー画像はめちゃくちゃ凝っていて、なんと透かしが入っております！お使いのブラウザでナイトモードに設定して頂くとブラウザ画面の白黒コントラストが反転するのですが、このとき満天の星空の下にぼんやり輝くビル群、そしてアッガイとハイゴッグが出現します。