※スマホ対応はしてません。

タグ: WordPress

Docker公式イメージでWordPress環境を用意する。

カテゴリー: サーバー

library/wordpress が公式に提供されているのを昨日知りました。WWW+PHP+WordPressなパッケージみたい。DBは library/mysql を使うとして、この二つでさっくり環境が用意できました。

$ docker run --rm -d --name my-mysql -e MYSQL_ROOT_PASSWORD=passwd -v `pwd`/db:/var/lib/mysql mysql
$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 -v `pwd`/wp:/var/www/html wordpress

これで http://localhost を開くと、WordPressの初期設定が始まります。DBの初期処理にちょっと時間がかかるので、エラーが出てもちょっと待ってて開きなおしたりしてください。

終了は

こう。

$ docker stop my-mysql my-wordpress

Windowsは

pwd の代わりに %CD% を使います。

$ docker run --rm -d --name my-mysql -e MYSQL_ROOT_PASSWORD=passwd -v %CD%/db:/var/lib/mysql mysql
$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 -v %CD%/wp:/var/www/html wordpress

後述のDocker Composeを使うと書き分ける必要がなくなります。

変数的なもの

以下の値は適宜変更してください。

  • my-mysql … MySQLコンテナの名前。
  • my-wordpress … WordPressコンテナの名前。
  • passwd … DBのパスワード。開発用となら適当でいいんじゃないの。
  • 80 … ポート番号。 : で分けて左辺は任意。右辺は 80 で固定。
  • pwd/db, pwd/wp … 生成ファイルを配置するディレクトリ。絶対パス(フルパス)にする。

DBやアップロードしたファイルの行方

-v pwd/db:/foo 的な記述のおかげで、コマンド実行時の作業ディレクトリ直下に db, wp の二つのディレクトリが作成されるはずです。これらを保存しておいて、次回も -v で指定します。

新しい環境にする場合はここをさくっと変えればよろしい。

wordpressイメージ

安心安全のDocker公式イメージです。

PHPとApacheが含まれたイメージを元に作成されているみたい。(ものによるけど。) DB以外が揃ってるので簡単に始められる。ありがとう、ありがとう。

WordPressのバージョン

tagsのページを見ると4.8.3, 4.8.2の二つが用意されているっぽい。

でも docker pull wordpress:3 とかで普通に落ちてくるし使えるので、試してないけど一通り用意されてるんじゃないでしょうか。知らんけど。

あるいは、Dockerfileは前述の通り公開されてます。やっぱり試してないんだけど、こいつの WORDPRESS_VERSION の数字をいじるだけで他のバージョンに対応したやつも作れるんじゃないすかね。知らんけど。

バリエーション

例えばこんなタグがあります。

  • 4.8.3-php7.1-fpm-alpine
  • 4.8.2-php5.6-apache
  • cli-1.4.0-php7.1

なんか色々あるみたいなので公式ドキュメントを読んで、良さそうなものを見つけてください。

単純にWordPressのバージョンを指定するだけだと、PHP5.6とApacheとの組み合わせになるみたいです。(古いバージョンについて調べてないです。)

“cli” については次項。

WP-CLI

こちらさまね。

wordpress:cli でCLIも使えます。

$ docker run --rm -ti --volumes-from my-wordpress --link my-mysql:mysql wordpress:cli plugin list
+---------+----------+-----------+---------+
| name    | status   | update    | version |
+---------+----------+-----------+---------+
| akismet | inactive | available | 4.0     |
| hello   | inactive | none      | 1.6     |
+---------+----------+-----------+---------+

あら便利。

話には聞くけど使ったことはないです。ちゃんと動くよね? 大丈夫?

ところでこれって、

ものが全然違うから将来分割されるんじゃないかなあ。 wp-cli みたいなのに。あ、まんまだ。それとも、サーバの方もなんかいろいろあるし、これでいいんだろか。

自分が作ったテーマを別途追加する

実践編。

たぶん個別にGitで管理したりしてると思うので、そういうのは別々に追加していきましょう。

-v ないし --volume で指定します。 : の左側にテーマのディレクトリ(絶対パス)、右側に配置先、つまり /var/www/html/wp-content/themes/xxx 的なやつを書きます。

$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 \
-v `pwd`/wp:/var/www/html \
-v `pwd`/my-great-theme:/var/www/html/wp-content/themes/my-great-theme \
-v /path/to/my-wonderful-theme:/var/www/html/wp-content/themes/my-wonderful-theme \
wordpress

(さすがに長いので改行しました。)

-v でもっと追加してもいいですよ。

とはいえこんな長えのを毎回ぽちぽちしてらんねえーので、Docker Composeを使います。(シェルスクリプトが好きならそっちでも良いと思う。)

Docker Composeにする

相対パス使えて便利ね。

 # docker-compose.yml
version: "3"

services:

  wp:
    image: wordpress
    ports:
      - "80:80"
    volumes:
      - ./wp:/var/www/html
      - ./my-great-theme:/var/www/html/wp-content/themes/my-great-theme
    depends_on:
      - db

  db:
    image: mysql
    volumes:
      - ./db:/var/lib/mysql
    environment:
      MYSQL_RANDOM_ROOT_PASSWORD: "yes"
      MYSQL_DATABASE: wordpress
      MYSQL_USER: username
      MYSQL_PASSWORD: password

これで起動すれば “Database Host”を “db” にする以外はそのままぽちぽちいけるはずです。

$ docker-compose up

終了は Ctrl+C で。

envが増えてしまうのが謎。いやDocker直でやったらいらない方が謎か。

きっとありがちなエラーとトラブルシュート

名前が被った

docker: Error response from daemon: Conflict. The container name “/my-wordpress” is already in use by container “0c38694fb63ec30c7e5c1a2140489055dec35a3e6b6031af81be4b591e089ec1”. You have to remove (or rename) that container to be able to reuse that name.

その名前( --name で指定したもの)は既に稼働中です。他の名前を付けるか、現在稼働中のものを停止してください。

たぶん停止し忘れ。

ポートが使用中

docker: Error response from daemon: driver failed programming external connectivity on endpoint my-wordpress2 (87a56c6aaaf8adc1a12dcfa26a0f18917bf9fc4809a65726a5eb47d39ad0b3b9): Bind for 0.0.0.0:80 failed: port is already allocated.

そのポート( -p で指定したもの)は既に稼働中です。他の番号を使うか、現在稼働中のものを停止してください。

先の例では80番で起動したけど、例えば8080番で起動する場合はこう。

$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 8080:80 -v `pwd`/wp:/var/www/html wordpress

そしてポート番号を指定して http://localhost:8080 みたいにして開いてください。

MySQLを起動していない

docker: Error response from daemon: could not get container for my-mysql: No such container: my-mysql.

先に docker run ... mysql 的なアレを実行して、MySQLのコンテナを用意してください。その後WordPressを起動。

db, wp ディレクトリが作られない

例えば相対パスは使えません。

こちら駄目な例。

$ docker run --rm -d --name my-mysql -e MYSQL_ROOT_PASSWORD=passwd -v ./db:/var/lib/mysql mysql
$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 -v ./wp:/var/www/html wordpress

絶対パスで書くか、冒頭のように pwd や %CD% を利用します。

pwd 周りに使えない記号が含まれている。

docker: Error response from daemon: create `pwd`/wp: “`pwd`/wp” includes invalid characters for a local volume name, only “[a-zA-Z0-9][a-zA-Z0-9_.-]” are allowed. If you intended to pass a host directory, use absolute path.

Windowsだと pwd が使えないです。本記事冒頭参照。

localhostに繋がらない

初回ならたぶんMySQL待ちです。

念のためdockerの状況見ときましょうか。

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                NAMES
730219bd4919        wordpress           "/entrypoint.sh ap..."   6 seconds ago       Up 29 seconds       0.0.0.0:80->80/tcp   my-wordpress
29d4002b011b        mysql               "docker-entrypoint..."   15 seconds ago      Up 38 seconds       3306/tcp             my-mysql

一覧右端 “NAMES” に my-wordpress が出てくれば大丈夫。のはず。

DBエラー

Error establishing a database connection

たぶん前項と同じ。

あるいはイメージのバージョンを変えちゃったとか。それならバージョンを戻すか作り直し。

イメージを変えたのにWordPressのバージョンが変わらない

ちゃんと db, wp のディレクトリを新しいのにしました?

書いてる人について

WordPressは仕事で使ったことないですのでそこらへんの温度感についてはお察しください。

WordPressでjQueryの最新版や任意のバージョンを使うには。

カテゴリー: Web, サーバー

jQueryは最初から登録済みだから、一度解除してやる必要があるそうで。

元のコードとか

<?php wp_enqueue_script('jquery'); ?>

wp_enqueue_script() の第二引数にURLを指定できるってんでやってみたんですが、駄目でした。

(さらに…)

プログラマーだけどWordPressのテーマを1から作ってみる。(その4)

カテゴリー: サーバー

そういえばサイドバーを忘れてました。

作業の記録付けるのも忘れてました。

サイドバーにも二種類あるらしい

静的なものと、動的なものと。

後者が管理画面の外観>ウィジェットから操作できるやつで、前者は単純にテンプレートを読み込むだけ(対応アクションはある)。

静的なサイドバー

get_sidebar()で読み込む。

<?php get_sidebar('hoge'); ?>でsidebar-hoge.phpというテンプレートを探してきて、出力する。

これは簡単だね。ファイルがないとデフォルトのものを読み込むみたい。

動的なサイドバー

何もしないとウィジェット設定の画面でこのテーマではウィジェットは使用できませんと表示されてる。

利用できるようにするには、register_sidebar()を使って「登録」してやる必要があるみたい。

これをfunctions.phpに書いておく。

register_sidebar(array(
  'name' => 'サイドバー',
  'id' => 'sidebar-1',
));
register_sidebar(array(
  'name' => 'フッター',
  'id' => 'footer-1',
));

これでウィジェット設定に出てくる。

使うときはdynamic_sidebar()で読み込む。

<ul id="sidebar">
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
</ul>

出力されるウィジェットはliタグで囲まれるようになるので、それらをulで括る必要がある。これはdynamic_sidebar()のオプションbefore_widget, after_widgetで変更できる。

タイトルはh2で出力されるんだけど、これも同様にbefore_title, after_titleで変える事ができたよ。

強引だけどこんな事もできるね

register_sidebar(array(
  'id' => 'table-1',
  'before_widget' => '<tr>',
  'before_title' => '<th>',
  'after_title' => '</th><td>',
  'after_widget' => '</td></tr>',
));
<table>
  <?php dynamic_sidebar( 'table-1' ); ?>
</table>

↓結果(整形済み)

<table>
  <tr>
    <th>アーカイブ</th>
    <td>
      <ul>
        <li><a href='http://localhost/?m=201204' title='2012年4月'>2012年4月</a></li>
        <li><a href='http://localhost/?m=201203' title='2012年3月'>2012年3月</a></li>
      </ul>
    </td>
  </tr>
</table>

こんな風に使う場面はないと思うけども。

多言語対応

そういえばこれも知りたいところ。明日調べよう。

プログラマーだけどWordPressのテーマを1から作ってみる。(その3)

カテゴリー: サーバー

もうちょいでできそうだねー。

とりあえずコメント

twentyelevenのindex.phpにもcontent.phpにもcommentという単語は見当たらない。どこだ?と思ったら、個別ページではindex.phpではなくsingle.phpが読み込まれているらしい。

というわけでsingle.php内で検索するとあっさり発見。

  • wp-content/themes/twentyeleven/single.php #25
                    <?php comments_template( '', true ); ?>

この一行でコメント一覧と投稿フォームまで表示された。このHTMLはどこで記述してるんだろう?

というか、その前にsingle.phpとは??

(さらに…)

WordPressのコメント欄をタグ禁止とかにする。

カテゴリー: サーバー

コメントフォームのところ、こんなの表示されてますよね。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

これ以外のタグはすっぱり削除されてしまうんですが、例えばコメント欄でHTMLのコードについて議論した事もあるだろうし、削除じゃなくてエスケープして出力するようにしたいですね。(というか勝手に削るなよ、と言いたい。)

あと空行を見つけるとそこで区切って<p>〜</p>にされるけど、これも改行は全部改行のまま出力したい。

要は概ね書いたまま表示するようにしたい、と。まあ空白くらいは詰めてもいいけど、普通の掲示板風の動きにしたいわけです。

フィルターで独自に置換

どうもフィルターを使う事でうまくやれるみたい。

(さらに…)