Webサイト制作者必見!wp-envを活用したWordpresの環境構築 | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサイト制作者必見!wp-envを活用したWordpresの環境構築

Webサイト制作者必見!wp-envを活用したWordpresの環境構築

Webサイトを制作する上でとても便利なツールが代表的CMS(Contents Management System)のWordpressです。

この記事では、そんなWordpressを使ってサイトを制作する時の環境構築に便利なwp-envについてご紹介します。

素早く複数のサイトを制作し、環境を切り替えながら制作を進める上では重宝することでしょう。

1.wp-envとは

wp-envは、WordPress環境を簡単に構築するために開発されたパッケージです。wp-envを使うことによって、コマンドラインから簡単にWordPress環境を構築することができます。コマンドラインから行うことによって、手数を減らすことにつながります。

また、wp-env startコマンドを実行するディレクトリを変更するだけで、複数環境の使い分けも可能です。

WordPressで複数の環境を切り替えたりする時に1つ1つ作成しなくてよいのでとても便利です。

2.Dockerとは

wp-envはコンテナ型の仮想環境を作成するものです。

Dockerを使うことによって、コンテナ型の仮想環境の作成や配布、実行を行うことができます。仮想環境というのは1つのハードウェアの中に、仮想的に環境を構築するため、複数の環境を同時に作成することもできます。

面倒なローカル開発環境の構築をすばやく行うことができ、工数の削減にもなります。

wp-envではDockerを利用するため、まずはDockerをインストールしましょう。DockerはWordpress以外の環境構築にも便利ですので、導入することをオススメです。

3.wp-envのインストール

wp-env を使用してプラグインやテーマのビルド用とテスト用のWordPressのローカル環境を簡単にセットアップすることができます。

次に、Dockerが動作していることを確認し、以下のコマンドを実行してください。
$ cd /path/to/a/wordpress/plugin
$ npm -g i @wordpress/env
$ wp-env start


ここまで実行に成功すると、http://localhost:8888 (ユーザー名: admin、パスワード: password) でローカル環境が利用できます。

wp-envは、パッケージ管理システムのnpmを利用して開発されているため、Node.jsをインストールします。Node.jsの公式サイトから、推奨版(LTS)をダウンロードしてセットアップしておきましょう。

次に、適当な場所にフォルダーを作成しnpmコマンドで初期化しましょう。

そして、作成したフォルダに wp-envをセットアップします。
$ npm i @wordpress/env --save-dev


セットアップが終わったら、package.json ファイルにコマンドを追記します。「scripts」の所に次のように追加します。
“scripts”: {
“wp-env”: “wp-env”
}


次のようにコマンドを打ち込むと、webサーバーが起動します。
$ npm run wp-env start


Webブラウザから「localhost:8888」にアクセスします。

管理画面からログインするためには以下の情報を使うことで可能です。

URL: http://localhost:8888/wp-login.php
パスワード: admin

続いて、サーバーを再起動します。
$ npm run wp-env start —update


こうして管理画面にログインした後、Pluginsを見ると WP Multibyte Patchがインストールされ、有効化されています。ご紹介したように、環境ファイルにあらかじめプラグインを記載しておくことで、自動的にインストールすることができます。

4.自作テーマファイルのインストール

準備した環境でオリジナルのテーマを作成してみます。まずは、プロジェクトのフォルダの中に適当なフォルダを作成します。

そして、フォルダの中にテーマファイルを構成する最低限のファイルである、index.phpstyle.cssの2つのファイルを準備します。

次に、.wp-env.jsonファイルに対して、準備したテーマファイルをインストールするための設定を追記します。
{
"themes": [
"./tomosta"
],
“plugins”: [
“https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip”
]
}


これで、再度再起動します。
$ npm run wp-env start —update


これで、管理画面からインストールテーマが記載されている、Themesを確認します。今作成したテーマがインストールした状態になっているはずです。これを有効化しましょう。

まとめ

今回の記事では、Wordpressの環境を素早くインストールする方法として、wp-envを活用する方法をご紹介してきました。

複数の環境を準備して切り替えるときにはとても便利ですので、導入を検討してみてはいかがでしょうか。

Webサイトの数も加速度的に増え、短納期化も進んでいく中で、スピード化、効率化は必須です。

関連記事

ページ先頭へ