MoteRakuでは、サイト全体で使い回す「共通ヘッダー」「共通フッター」を、AIが作ったコードを貼るだけで用意できます。一度作れば、どのページにも {HEADER} {FOOTER} と書くだけで差し込まれ、記事ページなどテーマが表示するページにも自動で反映されます。この記事では、その手順を最初から最後まで解説します。
手順1. パーツ用のページを2枚作る
WordPress管理画面の MoteRaku → 新規ページ追加 から、ページを2枚作ります。タイトルは「共通ヘッダー」「共通フッター」など、自分がわかる名前でOKです。このページはヘッダー（フッター）だけを入れる“部品置き場”で、単体で公開するページではありません。
手順2. AIにヘッダーのコードを作ってもらう
ChatGPT・Gemini・Claudeなど、お使いのAIに次のように頼みます。
サイトのヘッダーだけのHTMLとCSSを作ってください。
・左にサイト名「◯◯◯」、右にナビゲーション
・ナビの場所には {MENU} とだけ書いてください（WordPressのメニューが入ります）
・スマホ幅ではハンバーガーメニューにしてください（JavaScriptは使わずCSSだけで）
・<body>の中身だけでOKです。HTMLとCSSは分けて出してください
ポイントは2つ。ナビの位置に {MENU} と書いてもらうこと（あとから外観→メニューで項目を増減できます）と、ハンバーガーはCSSだけでと頼むことです。出てきたHTMLを「共通ヘッダー」ページのHTML欄に、CSSをCSS欄に貼り付ければ完成。編集画面のプレビューでスマホ幅の見た目も確認できます。
手順3. フッターも同じように
サイトのフッターだけのHTMLとCSSを作ってください。
・ナビの場所に {MENU}、コピーライトに「© {YEAR} {SITE_NAME}」と書いてください
・<body>の中身だけでOKです
{YEAR} は今年の西暦、{SITE_NAME} はサイト名に自動で置き換わるので、年が変わっても直す必要がありません。
手順4. 表示設定で「パーツ」に指定する
MoteRaku → 表示設定 を開き、「ヘッダーパーツ」「フッターパーツ」でいま作った2枚のページを選んで保存します。これだけで、
- MoteRakuページでは
{HEADER}{FOOTER}と書いた場所に差し込まれる - 記事ページなど、テーマが表示するページには自動で差し込まれ、テーマ側のヘッダー/フッターは自動で非表示になる
という状態になります。つまりサイト全体でヘッダーが1系統。デザインを変えたくなったら、パーツのページを1枚直すだけで全ページに反映されます。
メニューの項目はWordPress側で管理
{MENU} の中身は 外観 → メニュー で編集します。ページを増やしたらここに項目を足すだけで、ヘッダーにもフッターにも反映されます。ヘッダー用・フッター用で別のメニューを割り当てることもできます。
これで「枠」の完成です。次はTOPページを作ってみましょう。
当記事に対してのコメントをご記載くださいませ！