Help us understand the problem. What is going on with this article?

DockerでWordPressの開発環境をサクッと構築する

TL;DR

https://github.com/qpSHiNqp/docker-wordpress-dev

これcloneして docker-compose up すると、一瞬でWordPress環境立ち上がるよ

目次

  1. dockerでWordPress環境を構築するまで
  2. テーマ作るときに、コンテンツ部分に適用されるスタイルをよしなにいい感じにする(ついでに書いてるだけ)

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/themeswp-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の機能をフルサポートするような汎用的なテーマを作る必要がなかったので、最小限の機能サポートだけで実装した。

qpSHiNqp
技術担当。 好きなものは、クルマ、サバゲー、ウィンタースポーツです。
onecareer
ワンランク上のキャリアを目指す学生のための新卒採用サービスONE CAREERの開発・運営会社
https://www.onecareer.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away