コードでWordPressのサイトを管理すーる（Docker）

はじめに

WordPressはあまりやったことがないのですが、コードでWordPressのサイトを管理したいなと思い、バイブコーディングで作ってみました。

WordPressは通常、ページの中身（ブロック）はDBに保存されますが、ブロックテーマ+パターンを使うと、サイトのセクションをGit管理できるようになります。

この記事では以下を実現します。

• Docker ComposeでローカルにWordPressを起動
• wp-contentをホストにマウントしてテーマを実ファイル管理
• ブロックテーマ（your-theme）を作成
• サイトをセクションごとのパターンに分割してGit管理
• 画像素材（hero.jpg）をテーマ配下で管理

Git管理するのは主にここ

• docker-compose.yml
• .gitignore
• wp-content/themes/your-theme/**（ブロックテーマ+パターン+素材）

開発環境

• MacBook Air M1, 2020
• Docker 4.54.0 (212467)
• WordPress 6.9
• Cursor 2.2.20

フォルダ構成

my-wordpress/
  docker-compose.yml
  .gitignore
  wp-content/
    themes/
      your-theme/
        theme.json
        style.css
        functions.php
        templates/
          index.html
        parts/
          header.html
          footer.html
        patterns/
          hero.php
          features-3col.php
          use-cases.php
          trust-2col.php
          contact-cta.php
          page-business.php
        assets/
          images/
            hero.jpg   （任意）

Docker ComposeでWordPressを起動

docker-compose.ymlを作成

docker-compose.yml

services:
  db:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp
      MYSQL_PASSWORD: wp
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - db_data:/var/lib/mysql

  wordpress:
    image: wordpress:php8.2-apache
    depends_on:
      - db
    restart: unless-stopped
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wp
      WORDPRESS_DB_PASSWORD: wp
    volumes:
      - wp_data:/var/www/html
      - ./wp-content:/var/www/html/wp-content

volumes:
  db_data:
  wp_data:

wp-content/themes、wp-content/pluginsフォルダを作成

Docker ComposeでWordPressを起動

docker compose up -d

停止する場合

docker compose down

WordPress 初回セットアップ

起動したら、http://localhost:8080 にアクセス

日本語を選択

サイトのタイトル、ユーザー名、パスワード、メールアドレス、検索エンジンでの表示をチェックする

WordPressのインストールに成功

ログイン

WordPressのダッシュボードへ

固定ページへブロックHTMLを貼るやり方

※ こちらのやり方はDBに保存されるため、後からコードを直しても自動で反映されません。

メニューから固定ページを追加

ブロックを追加、カスタムHTMLを挿入、下記のコードを入力

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}}} -->
<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
  <!-- wp:heading {"level":1} -->
  <h1>ビジネスに効く、モダンなチャットボット</h1>
  <!-- /wp:heading -->

  <!-- wp:paragraph {"fontSize":"large"} -->
  <p class="has-large-font-size">問い合わせ対応・社内ヘルプデスク・資料案内を自動化。<strong>品質</strong>と<strong>運用のしやすさ</strong>にこだわった「がちもとさんのチャットボット」をご紹介します。</p>
  <!-- /wp:paragraph -->

  <!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
  <div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--40)">
    <!-- wp:button {"className":"is-style-fill"} -->
    <div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button" href="#contact">資料請求・相談する</a></div>
    <!-- /wp:button -->
    <!-- wp:button {"className":"is-style-outline"} -->
    <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#features">機能を見る</a></div>
    <!-- /wp:button -->
  </div>
  <!-- /wp:buttons -->

  <!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}}} -->
  <hr class="wp-block-separator" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)"/>
  <!-- /wp:separator -->

  <!-- wp:heading {"level":2} -->
  <h2 id="features">選ばれる理由</h2>
  <!-- /wp:heading -->

  <!-- wp:columns {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} -->
  <div class="wp-block-columns">
    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":3} -->
      <h3>回答品質を担保</h3>
      <!-- /wp:heading -->
      <!-- wp:paragraph -->
      <p>社内ナレッジやFAQを元に、運用ルールに沿った回答を返せるよう設計。想定外の質問は人へエスカレーションも可能です。</p>
      <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":3} -->
      <h3>導入が早い</h3>
      <!-- /wp:heading -->
      <!-- wp:paragraph -->
      <p>まずは小さく開始し、問い合わせカテゴリや回答範囲を段階的に拡張。短期間で効果検証できます。</p>
      <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":3} -->
      <h3>運用がラク</h3>
      <!-- /wp:heading -->
      <!-- wp:paragraph -->
      <p>よくある質問の追加・文言の調整・導線の改善を、管理しやすい形で継続改善できます。</p>
      <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
  </div>
  <!-- /wp:columns -->

  <!-- wp:heading {"level":2,"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}}} -->
  <h2 style="margin-top:var(--wp--preset--spacing--50)">活用シーン</h2>
  <!-- /wp:heading -->

  <!-- wp:list -->
  <ul>
    <li>Webサイトの問い合わせ一次対応（営業時間外も対応）</li>
    <li>料金・機能・事例の案内（営業前の温度感を上げる）</li>
    <li>社内ヘルプデスク（情シス・総務の負荷軽減）</li>
    <li>採用FAQ（応募前の不安を解消）</li>
  </ul>
  <!-- /wp:list -->

  <!-- wp:heading {"level":2,"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}}} -->
  <h2 style="margin-top:var(--wp--preset--spacing--50)">安心の設計</h2>
  <!-- /wp:heading -->

  <!-- wp:columns {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} -->
  <div class="wp-block-columns">
    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":3} -->
      <h3>セキュリティ</h3>
      <!-- /wp:heading -->
      <!-- wp:paragraph -->
      <p>権限・ログ・運用フローを前提に、社内利用にも耐える設計でご提案します（要件に応じて個別に調整）。</p>
      <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":3} -->
      <h3>計測・改善</h3>
      <!-- /wp:heading -->
      <!-- wp:paragraph -->
      <p>よく聞かれる質問、離脱ポイント、解決率などを見ながら、回答と導線を継続改善できます。</p>
      <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
  </div>
  <!-- /wp:columns -->

  <!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
  <div class="wp-block-group" id="contact" style="margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
    <!-- wp:heading {"level":2} -->
    <h2>まずは相談しませんか？</h2>
    <!-- /wp:heading -->
    <!-- wp:paragraph -->
    <p>現状の課題・想定質問・導入範囲をヒアリングして、最短ルートをご提案します。</p>
    <!-- /wp:paragraph -->
    <!-- wp:buttons -->
    <div class="wp-block-buttons">
      <!-- wp:button {"className":"is-style-fill"} -->
      <div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button" href="#">お問い合わせフォームへ</a></div>
      <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
  </div>
  <!-- /wp:group -->
</main>
<!-- /wp:group -->

下書きに保存して新しいタブで開いて表示

サイトの各セクションをパターン（patterns/*.php）としてテーマ側に置いて、Gitで管理

セクションごとにPattern分割＋組み立てPattern追加

wp-content/themes/your-theme/patterns/ に以下を追加し、Gitで管理できる「セクション単位のパターン」に分割しました。

• 分割パターン
  • your-theme/features-3col（選ばれる理由：3カラム）
  • your-theme/use-cases（活用シーン：リスト）
  • your-theme/trust-2col（安心の設計：2カラム）
  • your-theme/contact-cta（お問い合わせCTA）
• 組み立てPattern（これ1つ挿入でLPが組める）
  • your-theme/page-business（Hero → 特徴 → 活用 → 安心 → CTA）

固定ページでパターンを挿入する

メニューの外観→テーマ→your-themeを有効化

固定ページ編集画面で：

• +（ブロック追加）
• パターン タブ
• Business で検索
  Business landing (assembled)（= your-theme/page-business）を挿入

重要：パターンを修正したら「一旦削除して挿入し直す」

パターンは「挿入時点のスナップショット」になりがちで、テーマ側のpatterns/*.php を修正しても、すでにページ本文に入っているブロックは自動で差し替わりません。

そのため、運用は

• patterns/*.php を修正
• 固定ページから該当ブロックを削除
• もう一度 Business landing (assembled) を挿入

見出し（Hero）が二重になる原因

テンプレート側とページ本文側の両方で同じセクションを出しているため、templates/index.htmlを修正します。

index.html

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}}} -->
  <div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)">
    <!-- wp:post-content /-->
  </div>
  <!-- /wp:group -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

画像素材（hero.jpg）をテーマ配下で管理する

WordPressのuploadsは運用データになりやすく、Git管理には不向きです。
素材として管理したいものは、テーマ配下に置くのが扱いやすいです。
assets/images/hero.jpg を配置

hero.php では assets/images/hero.jpg が無い場合にプレースホルダーを出すようにしているので、未配置でも壊れません

.gitignore（ファイルが増えすぎる問題への対策）

WordPressは起動すると翻訳ファイル・デフォルトテーマ・初期プラグインなどが増え、差分が爆発します。 .gitignoreを修正します。

.gitignore

# WordPress runtime uploads (managed as environment data, not source)
wp-content/uploads/

# WordPress generated/runtime files
wp-content/upgrade/
wp-content/cache/
wp-content/debug.log

# WP translations (generated/downloaded)
wp-content/languages/

# Default plugins (installed by WP)
wp-content/plugins/akismet/
wp-content/plugins/hello.php

# Default themes (installed by WP)
wp-content/themes/twentytwentythree/
wp-content/themes/twentytwentyfour/
wp-content/themes/twentytwentyfive/

# Common backup/export plugins (optional)
wp-content/ai1wm-backups/
wp-content/backups*/

# Environment / secrets (optional)
.env
.env.*
*.local

# Node build artifacts (optional)
node_modules/
dist/
build/
.cache/

# Composer (optional)
vendor/

# IDE/editor
.idea/
.vscode/

# macOS
.DS_Store

まとめ

• ページ本文はDB保存なので、そのままではGit管理が難しい
• ブロックテーマ+パターンにすると「セクション＝コード（ファイル）」として管理できる
• パターンを修正したら「削除→挿入し直し」で反映する運用がわかりやすい
• 素材画像はテーマ配下に置くとGit管理しやすい

これで、コードでWordPressサイトを管理できますね

リポジトリはこちら

お疲れ様でした