HaneCa

独り立ちへ向けた長い道

WordPressテーマの開発環境の構築

投稿日: 2020年5月19日 最終更新日: 2021年3月24日
Photo by Michael Smith on Unsplash

ここでは、wordpressのテーマを開発するための環境構築の手順を紹介します。

これまで無料のテーマを利用していましたが、記事の読みやすさや印刷時の見た目の良さなどを、自分なりにこだわっていきたいと思い自分で開発することにしました。

目次

設置した環境

まず、開発機としては、Macbookを選択し、その上で動作するDockerにMySQLとWordpressをインストールしました。

MacへのDockerとDocker Composeのインストール方法については、こちらが参考になります。

また、開発するテーマは、macbook上の~/Projects/wordpress/themes/sampleというディレクトリ 内で開発することとします。

WordPress環境の構築

dockerイメージのダウンロード

ここでは、docker hubで既に公開されているwordpressとmysqlのイメージをダウンロードします。docker hubでは、様々なコンテナイメージが公開されていますが、”OFFICIAL IMAGE”と書かれたパッケージを開発組織が公式に提供するイメージを利用することにしました。

docker composeファイルを作成

1でダウンロードしたイメージを起動するだけでは、データベースとアプリケーションが連携して動作しません。なぜなら、アプリケーションサーバにデータベースの宛先が伝えられないため、wordpressがどのデータベースを参照すれば良いかわからないためです。

この問題を解決するため、docker composeを利用します。これはYAML形式のファイルにシステムの構成を記述し、各コンポーネントが連携できるようにするdockerの拡張機能の一つです。

今回、wordpressとmysqlを連携させるdocker-compose.ymlファイルは、次のように記述します。もしくは、ここからダウンロードします。

ここで、簡単に解説すると、今回は大きくはアプリケーションのwebとデータベースのmysqlという2つのコンポーネントから成ります。

webについては、mysqlとつなぐ事を示すlinksを設け、さらに、環境変数として、データベースのRootのパスワードを設定します。

さらに、portsでは本来80番ポートで動作しているアプリを外部からは8080からアクセスするようにしています。

volumesでは、:より前がホストとなるmacbookのフォルダのパスを示し、:以降がdocker上のフォルダのパスを示し、これらが共有フォルダの対応づけを定義する内容となります。

さらに、mysqlでは、環境変数として、Rootのパスワードとwordpress用のデータベース名を定義しています。

 

この構成に基づいて、次のコマンドで環境を実行します。

実行が完了したら、ブラウザを立ち上げて、http://localhost:8080/ にアクセスし、無事に次のようなwordpressの初期設定の画面が表示されれば、問題なくインストールが完了しています。

 

サンプルデータのインポートの準備

wordpressでは、テーマの開発向けにサンプルのデータが、テーマ用のユニットテストとして公開されています。そのデータの中には、タイトルが長い記事やテーブルなどwordpressでレイアウトの崩れが起こりやすい記事をサンプルとして、ここで日本語版が公開しています。

具体的なユニットテストのテストの目的は、ここに書かれています。

 

サンプルデータのインポートについては、XML形式でエクスポートされたデータをインポートするツールを利用します。

しかし、このままでは、次のようなエラーが発生し、インポートに必要なツールのwordpress importerをインストールすることができません。

これは、プラグインをインストールするためのディレクトリ にアクセス権がないために発生します。そのため、稼働中のdockerにログインし、次のコマンドを実行することで、所有権をwordpressを実行しているwww-dataユーザに付与します。

私の場合、dockerへのログインについては、VS Codeのdockerプラグインを利用しました。VS Codeのdockerプラグイン上で、稼働中のdockerコンテナを右クリックし、attach shellというメニューを選択することで、ログインできます。

 

サンプルデータのインポート

まず、wordpress importerをインストールします。次に、Tools > Import > WordPressとたどっていき、「Run Importer」を選択します。

そして、ファイルの選択で、先ほどのリポジトリにあるwordpress-theme-test-data-ja.xmlファイルを選択し、「Upload file and import」ボタンを押します。

次に、ページの最後まで移動し、Import AttachmentsのセクションのDownload and import file attachmentsのチェックボックスをオンにして、「Submit」ボタンを押します。

この結果、次のように表示されれば、問題なく必要なデータがインポートできています。

参考サイト

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください