初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

Switch language

当Webサイトのコンテンツ内にはアフィリエイト広告、Googleアドセンス広告が含まれます。
広告主によって不適切な広告が表示されていることに気付いた方は、お手数でございますが該当の広告の「×」を押していただき、「この広告の表示を停止」し所定の流れに従ってください。

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

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

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

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

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

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

それでは行きましょう!

開発用テーマを作成

では、まずは開発用テーマを作成しましょう。
とは言っても何も難しいことはなく、本番用テーマを中身のファイルごと複製して、開発用テーマとしてフォルダ名を変更し、開発用テーマ直下の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をインストールしている理由は2つあります。

  1. WordPressは1つのメールアドレスで複数のユーザーを作ることができない
  2. WordPressは新規追加するユーザーのユーザー名で「@(アットマーク)」を使えない

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

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

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

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

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

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

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

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

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

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

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

開発者ユーザーを作成

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

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

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

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


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

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

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

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

(絶対にこちら↓↓↓の方が良いと思いますが(笑))

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

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');
?>

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

  1. 開発用ユーザーのIDを指定
  2. 開発用テーマのフォルダ名を指定

します。

開発用ユーザーのIDを指定

1の開発用ユーザーのIDを指定、ですが、開発用ユーザーのIDを確認するには、WordPressの管理画面の「ユーザー」でユーザー一覧の中の開発ユーザーにカーソルを合わせると画面左下に表示されるURLに含まれる「user_id=2」のような文字列で確認できます。

ただし、現在、開発用ユーザーでログインしている場合はカーソルをホバーしてもそのような表示がされませんのでご注意ください。

他のユーザーでログインし直すと確認できますが、面倒くさいという方は「Show User ID」というプラグインをインストールするとユーザー一覧画面に「ID」の列が追加されて確認できるようになりますのでこちらもご検討ください。

Show User ID

開発用テーマのフォルダ名を指定

続いて、2、開発用テーマのフォルダ名を指定、についてですが、この記事の初めの方にお伝えした、開発用テーマを作成するステップで開発用テーマのフォルダ名を決めていただいたものです。
例としてフォルダ名は「sample-develop」にしましたね。


以上、2点を修正して保存してください。

FTPクライアントを使っている方は元の場所に上書きアップロードしておきましょう。

動作確認

お疲れさまでした!
これで開発環境の構築は完了です。

正常に動作しているか確認してみましょう。

開発ユーザーでWordPressにログインして、「外観」>「テーマ」を見て見ましょう。

有効になっているテーマが開発用テーマになっていれば成功です!

関連記事

Mac で sass-autocompile を使う方法
— 追記 @2023年10月26日 ——————R
Live Sass Compilerでコンパイル後にインデントがスペースになってしまう時の解決策【VSCode】
Atomがサービス終了してVSCodeに乗り換えようとしていました 2022年12月15日にAtomエディタがサービス終了し、私はAtomか
特定のユーザーでログインすると特定のテーマで表示されるプラグインをAIに作ってもらった
近頃、Chat GPT なるものが話題ですが、私もChat AI 的なサブスクリプションサービスを契約してみました。 お題目にもある通り、そ
2023年6月20日以降、SourceTreeでプッシュできなくなったのはBitbucketの SSHホスト鍵が更新されたから
2023年6月20日、Bitbucketの「SSHホスト鍵」が更新され、今までSSH接続していたユーザーはいきなりプッシュできなくなって焦っ
【脱Atom】VSCodeでscssの出力先をcssフォルダ内にする方法
2022年12月15日にAtomエディタがサービス終了し、私を含め、コーディングエンジニアたちはAtomに替わるエディタソフトを探さなければ
必要最低限で必要十分なスペックを備えたおすすめPC|Webデザイナー・コーダーのためのPC選び
「あなたにピッタリなPCはこれだ!」と僭越ながらアドバイスさせていただく記事を書こうと思い、キーボードを叩いています。 こんにちは。管理人で



コメントを残す

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