WordPress開発・運用

WordPressテーマ開発環境を準備する

こんにちわ

前回はWordPressのローカル開発環境を構築する手順についてご紹介させて頂きました。今回は前回用意した環境をベースに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管理されたファイルをどうやって本番環境に反映するかについてはまた別記事にしたいと思います。

でわでわ

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

WordPressテーマの修正を本番環境にデプロイする次のページ

関連記事

  1. 技術

    [Mac]codeコマンドでCursorが起動するようになってた

    こんにちわ僕はVisual Studio Codeをターミナ…

  2. フリーランス

    iPhoneの領収書整理を自動化してみた話 構成編

    こんにちわ、どばきちです。前回はiPhoneの領収書…

  3. 技術

    ドメイン移管でwhoisのネームサーバー変更は必須だった

    こんにちわ先日ドメイン移管をしたんですよ。ネームサーバーも変…

  4. 技術

    [docker][PHP]Laravel開発テンプレを作ってみた

    こんにちわ、どばきちです。いざ新規に何かしらの開発を…

  5. 技術

    [AWS]VPC消せないけど費用はかかる悪夢

    こんにちわ、どばきちです。先日個人用に作成したAWS…

  6. 技術

    スプレッドシートの内容をChatworkに定期通知する<前編>

    こんにちわ先日Googleスプレッドシートにある内容を定期的…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

2024年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
  1. 技術

    warpではzshのbindkeyが使えない
  2. WordPress開発・運用

    [ConoHa]WordPressサーバ PHPVer7.4からVer8.3に更…
  3. 雑談

    Google広告承認されました!
  4. 技術

    [AWS]Amazon Linux2 カーネル4.14から5.10へ
  5. 技術

    [AWS]1コインサーバーでLAMP(Laravel8)を使う<後編>
PAGE TOP