【WordPress】WordPressのテーマ開発用仮想環境をDockerで構築する

はじめに

WordPressでブログを書き始めてみて自分独自のテーマを作ったり、サイト作成のお仕事を請け負ったりした際に必要になるのがPCのローカル環境で動くWordPress仮想環境です。

今回はWordPress用の仮想環境をDockerを用いて構築していった時のメモとして共有したいと思います。

本記事をご覧になっている方で「こうした方がいいよ!」などご意見ございましたら、コメントにお願いします。

Dockerのインストール

今回の仮想環境はDockerを使用するため公式サイトよりお使いのPCに適したOSのインストーラーでDockerをインストールしてください。

Docker 公式

docker-compose.yamlの作成

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のテーマ開発用にブランクテーマを準備します。すでに開発対象のテーマを持っている場合はスキップしてください。

ブランクテーマはネットで検索すると様々な種類が見つかりますので、そこからダウンロードしてください。

おすすめのブランクテーマのジェネレータサイトは下記のボタンより。

WordPressブランクテーマ

ここでダウンロードしたブランクテーマのフォルダ名を wp-hp-theme に変更して docker-compose.yaml を配置したディレクトリに移動させてください。

phpmyadmin-misc.ini の作成

デフォルトの設定のままでは、ファイルアップロードなどに制限がかかっており、テーマ開発時にエラーが発生します。

そこで、 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

仮想環境に構築したWordPressにアクセスする

仮想環境の構築をした後にブラウザで下記の表に示すURLにアクセスすることでWordPress関連のページにアクセスできます。

サイト名URL詳細
phpAdminhttp://localhost:8080phpAdminにアクセスするためのURLです
WordPress HPhttp://localhost:8000仮想環境に構築したWordPressのページにアクセスできます
WordPress管理画面http://localhost:8000/wp-admin/WordPressの管理画面にアクセスできます。
初回はこちらにアクセスして設定を完了させてください。

WordPressの初期設定を行い、 外観→テーマ から先ほどダウンロードしたブランクテーマをHPのテーマとして割り当てます。

WordPressのテーマ開発の実施

ここまでの手順を踏むことでテーマ開発の準備が完了しました。

VSCodeなどで先ほど追加したブランクテーマのフォルダを開いて、編集を行うことでテーマ開発ができるようになります。

テーマファイルを編集した後に、WordPressのページにアクセス・リロードすることでテーマ開発を行うことができます。

終わりに

今回はWordPressのテーマ開発にあたっての仮想環境の構築についてご紹介してきました。

コーポレートサイトを作る際にもこのテーマ開発は非常に強力ですのでぜひ活用ください。

最後まで読んでくれてありがとうございました!

よかったらお気に入り登録をお願いします!!!!

コメントを残す

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