2022/4/23

【Docker】自作WordPressテーマの開発環境テンプレート

当サイトのテーマは、PHP素人がDockerで開発環境を構築してオリジナルで作成しています。
最小構成のテーマを作成して、本格的に開発していけるベース環境を整える手順をご紹介します。

はじめに
自作WordPressテーマの開発環境
おわりに

はじめに

この記事では、WordPressオリジナルテーマの開発環境を整えることだけを目的としています。
そのため、WordPressがテーマとして認識する最小構成で作成しています。
少し手を加えた程度では、実用できるレベルにはなりませんのでご了承ください。

自分のサイトテーマには、知らないコードを一行もいれたくないという硬派な方や、必要なファイルを適宜追加したり、PHPやWordPressの関数を調べながらテーマ開発できる方を対象にしています。
PHPに関しては初心者ですが、この開発環境を使うことで比較的簡単にテーマ開発できています。

また、Dockerを使って開発環境を構築しているので、ある程度Dockerの知識がないと難しいかもしれませんが、Dockerの環境構築などについては一切触れていません。

自作WordPressテーマの開発環境

この記事で紹介しているコードは、以下のリポジトリで公開しています。

stdoutblog/docker-wordpress-theme
https://github.com/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テーマ」を開発できるようになったかと思います。
この記事が少しでもお役に立てたのなら幸いです。

Twitter B! はてブ