Dockerで学ぶWordPress入門テーマとプラグイン基礎

はじめに
ローカル環境を作る方法（Docker)
WordPressの仕組み
テーマの仕組み（Twenty Twenty-Four＝ブロックテーマ版）
プラグインの仕組み
プラグインの作成
まとめ

はじめに

WordPressは世界中で利用されているCMS（コンテンツ管理システム）で、ブログから企業サイト、さらにはECサイトまで幅広く活用されています。
本記事では、そのWordPressの仕組みを理解し、テーマやプラグインの基礎に触れることで、カスタマイズの第一歩を踏み出せるようになることを目的としています。

この記事を読み進めることで、テーマの構造や役割を理解し、自分でデザインを変更できる基礎力を身につけられます。

ローカル環境を作る方法（Docker)

WordPressを試すには、PC上にサーバー環境を用意する必要があります。ここでは手軽に使える Docker を利用して、WordPressとmariadbの環境を構築する方法を紹介します。

プロジェクト用のディレクトリを作成し、その中に docker-compose.yml を用意します。
docker-compose.yml の内容は以下のように記述します。

services:
  db:
    image: mariadb:11.3
    command: >
      --character-set-server=utf8mb4
      --collation-server=utf8mb4_unicode_ci
    environment:
      MARIADB_DATABASE: wordpress
      MARIADB_USER: wordpress
      MARIADB_PASSWORD: wordpress
      MARIADB_ROOT_PASSWORD: root
    volumes:
      - ./db_data:/var/lib/mysql

  wordpress:
    image: wordpress:php8.2-apache
    depends_on:
      - db
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress_data:/var/www/html

services:
  db:
    image: mariadb:11.3
    command: >
      --character-set-server=utf8mb4
      --collation-server=utf8mb4_unicode_ci
    environment:
      MARIADB_DATABASE: wordpress
      MARIADB_USER: wordpress
      MARIADB_PASSWORD: wordpress
      MARIADB_ROOT_PASSWORD: root
    volumes:
      - ./db_data:/var/lib/mysql

  wordpress:
    image: wordpress:php8.2-apache
    depends_on:
      - db
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress_data:/var/www/html

ターミナルで以下を実行し、コンテナを立ち上げます。

docker-compose up -d

docker-compose up -d

ブラウザで http://localhost:8080 にアクセスすると、WordPressのインストール画面が表示されます。

これでローカルにWordPress環境が完成し、自由にテーマやプラグインを試すことができます。

WordPressの仕組み

WordPressを支える3つの要素

WordPressは、以下の要素が組み合わさることで動作しています。

テーマ：Webサイトの見た目（デザインやレイアウト）を決めるファイル群
プラグイン：WordPressに新しい機能を追加する仕組み
データベース：記事やユーザー情報、各種設定を保存する場所

この3つが連携することで、管理画面からコンテンツを追加・編集し、それをサイトに反映できる仕組みになっています。

投稿・固定ページ・カスタム投稿タイプの違い

WordPressでは、記事の種類ごとに「投稿タイプ」が用意されています。主に以下の3種類を理解しておくと便利です。

投稿：ブログ記事やニュースなど、時系列で並ぶコンテンツ
固定ページ：会社概要やお問い合わせページなど、更新頻度が少なく階層的に管理するコンテンツ
カスタム投稿タイプ：開発者が自由に定義できる投稿形式（例：商品一覧、イベント情報、レビュー記事など）

WordPress ディレクトリの構成

wordpress_data/
├─ index.php                 … 入口。WPをブートしテーマに渡す
├─ wp-blog-header.php        … WP初期化→クエリ実行→テンプレート呼び出し
├─ wp-load.php               … WP読み込みの共通ブートストラップ
├─ wp-settings.php           … コアの設定読み込み
├─ wp-config.php             … ★サイト固有設定（DB接続/キー/デバッグ等）←編集するのはココ
├─ wp-config-sample.php      … wp-config.php のサンプル
├─ wp-config-docker.php      … Docker用の追加設定（ある環境のみ）
├─ wp-login.php              … ログイン処理
├─ wp-activate.php           … 新規ユーザーの有効化（マルチサイト等）
├─ wp-signup.php             … サインアップ（マルチサイト用）
├─ wp-mail.php               … メール投稿機能
├─ wp-comments-post.php      … コメント投稿処理
├─ wp-cron.php               … 疑似Cronのエントリ
├─ wp-trackback.php          … トラックバック処理
├─ wp-links-opml.php         … OPML出力（旧リンクマネージャ）
├─ xmlrpc.php                … XML-RPCエンドポイント（外部投稿等、近年は無効推奨）
├─ license.txt               … GPLライセンス
├─ readme.html               … バージョン等の紹介（本番では削除/アクセス遮断が無難）
│
├─ wp-admin/                 … 管理画面（ダッシュボード）のコード一式【コア：編集しない】
│   ├─ css/ js/ images/     … 管理UI用アセット
│   └─ *.php                 … 各管理ページの処理
│
├─ wp-includes/              … コアのライブラリ群【コア：編集しない】
│   ├─ class-*.php           … コアクラス（投稿/ユーザー/メディア等）
│   ├─ functions.php         … コア関数
│   ├─ formatting.php etc.   … 文字列/URL/HTTP/REST等のAPI
│   ├─ blocks/               … ブロックエディタ関連
│   ├─ js/ css/ images/      … コアのアセット
│   └─ …                     … 多数
│
└─ wp-content/               … ★ユーザー領域（テーマ/プラグイン/アップロード）←ここを触る
    ├─ themes/               … テーマ（例：twentytwentyfour など）
    │   └─ <テーマ名>/...
    ├─ plugins/              … プラグイン（各フォルダ配下に .php エントリ）
    │   └─ <プラグイン名>/...
    ├─ mu-plugins/           … 必ず読み込まれるプラグイン（特殊・自動有効）
    ├─ uploads/              … メディア（年/月フォルダで保存）
    ├─ languages/            … 翻訳ファイル（.mo/.po）
    └─ advanced-cache.php    … 高度なキャッシュ用（ある場合）

wordpress_data/
├─ index.php                 … 入口。WPをブートしテーマに渡す
├─ wp-blog-header.php        … WP初期化→クエリ実行→テンプレート呼び出し
├─ wp-load.php               … WP読み込みの共通ブートストラップ
├─ wp-settings.php           … コアの設定読み込み
├─ wp-config.php             … ★サイト固有設定（DB接続/キー/デバッグ等）←編集するのはココ
├─ wp-config-sample.php      … wp-config.php のサンプル
├─ wp-config-docker.php      … Docker用の追加設定（ある環境のみ）
├─ wp-login.php              … ログイン処理
├─ wp-activate.php           … 新規ユーザーの有効化（マルチサイト等）
├─ wp-signup.php             … サインアップ（マルチサイト用）
├─ wp-mail.php               … メール投稿機能
├─ wp-comments-post.php      … コメント投稿処理
├─ wp-cron.php               … 疑似Cronのエントリ
├─ wp-trackback.php          … トラックバック処理
├─ wp-links-opml.php         … OPML出力（旧リンクマネージャ）
├─ xmlrpc.php                … XML-RPCエンドポイント（外部投稿等、近年は無効推奨）
├─ license.txt               … GPLライセンス
├─ readme.html               … バージョン等の紹介（本番では削除/アクセス遮断が無難）
│
├─ wp-admin/                 … 管理画面（ダッシュボード）のコード一式【コア：編集しない】
│   ├─ css/ js/ images/     … 管理UI用アセット
│   └─ *.php                 … 各管理ページの処理
│
├─ wp-includes/              … コアのライブラリ群【コア：編集しない】
│   ├─ class-*.php           … コアクラス（投稿/ユーザー/メディア等）
│   ├─ functions.php         … コア関数
│   ├─ formatting.php etc.   … 文字列/URL/HTTP/REST等のAPI
│   ├─ blocks/               … ブロックエディタ関連
│   ├─ js/ css/ images/      … コアのアセット
│   └─ …                     … 多数
│
└─ wp-content/               … ★ユーザー領域（テーマ/プラグイン/アップロード）←ここを触る
    ├─ themes/               … テーマ（例：twentytwentyfour など）
    │   └─ <テーマ名>/...
    ├─ plugins/              … プラグイン（各フォルダ配下に .php エントリ）
    │   └─ <プラグイン名>/...
    ├─ mu-plugins/           … 必ず読み込まれるプラグイン（特殊・自動有効）
    ├─ uploads/              … メディア（年/月フォルダで保存）
    ├─ languages/            … 翻訳ファイル（.mo/.po）
    └─ advanced-cache.php    … 高度なキャッシュ用（ある場合）

設定ファイル

wp-config.php
サイト固有の設定ファイル。DB接続情報やキー、デバッグ設定などを記述。
wp-config-sample.php
wp-config.php を作成するためのサンプル。インストール時にコピーされる。
wp-config-docker.php
Docker 環境での利用向け設定ファイル。docker-compose で自動生成される場合がある。

メインのエントリーポイント

index.php
すべてのリクエストの入口。ここから wp-blog-header.php を呼び出して WordPress をロード。
wp-blog-header.php
WordPress を初期化し、テーマを呼び出す。

ユーザー操作系のファイル

wp-login.php
ログイン画面を表示・処理する。
wp-signup.php
マルチサイトでユーザー登録を行うためのスクリプト。
wp-activate.php
新規登録ユーザーがメールで送られたリンクをクリックして有効化するための処理。
wp-mail.php
メール経由で記事を投稿する仕組み。
wp-comments-post.php
コメント投稿処理を担当。

システム運用系のファイル

wp-cron.php
疑似的な cron ジョブを処理するファイル（定期実行タスク）。
wp-trackback.php
トラックバック機能を処理するファイル。
wp-links-opml.php
リンクマネージャー用の OPML 出力。

管理系ディレクトリ

wp-admin/
管理画面（ダッシュボード）のコード一式。管理者が使う UI や処理がまとまっている。
wp-includes/
WordPress のコアライブラリ。
投稿・ユーザー・メディア処理、API、プラグインやテーマで使える関数群がここに入っている。
wp-content/
サイト固有のデータが入る領域。ユーザーが編集・追加できるのは基本ここだけ。
- themes/：テーマファイル
- plugins/：プラグインファイル
- uploads/：アップロードされた画像やファイル

その他

license.txt
WordPress のライセンス情報（GPL）。
readme.html
バージョンや簡単な情報を表示するファイル。

テーマの仕組み（Twenty Twenty-Four＝ブロックテーマ版）

実ファイル構成（主要ファイルと役割）

wp-content/themes/twentytwentyfour/
├─ style.css          … テーマ情報（必須）。追加CSSを書いてもOK
├─ theme.json         … サイト全体のスタイル・設定（色/タイポ/間隔/ブロック設定）
├─ functions.php      … 任意。必要があれば機能追加やフック処理を書く
├─ templates/         … ★ページ種別ごとのテンプレート（.html）
│   ├─ index.html     … ★必須。最終フォールバックのテンプレート
│   ├─ single.html    … 投稿単体ページ
│   ├─ page.html      … 固定ページ
│   ├─ archive.html   … 一覧（カテゴリ/タグ/投稿タイプ等）
│   ├─ home.html      … 投稿一覧トップ（設定によりトップになる）
│   └─ 404.html       … 404ページ
├─ parts/             … ヘッダー/フッター等の「部品」テンプレート
│   ├─ header.html
│   └─ footer.html
├─ patterns/          … 再利用可能なセクション（ヒーロー、CTA など）
├─ assets/            … 画像やフォント等のアセット
└─ styles/            … 事前定義スタイルバリアント

wp-content/themes/twentytwentyfour/
├─ style.css          … テーマ情報（必須）。追加CSSを書いてもOK
├─ theme.json         … サイト全体のスタイル・設定（色/タイポ/間隔/ブロック設定）
├─ functions.php      … 任意。必要があれば機能追加やフック処理を書く
├─ templates/         … ★ページ種別ごとのテンプレート（.html）
│   ├─ index.html     … ★必須。最終フォールバックのテンプレート
│   ├─ single.html    … 投稿単体ページ
│   ├─ page.html      … 固定ページ
│   ├─ archive.html   … 一覧（カテゴリ/タグ/投稿タイプ等）
│   ├─ home.html      … 投稿一覧トップ（設定によりトップになる）
│   └─ 404.html       … 404ページ
├─ parts/             … ヘッダー/フッター等の「部品」テンプレート
│   ├─ header.html
│   └─ footer.html
├─ patterns/          … 再利用可能なセクション（ヒーロー、CTA など）
├─ assets/            … 画像やフォント等のアセット
└─ styles/            … 事前定義スタイルバリアント

重要：ブロックテーマではテンプレートは .html（ブロック記法）で書きます。
index.php はクラシックテーマの必須。ブロックテーマでは templates/index.html が必須。

テンプレート階層（ブロックテーマ）

ブロックテーマでも「より適合するテンプレートが優先」のルールは同じです。拡張子が .html になっただけ、と理解してください。

例

単一投稿
templates/single-{post_type}.html → templates/single.html → templates/index.html
固定ページ
templates/page-{slug}.html → templates/page.html → templates/index.html
一覧
templates/archive-{post_type}.html → templates/archive.html → templates/index.html
トップ
templates/front-page.html（固定ページをホームにした場合） / templates/home.html（投稿一覧トップ）

ブロックでの動的表示

クラシックの the_title() / the_content() の代わりに、ブロックで記事データを差し込みます。
templates/single.html 例（概念）

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

<!-- wp:query {"inherit":true} -->
  <!-- wp:post-template -->
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-content /-->
  <!-- /wp:post-template -->
<!-- /wp:query -->

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

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

<!-- wp:query {"inherit":true} -->
  <!-- wp:post-template -->
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-content /-->
  <!-- /wp:post-template -->
<!-- /wp:query -->

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

post-title, post-content など コアブロックが、クラシックのテンプレートタグに相当します。
parts/header.html などを template-part ブロックで読み込みます。

functions.php の役割

ブロックテーマでも functions.php は必須ではありません。必要に応じて以下を記述します。

追加のフック（init, rest_api_init など）
古いプラグインとの互換処理、短いユーティリティ関数
管理画面カスタマイズ、画像サイズ追加等

スタイルやスクリプトの読込は、基本は theme.json で宣言していくのが近年の流儀です（どうしても必要なときだけ enqueue）。

クラシックテーマとの違い（整理）

項目	クラシックテーマ	ブロックテーマ（FSE）
必須ファイル	`style.css`, `index.php`	`style.css`, `templates/index.html`
テンプレート	`single.php`, `page.php`, …（PHP）	`single.html`, `page.html`, …（HTMLブロック）
動的表示	`the_title()`, `the_content()`	`post-title`, `post-content` 等のブロック
全体設定	`functions.php` + PHPで調整	`theme.json` で宣言的に管理
ヘッダー/フッター	`header.php` / `footer.php`	`parts/header.html` / `parts/footer.html`

子テーマを作って独自デザインを追加する

既存テーマを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。
そこで利用するのが 子テーマ です。子テーマを作成しておけば、親テーマのデザインや機能を引き継ぎつつ、独自のカスタマイズを安全に行えます。

子テーマ用フォルダを作成

wp-content/themes/ 配下に、新しい子テーマ用フォルダを作成します。

例
wp-content/themes/twentytwentyfour-child/

例
wp-content/themes/twentytwentyfour-child/

style.css に親テーマ継承を記述

子テーマフォルダに style.css を作り、以下の内容を記述します。

/*
 Theme Name: Twenty Twenty-Four Child
 Template: twentytwentyfour
*/

/*
 Theme Name: Twenty Twenty-Four Child
 Template: twentytwentyfour
*/

Theme Name：子テーマの名前（任意）
Template：親テーマのフォルダ名（ここでは twentytwentyfour）

functions.phpに親テーマのCSSを読み込む

同じフォルダに functions.php を作成し、親テーマのスタイルを継承するコードを追加します。

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

デザインやテキストを変更してみる

wp-content/themes/twentytwentyfour-child/parts/footer.htmlを子テーマ側にコピーして編集し、フッター文言を変更

<p class="has-text-align-center">© 2025 My Custom Site. All rights reserved.</p>

<p class="has-text-align-center">© 2025 My Custom Site. All rights reserved.</p>

プラグインの仕組み

プラグインの配置場所

wp-content/plugins/
├─ hello.php
├─ akismet/
│   └─ akismet.php
└─ my-plugin/
    └─ my-plugin.php   ← 自作プラグインの入口

wp-content/plugins/
├─ hello.php
├─ akismet/
│   └─ akismet.php
└─ my-plugin/
    └─ my-plugin.php   ← 自作プラグインの入口

プラグインは wp-content/plugins/ フォルダ配下に置かれます。
1つのプラグインは、基本的に1フォルダ内にまとめます。
プラグインのエントリーポイントは .php ファイル（ヘッダーコメント必須）。

プラグインの基本構造

例：wp-content/plugins/my-plugin/my-plugin.php

<?php
/*
Plugin Name: My Plugin
Description: サンプルのプラグイン
Version: 1.0
Author: あなたの名前
*/

// 機能追加の例：投稿保存時にメッセージをログ出力
add_action('save_post', function($post_id) {
    error_log("投稿 {$post_id} が保存されました");
});

<?php
/*
Plugin Name: My Plugin
Description: サンプルのプラグイン
Version: 1.0
Author: あなたの名前
*/

// 機能追加の例：投稿保存時にメッセージをログ出力
add_action('save_post', function($post_id) {
    error_log("投稿 {$post_id} が保存されました");
});

ヘッダーコメント
- Plugin Name や Description を書くことで、管理画面の「プラグイン一覧」に表示されます。
フック（Action / Filter）
- add_action や add_filter を使い、WordPress の処理に割り込んで独自機能を追加します。

プラグインが読み込まれる流れ

WordPress が起動すると、wp-content/plugins/ 配下の有効化済みプラグインをスキャン
管理画面や処理の実行タイミングに応じて、プラグインのコードを読み込む
add_action / add_filter に登録した関数が WordPress の処理にフックされ、機能を追加

プラグインの作成

フォルダ & ファイル

wp-content/plugins/hello-world/
└─ hello-world.php

wp-content/plugins/hello-world/
└─ hello-world.php

hello-world.php（コピペOK）

<?php
/*
Plugin Name: Hello World (Sample)
Description: ショートコードやフックで「Hello World」を表示するサンプル。
Version: 1.0.0
Author: Your Name
License: GPL-2.0-or-later
Text Domain: hello-world-sample
*/

if (!defined('ABSPATH')) exit; // 直アクセス防止

// 1) ショートコード [hello_world] → 記事や固定ページに挿入すると表示
function hws_shortcode() {
    return '<span class="hws-hello">Hello World!</span>';
}
add_shortcode('hello_world', 'hws_shortcode');

// 2) 画面下部（フッター）に表示する例（全ページに出したいとき）
function hws_footer_message() {
    echo '<div style="text-align:center; padding:8px 0; opacity:.7;">Hello World from Plugin!</div>';
}
// 必要ならコメントアウトを外す（常時出したい場合だけ）
// add_action('wp_footer', 'hws_footer_message');

// 3) 管理画面ダッシュボードで軽い通知（確認用）
function hws_admin_notice() {
    if (!current_user_can('manage_options')) return;
    echo '<div class="notice notice-success is-dismissible"><p>Hello World (admin)!</p></div>';
}
add_action('admin_notices', 'hws_admin_notice');

// 4) 有効化/無効化時のフック（ログや初期化に使える）
function hws_on_activate() {
    // 初期化が必要ならここに（オプション登録など）
}
function hws_on_deactivate() {
    // 後処理が必要ならここに
}
register_activation_hook(__FILE__, 'hws_on_activate');
register_deactivation_hook(__FILE__, 'hws_on_deactivate');

<?php
/*
Plugin Name: Hello World (Sample)
Description: ショートコードやフックで「Hello World」を表示するサンプル。
Version: 1.0.0
Author: Your Name
License: GPL-2.0-or-later
Text Domain: hello-world-sample
*/

if (!defined('ABSPATH')) exit; // 直アクセス防止

// 1) ショートコード [hello_world] → 記事や固定ページに挿入すると表示
function hws_shortcode() {
    return '<span class="hws-hello">Hello World!</span>';
}
add_shortcode('hello_world', 'hws_shortcode');

// 2) 画面下部（フッター）に表示する例（全ページに出したいとき）
function hws_footer_message() {
    echo '<div style="text-align:center; padding:8px 0; opacity:.7;">Hello World from Plugin!</div>';
}
// 必要ならコメントアウトを外す（常時出したい場合だけ）
// add_action('wp_footer', 'hws_footer_message');

// 3) 管理画面ダッシュボードで軽い通知（確認用）
function hws_admin_notice() {
    if (!current_user_can('manage_options')) return;
    echo '<div class="notice notice-success is-dismissible"><p>Hello World (admin)!</p></div>';
}
add_action('admin_notices', 'hws_admin_notice');

// 4) 有効化/無効化時のフック（ログや初期化に使える）
function hws_on_activate() {
    // 初期化が必要ならここに（オプション登録など）
}
function hws_on_deactivate() {
    // 後処理が必要ならここに
}
register_activation_hook(__FILE__, 'hws_on_activate');
register_deactivation_hook(__FILE__, 'hws_on_deactivate');

有効化手順

上記ファイルを配置
wp-content/plugins/hello-world/hello-world.php
管理画面 → プラグイン → Hello World (Sample) を「有効化」

表示（2通り）

A) 記事や固定ページで表示（おすすめ）

本文に [hello_world] と書くだけ → 「Hello World!」が表示されます。

B) サイトの全ページ下部に常に表示

hello-world.php のこの行のコメントアウトを外します

// add_action('wp_footer', 'hws_footer_message');

// add_action('wp_footer', 'hws_footer_message');

全ページのフッター直前に「Hello World from Plugin!」

見た目を少し整える

ショートコードの出力に自前クラス .hws-hello を付けてあります。必要ならテーマや子テーマのCSSで調整可能

.hws-hello { font-weight: 700; color: #2563eb; }

.hws-hello { font-weight: 700; color: #2563eb; }

まとめ

Dockerで WordPress + MariaDB をローカル構築し、wp-content/ を中心に運用を学びながら、テーマ・プラグイン・DBの役割や投稿タイプの違い、ブロックテーマ（TTF）の構成を理解しました。さらに、子テーマでの安全なデザイン上書きと、自作プラグインによる機能拡張（Hello World）まで体験しました。