WordPressでブログを書き始めてみて自分独自のテーマを作ったり、サイト作成のお仕事を請け負ったりした際に必要になるのがPCのローカル環境で動くWordPress仮想環境です。
今回はWordPress用の仮想環境をDockerを用いて構築していった時のメモとして共有したいと思います。
本記事をご覧になっている方で「こうした方がいいよ!」などご意見ございましたら、コメントにお願いします。
今回の仮想環境はDockerを使用するため公式サイトよりお使いのPCに適したOSのインストーラーでDockerをインストールしてください。
Dockerで仮想環境を構築する際の設計図である docker-compose.yaml ファイルを作成していきます。
docker-compose.yaml という名前でファイルを新規作成してください。
作成したファイルをVSCodeなどのコードエディタで開いて下記をコピペします。
version: '3'
services:
db:
image: mysql
platform: linux/arm64/v8
volumes:
- ./db:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
phpmyadmin:
depends_on:
- db
image: phpmyadmin/phpmyadmin
restart: always
ports:
- '8080:80'
environment:
PMA_HOST: db
MYSQL_ROOT_PASSWORD: password
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
volumes:
- ./setting_files/phpmyadmin-misc.ini:/usr/local/etc/php/conf.d/phpmyadmin-misc.ini
wordpress:
depends_on:
- db
image: wordpress:latest
restart: always
ports:
- "8000:80"
volumes:
- ./wordpress_devel:/var/www/html
- ./wp-hp-theme:/var/www/html/wp-content/themes/wp-hp-theme
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
volumes:
db_data:
WordPressのテーマ開発用にブランクテーマを準備します。すでに開発対象のテーマを持っている場合はスキップしてください。
ブランクテーマはネットで検索すると様々な種類が見つかりますので、そこからダウンロードしてください。
おすすめのブランクテーマのジェネレータサイトは下記のボタンより。
ここでダウンロードしたブランクテーマのフォルダ名を wp-hp-theme に変更して docker-compose.yaml を配置したディレクトリに移動させてください。
デフォルトの設定のままでは、ファイルアップロードなどに制限がかかっており、テーマ開発時にエラーが発生します。
そこで、 phpmyadmin-misc.ini というファイルで制限を解除していきます。
docker-compose.yaml を作成したディレクトリで setting_files というフォルダを作成してその中に phpmyadmin-misc.ini というファイルを作成してください。続いて、下記のコードをコピペします。
allow_url_fopen = Off
max_execution_time = 600
memory_limit = 64M
post_max_size = 64M
upload_max_filesize = 64M
ここまでの作業でWordPressのテーマ開発用の仮想環境構築の準備は完了しました。
続いてターミナル(PowerShell)を開いて下記のコマンドを実行します。
docker-compose up -d
上記のコマンドを実行して下記のように表示されれば仮想環境の構築は完了です。
[+] Building 0.0s (0/0)
[+] Running 5/5
✔ Network saientec_wp_theme_default Created 0.0s
✔ Container saientec_wp_theme-db-1 Started 0.2s
✔ Container saientec_wp_theme-wordpress-1 Started 0.4s
✔ Container saientec_wp_theme-phpmyadmin-1 Started 0.4s
仮想環境の構築をした後にブラウザで下記の表に示すURLにアクセスすることでWordPress関連のページにアクセスできます。
サイト名 | URL | 詳細 |
phpAdmin | http://localhost:8080 | phpAdminにアクセスするためのURLです |
WordPress HP | http://localhost:8000 | 仮想環境に構築したWordPressのページにアクセスできます |
WordPress管理画面 | http://localhost:8000/wp-admin/ | WordPressの管理画面にアクセスできます。 初回はこちらにアクセスして設定を完了させてください。 |
WordPressの初期設定を行い、 外観→テーマ から先ほどダウンロードしたブランクテーマをHPのテーマとして割り当てます。
ここまでの手順を踏むことでテーマ開発の準備が完了しました。
VSCodeなどで先ほど追加したブランクテーマのフォルダを開いて、編集を行うことでテーマ開発ができるようになります。
テーマファイルを編集した後に、WordPressのページにアクセス・リロードすることでテーマ開発を行うことができます。
今回はWordPressのテーマ開発にあたっての仮想環境の構築についてご紹介してきました。
コーポレートサイトを作る際にもこのテーマ開発は非常に強力ですのでぜひ活用ください。
最後まで読んでくれてありがとうございました!
よかったらお気に入り登録をお願いします!!!!