どばきちブログ

こんにちわ

前回はWordPressのローカル開発環境を構築する手順についてご紹介させて頂きました。今回は前回用意した環境をベースにWordPressのテーマ開発環境の構築をしていきたいな、と思います。前回の記事をまだ見ていないという方はこちらを一度見てみてください。

[docker]WordPressのローカル開発環境を用意してみた

今回は既存のテーマに対して変更を加えるための環境を用意していきたいと思います。

テーマ開発環境構築手順

1.編集対象のテーマファイルをインストールする

ローカル開発環境のWordPress管理画面のメニュー項目「外観」からテーマ開発に利用したいテーマを選択してインストールします。

そうするとローカル開発環境の以下のパスにインストールしたテーマ名のディレクトリが出来ています。

$ pwd
/Users/xxxxx/develop/wordpress-dev/wordpress-dev-local/html/wp-content/themes

 ~/d/w/wordpress-dev-local   main    html/wp-content/themes 
$ ls -1
hello-elementor

2.編集対象テーマフォルダをWordPressローカル環境と同階層に移動する

以下の様にディレクトリ丸ごと移動します。

~/d/w/wordpress-dev-local   main  html/wp-content/themes 
$ mv hello-elementor /Users/manabu/develop/wordpress-dev/

以下の様な配置になっているはずです。

$ tree wordpress-dev -L 1
wordpress-dev
├── hello-elementor
└── wordpress-dev-local

3.docker-compose.ymlに開発対象テーマをマウントして同期する設定を追加する

webのvolumesの項目を以下の様に編集します。

# テーマを開発する場合は以下の行を有効にする(以下は1階層上にtheme用リポジトリが存在する場合の例)
- ../hello-elementor:/var/www/html/wp-content/themes/hello-elementor

4.dockerをビルド&起動する

docker-compose.ymlファイルを編集したので以下のコマンドでビルドして反映します。

$ docker-compose build
$ docker-compose up -d

ローカル開発環境に編集対象のテーマフォルダが反映されることを確認できます。

 ~/d/w/wordpress-dev-local   main    html/wp-content/themes 
$ ls -1
hello-elementor

WordPressの管理画面の「外観」から該当のテーマを選択すると使うことができる様になっています。TOPページを表示すると以下の様になりました。

5.編集が反映されるか試してみる

どこを修正しても良いのですが、今回は上記ページのタイトルを一部修正して即時反映されるのを確認しました。

hello-elementor/template-parts/archive.php

		<header class="page-header">
			<?php
			the_archive_title( '<h1 class="entry-title">', '</h1>' );
+			the_archive_title( '<h1 class="entry-title">', '</h1>' );
			the_archive_description( '<p class="archive-description">', '</p>' );
			?>
		</header>

タイトル表示をもう一つ増やしたのみです。

編集を保存後改めてブラウザで確認した結果が以下になります。

おわりに

前回のWordPressのローカル開発環境を用意するところから始まり、テーマ開発ができる土台部分までは今回でできたかと思います。テーマフォルダはローカル開発環境とは別にしているので、こちらのフォルダを個別でgit管理すると良いのではないかと思っています。そのgit管理されたファイルをどうやって本番環境に反映するかについてはまた別記事にしたいと思います。

でわでわ