TL;DR
これcloneして docker-compose up すると、一瞬でWordPress環境立ち上がるよ
目次
- dockerでWordPress環境を構築するまで
- テーマ作るときに、コンテンツ部分に適用されるスタイルをよしなにいい感じにする（ついでに書いてるだけ）
dockerでWordPress環境を構築するまで
経緯
たまたまちょいとWordPressいじる必要が生じた。開発環境を整えるために今までは、ローカルにMySQLサーバ立てて、DB作って、ユーザーと権限周り作って整えて、PHP環境作って、Webサーバ環境作って、繋いで、動作確認して... っていういわゆるMAMP的なのを頑張ってやってたんですが、今どきそんなこと普通しないだろ、ということでdockerで環境構築すべく、ちょっと調べた。
構築方法
調べたところ、wordpress っていうdocker imageもあるし、当然のことながら mysql もdocker imageあるので、 docker-compose.yml いい感じに作ればいじゃんという話になり、作った。
作り方についても、 wordpress のDocker HubのDescriptionに丁寧に書いてあったので、参考情報として記載しておく。
ページ中頃の、「... via docker stack deploy or docker-compose」というセクションほぼそのまんま。
今回はテーマとかプラグインを作りたかったので、wp-content/themesとwp-content/pluginsをマウントするようにdocker-compose.ymlを作成。
※最新のものはGitHubを参照してください。
version: '3.1'
services:
wordpress:
image: wordpress
restart: always
ports:
- 8080:80
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_USER: exampleuser
WORDPRESS_DB_PASSWORD: examplepass
WORDPRESS_DB_NAME: exampledb
volumes:
- wordpress:/var/www/html
- ./wp-content/themes:/var/www/html/wp-content/themes
- ./wp-content/plugins:/var/www/html/wp-content/plugins
db:
image: mysql:5.7
restart: always
environment:
MYSQL_DATABASE: exampledb
MYSQL_USER: exampleuser
MYSQL_PASSWORD: examplepass
MYSQL_RANDOM_ROOT_PASSWORD: '1'
volumes:
- db:/var/lib/mysql
volumes:
wordpress:
db:
これで、 docker-compose up して http://localhost:8080 開くともうすぐに WordPressのセットアップ画面が開くので、そのまま進めば管理画面にいける。
テーマ作るときに、コンテンツ部分に適用されるスタイルをよしなにいい感じにする（ついでに書いてるだけ）
ここから先、本当についでに書いただけなので、自分の備忘録程度にしか使えないと思います。
自作テーマ作るときに、レイアウトとか、見た目とかをstyle.cssで制御すると思うんだけど、WordPressってWYSIWYGエディタを備えたCMSなので、コンテンツ部分のレイアウトはWordPress備え付けのものを生かしてあげる必要がある。
備え付けのstyleは、CSS « WordPress Codexの「WordPress Generated Classes」セクションに書いてあるもの。これを自作テーマの最下部にコピペしてあげることで、WYSIWYGで編集時に指定したレイアウトを実際の表示に反映することができた。
当初、自作style.cssで定義したスタイルがコンテンツ部分の要素にまで適用されていたことでWYSIWYGと見た目がずれてしまうという問題が発生してしまっていたが、おそらく下記のようにマークアップの責任分界をするとだいたい上手くいくような気がする。
- テンプレ/テーマ側では、コンテンツをwrapするブロック要素のレイアウトだけHTML+CSSで制御してあげて、
<?php the_content(); ?>とかで埋め込むコンテンツ本体のレイアウトに影響しないようなstyle.cssにしてあげる -
<h1>（か、若しくは<h2>）が投稿タイトルの表示を担当するなら、これはテンプレ側で表示を制御してあげたほうがいい - 文字色とかフォントとか、レイアウト以外の見た目に関するスタイルは style.css で定義して、コンテンツにも適用させるようにつくる（厳密に言うとフォントが違うとレイアウトも違ってくるとも言えるけど）
要は、WordPressのWYSIWYGが吐くHTMLなんて予想不可能なので、コンテンツ本文のブロックレイアウティングを自作cssで制御するのはたぶん無理。むしろテーマ作る側は、コンテンツ本文のブロックレイアウティングを制御せず放任してあげるようなクラス/セレクタ設計が必要な気がします。
カラーパレット機能とかサポートするように作っても良かったが、今回はそんなにWordPressの機能をフルサポートするような汎用的なテーマを作る必要がなかったので、最小限の機能サポートだけで実装した。