【WordPress】　ブログのヘッダー、フッター、サイドバー制作

　※　元は「ヘッダーメニュー」のページ。2025年、「ヘッダー、フッター、サイドバー制作」のページにリニューアル

　「WordPressの設定」の続き。

　ブログを作り始めて、真っ先に手を加えたくなる箇所は、
　ページの外観とりわけタイトルが入るヘッダー　header。

　ヘッダー、フッター　footer、サイドバー　sidebarは、
　ブログの上・下・横。

　WordPress使い始めの頃は、ウィジェットやメニューの使い方が分かりにくかった。
　慣れ。
　ウィジェット　Widgetは、いわゆるブログパーツ。
　外観　－　ウィジェット
の画面左に
　・　［サイト内］検索
　・　タグクラウド
　・　［投稿］カレンダー
などのブロック＝ウィジェット（ブログパーツ）が並んでいる。
　作成したプロフィールや固定ページなどもウィジェットとして使える。
　画面右にブロックをドラッグして、ブログの好きなところに設置できる。

　WordPressインストール後、既にいくつかサイドバーに入っていたが、
　・　［サイト内］検索
　・　カテゴリー
　・　プロフィール
　・　アーカイブ
の４つを入れた。

　＋）アーカイブの代わりに人気記事を入れたブログもある。

　ヘッダーメニュー、フッターメニューもウィジェットとみなせるが、こちらは
　外観　－　メニュー
にて作成・設置する。

　ヘッダー、サイドバーは、PCとモバイルで表示が異なる。

　PC用、モバイル用２通り作るのは大変だが、
　レスポンシブデザイン対応のテーマを使えば、適宜切り替えて表示してくれるので助かる。

　以下、テーマをインストールした後の作業。

ヘッダー制作

　ヘッダーのうちタイトルは、最初、
　設定　－　一般［設定］のサイトのタイトルが表示される。
　当ブログの場合、「半永久ネット」の文字。

　画像に変えたい場合、
　外観　－　ヘッダーや外観　－　背景もあるが、
　（インストールした）テーマでも設定できる。
　※　当ブログはCocoonを利用

　Cocoon設定　－　ヘッダーに
　ヘッダーロゴ、ヘッダー背景画像の項目がある。ここに各々アップロードした。

ヘッダーメニュー

　ヘッダーメニューは、タイトル下の「帯」部分。グローバルナビ［ゲーション］メニューとも。

　当ブログは（今のところ）親ブログのリンク１つ張っただけだが、
　親ブログのヘッダーメニューのメニュー項目は６つ。
　スマートフォンの場合、メニュー項目を増やしすぎるとメニューが画面の多くを占有してしまうので、最大４～６ぐらいまでに抑えたほうが良さそう。

　外観　－　メニュー　－　メニューを編集で、
　メニューを作成（例えばメニュー名：header）。

　画面左のメニュー項目を追加から
　・　固定ページ
　・　投稿
　・　カスタムリンク
　・　カテゴリー
を選択して、画面右のメニュー構造へ移していく。
　チェックして「メニューに追加」もしくはドラッグ。

　上の画面は昔のキャプチャーなので、今とはメニューが違っている。
　コロコロ変わっている。

　副項目（サブメニュー項目）は、メニュー項目の右側にある矢印をクリックして、「移動」の「○○○　下の階層」を選択する。
　ただし、スマートフォンなどのモバイルでは表示されない。
　仕様のようだからしようがない。

　ナビゲーションラベルとは別に「説明」を加えることもできる。

　そのままだと「説明」欄は表示されない。
　画面の一番上にある
　表示オプションの「詳細メニュー設定を表示」の「説明」にチェックを入れると
　「説明」欄が表示される。

　作成し終えたら、
　メニュー設定　－　メニューの位置のヘッダーメニューとヘッダーモバイルメニューにチェックを入れて、
　メニューを保存。
　位置を管理から選んでも同じ。

モバイルメニューについて

　メニューの副項目（サブメニュー項目）は、モバイルではメニューの下に表示されない。
　その代わり、モバイルメニューの横三本バー（ハンバーガーメニューという名がある）をタップするとメニュー、サブメニューが表示される。

　モバイルメニューは、Cocoonの場合、フッターモバイルボタンがデフォルト。

　Cocoon設定　－　モバイルのモバイルメニューで、
　ヘッダー・フッターモバイルボタンに変更すると
　ヘッダーにもモバイルメニューが表示される。
　フッターにあったメニューボタンと検索ボタンがヘッダーに移った。
　モバイルボタンの「常にサイトヘッダーロゴを表示する」がチェックされていれば、ロゴも表示される。
　フッターのモバイルメニューには新たにシェアボタンが加わった。

フッター制作

　フッターは
　© 2019 ふシゼン
と表示していただけの箇所。
　当ブログの場合、
　© 2025 半永久ネット

　自動表示。
　Cocoon設定　－　フッターのクレジット表記から選択。

　そろそろGoogleアドセンスに申し込んでみようかな、という段階になって
　サイトマップ、お問い合わせ、プライバシーポリシー
の３項目をフッターに設置した。

　フッターづくりもヘッダーづくりとほぼ同じ。

1. 　固定ページでサイトマップ、お問い合わせ、プライバシーポリシーのページを各々作成　　　
2. 　外観　－　メニュー　－　メニューを編集で、
   　メニューを作成（例えばメニュー名：footer）
3. 　メニュー項目を追加の固定ページから
   　サイトマップ、お問い合わせ、プライバシーポリシーを
   　メニュー構造へ移す（チェックして「メニューに追加」もしくはドラッグ）

　※　お問い合わせ、プライバシーポリシーは、親ブログで固定ページ作成済みなので、２つめのブログ以降は、そのURLをカスタムリンクで指定

　あとは、
　メニュー設定　－　メニューの位置のフッターメニューにチェックを入れて、
　メニューを保存。

　※　フッターモバイル［ボタン］にチェックを入れてスマートフォンで確認したらサイドバーが表示されなくなったので、チェックしない

　位置の管理（今は位置を管理）は、下の画面のとおり。

サイトマップ

　PS Auto Sitemapというプラグインが紹介されていたが、
　『注意: このプラグインは現在使用中のWordPressバージョンではテストされていません。』
と表示されたため、躊躇。

　Cocoon（テーマ）が用意してくれていたので、使わせてもらった。

　固定ページで作成したサイトマップのページに以下のショートコードを記した。

お問い合わせ

　以下のページへ。

プライバシーポリシー

　プライバシーポリシーはGoogleアドセンスの審査で必要になった。
　申し込む前に調べておかないと分からない。AdSenseポリシーの「Google広告のCookie」に明記されているが……。

　いくつか他のサイトを参考にしながらまとめた。

　コピー＆ペーストに近いが、全文読み返して自分のサイトと整合性がとれているかチェックしながら多少アレンジ。

　Cookieを使用しています
　うんぬん

　検索にかからないようページ下で「インデックスしない（noindex）」にチェックして完了。
　サイトマップ、お問い合わせのページも「インデックスしない（noindex）」にチェックしておいた。