WordPressで開発環境を構築する方法

> Web初心者必見 > WordPress > 開発環境整備

2022年11月02日更新

今回はWeb制作の現場では、どのようにWordPressの開発環境を構築しているのかをお伝えしようと思います。

すでに公開しているWordPressでのサイトは、何もしないデフォルトの状態だと本番公開されているテーマのファイルを編集して表示を確認することになってしまいます。

今回お伝えする方法は、自分たち開発者だけが見ることができるテーマで開発・修正などの作業ができる環境を作ることができます。

もちろん、私が現場で仕事をしていて行き着いただけのものなので場合によっては不都合なことがあるかもしれませんが一つの案としてご覧ください。

それでは行きましょう！

Table of Contents

開発用テーマを作成

では、まずは開発用テーマを作成しましょう。
とは言っても何も難しいことはなく、本番用テーマを中身のファイルごと複製して、開発用テーマとしてフォルダ名を変更し、開発用テーマ直下のstyle.cssの中身を一部書き換えるだけです。

例えば、themesフォルダの中身がこんな感じだとしていたとすると

~/wp-content/themes/
└ sample（本番用テーマ）

本番用テーマを複製して、sample-develop というフォルダ名（フォルダ名は自由に決めてください）で開発用テーマを作りましょう。

~/wp-content/themes/
├ sample（本番用テーマ）
└ sample-develop（開発用テーマ）

こんな感じです。

続きまして、sample-develop の直下にある style.css ファイルを開いて、一部書き換えます。

本番用テーマ直下の style.css がこんな感じだとします。

/*
Theme Name: SAMPLE
Description: 本番用テーマです
*/

（style.css 内には他にもテーマの情報を書くことができますが今回は必要無いので割愛します）

開発用テーマ直下の style.css は、例えばこのように書き換えましょう。

/*
Theme Name: SAMPLE DEVELOP
Description: 開発用テーマです
*/

書き換えることができたら保存して、sample-develop フォルダをアップロードしましょう。
WordPressの管理画面の「外観」>「テーマ」を見てみると、「SAMPLE」と「SAMPLE DEVELOP」というテーマが確認できるかと思います。

次は、「このユーザーでログインすると開発用テーマで表示されます」という、開発用のユーザーを作成していきます。

（任意）Allow Multipul Acount （プラグイン）をインストール

で、開発用のユーザーを作る前に、私はこのステップを踏むので一応書いておきます。

Allow Multipul Acount は、別にインストールする必要は無いので飛ばしていただいて構いません。
私がAllow Multipul Acountをインストールしている理由は２つあります。

WordPressは１つのメールアドレスで複数のユーザーを作ることができない
WordPressは新規追加するユーザーのユーザー名で「＠（アットマーク）」を使えない

Allow Multipul Acount はこの問題を解決してくれるプラグインです。

ただし、上記２つの問題は、WordPressのセキュリティ上の対策がゆえの問題であるので、Allow Multipul Acount をインストールすることによりセキュリティが少々脆弱になることは承知の上で自己責任でインストールしてご使用ください。

また、１つ目の問題の「１つのメールアドレスで複数のユーザーを作れない」件は、Gmailを使っている場合は解決する必要がありません。

Gmailのメールアドレスは、＠の前に「+」を書くと１つのメールアドレスなのに、別々のメールアドレスとして使用することができます。

具体的に言うと、例えば、ユーザー作成するときに登録するメールアドレスが sample@gmail.com だとすると、

sample+techstock@gmail.com
sample+sample@gmail.com
sample+hoge@gmail.com
sample+fuga@gmail.com

といったメールアドレス宛のメールは、すべてsample@gmail.com に届きますが、WordPressはこれらのメールアドレスを別々のメールアドレスとして認識してくれます。

なので、別にインストールしなくても良いのですが、一度使ってみたい方は使ってみてください。

プラグインはこちらからダウンロードしてください。

allow-multiple-accounts.3.0.4 をダウンロード

WordPressの管理画面の「プラグイン」>「新規追加」の画面上部にある「プラグインのアップロード」を押すとアップロードするファイルを選択できますのでそこからzipファイルをアップロードしてください。
「有効化しますか？」的なことを聞かれると思うので「有効化」してください。

このプラグインは何かしらを設定する機能がついていますが特に設定することもないのでこのステップは完了でOKです。

開発者ユーザーを作成

では、開発用ユーザーを作成しましょう。
このステップは特筆すべきことはあまり無いのでサクッと行きましょう。

WordPressの管理画面の「ユーザー」>「新規追加」で必要な情報を入力してユーザーを作成してくだいさい。

「権限グループ」は「管理者」に設定しておきましょう。

開発用ユーザーを作成できたら、次は、「このユーザーでログインすると開発用テーマで表示されます」を実現できるプラグイン「My Theme Change」をインストールして少し書き換え作業を行います。

— 追記＠2023年10月23日 —————————————–

「このユーザーでログインすると開発用テーマで表示されます」の機能を実現するプラグイン「My Theme Change」を次のセクションで紹介していますが、「My Theme Change」は、プラグインファイルのコードを編集する必要があり、ゴリゴリのエンジニアでない限り取っつきにくいものだと思います。

そこで、プラグインファイルのコード編集が不要でこういった機能実現できるプラグインをAIに作ってもらいました。

お好みのプラグインを選んで使用してみてください。

特定のユーザーでログインすると特定のテーマで表示されるプラグインをAIに作ってもらった

— END 追記＠2023年10月23日 —————————————–

— 追記＠2023年12月9日 —————————————-

WordPress 6.4 系以降、上記記事のプラグインが機能しなくなりました。。。

上記記事のプラグインを使用する場合は、ご自身のWordPressのバージョンをご確認の上、自己責任でご使用ください。

— END 追記＠2023年12月9日 —————————————-

My Theme Change （プラグイン）をインストール＆一部書き換え

では、特定のユーザーでログインすると特定のテーマで表示する、言い換えると、ユーザーごとに表示するテーマを切り替えるプラグイン「My Theme Change」をインストール＆少し書き換えを行います。

こちらから「My Theme Change」をダウンロードしてください。

my_theme_change をダウンロード

WordPressの管理画面の「プラグイン」>「新規追加」の画面上部にある「プラグインのアップロード」を押すとアップロードするファイルを選択できますのでそこからzipファイルをアップロードしてください。

「有効化しますか？」的なことを聞かれると思いますが、この時点では有効化してもしなくてもOKですが、、、もう有効化しておきましょうか。

「有効化」しましょう！

FileZillaやFFFTPなどのFTPクライアントソフトでサーバーと接続できる方は、

~/ wp-content / plugins / my_theme_change / my_theme_change.php

をダウンロードしてエディタで開いてください。

FTPクライアントを使っていない方は、WordPressの管理画面で

「プラグイン」>「プラグインファイルエディター」

で右上の「編集するプラグインを選択」で「My Theme Change」を選択して編集してください。

「My Theme Change」の中身はこんな感じのことが書かれています。

<?php
/*
	Plugin Name: My Theme Change
*/
function my_theme_change($template) {
	if ( function_exists( 'wp_get_current_user' ) ) {
		// wp_get_current_user関数が定義されている場合
		$user = wp_get_current_user();
	} else {
		// wp_get_current_user関数が未定義の場合
		$user = (object)array( 'data'=>null );
	}

	if($user->ID === 2) { //開発用のユーザーIDを指定
		return 'sample-develop'; //開発用テーマのフォルダ名
	} else {
		return $template;
	}
}
add_filter('template', 'my_theme_change');
add_filter('stylesheet', 'my_theme_change');
?>

コメントアウトで書かれている通り、