当サイトのテーマは、PHP素人がDockerで開発環境を構築してオリジナルで作成しています。
最小構成のテーマを作成して、本格的に開発していけるベース環境を整える手順をご紹介します。
はじめに
この記事では、WordPressオリジナルテーマの開発環境を整えることだけを目的としています。
そのため、WordPressがテーマとして認識する最小構成で作成しています。
少し手を加えた程度では、実用できるレベルにはなりませんのでご了承ください。
自分のサイトテーマには、知らないコードを一行もいれたくないという硬派な方や、必要なファイルを適宜追加したり、PHPやWordPressの関数を調べながらテーマ開発できる方を対象にしています。
PHPに関しては初心者ですが、この開発環境を使うことで比較的簡単にテーマ開発できています。
また、Dockerを使って開発環境を構築しているので、ある程度Dockerの知識がないと難しいかもしれませんが、Dockerの環境構築などについては一切触れていません。
自作WordPressテーマの開発環境
この記事で紹介しているコードは、以下のリポジトリで公開しています。 stdoutblog/docker-wordpress-theme
ディレクトリ構成
WordPressでテーマとして認識されるには、functions.php
index.php
style.css
が必要です。
そのため、Dockerでテーマ開発を始めるために必要な最小構成は以下の通りになります。
この記事では mytheme
というテーマ名で作成していきます。
docker-wordpress-theme/
├ mytheme/
│ ├ functions.php
│ ├ index.php
│ └ style.css
├ docker-compose.yml
└ Dockerfile
Theme Developer Handbook
https://developer.wordpress.org/themes/
ファイルの説明
作成したファイルを一つずつ説明していきます。
functions.php
functions.php
が何であるかの説明はしません。
コメントアウトで書かれているのは、デバッグするのに役立つコードです。
コメントアウトを外して error_log( var_export( $data, true ) );
みたいに追記すれば、変数(ここでは$data)の中身をログから確認できます。error_log( '==============================' );
については、個人的にログを確認するときの目印として使っているだけです。
<?php
// define( 'WP_DEBUG', true );
// define( 'WP_DEBUG_LOG', true );
// error_log( '==============================' );
// error_log( var_export( $data, true ) );
?>
WordPress でのデバッグ
https://ja.wordpress.org/support/article/debugging-in-wordpress/
index.php
Header、Content、Footerの文字が表示されるだけのHTMLです。
ここから、自分なりのレイアウトを作成していきます。
実際には、single.php
や post.php
などを作っていくことになるかと思います。
ヘッダー部分を header.php
として切り出したりもできます。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
<?php wp_footer(); ?>
</body>
</html>

style.css
テーマの設定ですので、適宜書き換えてください。
僕はめんどくさいので永遠のバージョン0.0で開発しています。
@charset 'UTF-8';
/*
Theme Name: My Theme
Author:
Description:
Version: 0.0
License: GNU General Public License v2 or later
*/
docker-compoe.yml
データベースとワードプレスのコンテナ定義です。
特に変わったことはしていないと思います。
ディレクトリを mytheme
から変更している場合は、wordpressのvolumesのところに修正が必要になります。
version: '3'
services:
db:
image: mysql/mysql-server:latest
volumes:
- db_data:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
build: .
volumes:
- ./mytheme:/var/www/html/wp-content/themes/mytheme
ports:
- 8000:80
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_NAME: wordpress
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
db_data:
クィックスタート: Compose と WordPress
https://docs.docker.jp/compose/wordpress.html
Dockerfile
ワードプレスの最新のDockerイメージを使用しています。wget
しているのは、プラグインです。plugins
ディレクトリに直接ダウンロードしているので、常に必要になるプラグインをあらかじめインストールしておくことができます。wget
で指定しているURLの /plugin
以降の部分を適宜変更して追記するだけです。
不要であれば削除してください。
FROM wordpress:latest
WORKDIR /var/lib/apt/lists
RUN apt-get update && apt-get install -y --no-install-recommends \
wget \
unzip \
&& wget https://downloads.wordpress.org/plugin/theme-check.zip \
&& wget https://downloads.wordpress.org/plugin/contact-form-7.zip \
&& unzip './*.zip' -d /usr/src/wordpress/wp-content/plugins \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/* \
&& chown -R www-data:www-data /usr/src/wordpress/wp-content
WORKDIR /var/www/html
開発環境構築
コンテナをビルドします。
$ docker-compose build
最後に、コンテナを立ち上げることができれば完了です。
$ docker-compose up
localhost:8000
にアクセスすればwordpressのインストール画面が表示されるはずです。

おわりに
これで「ぼくのかんがえたさいきょうのWordpressテーマ」を開発できるようになったかと思います。
この記事が少しでもお役に立てたのなら幸いです。