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

プログラミング WordPress PHP Docker

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

はじめに

この記事では、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 以降の部分を適宜変更して追記するだけでOK。
不要であれば削除して良い。

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テーマ」を開発できるようになったはず。
この記事が少しでもお役に立てたのなら幸いです。

B! はてブ