
マイケル
みなさんこんばんは!
マイケルです!
マイケルです!

エレキベア
クマ〜〜〜

マイケル
今日は前回に引き続き、WordPress環境構築を進めていくよ!
第二回ということで、
・公開中のWordPressブログのGit管理
・ローカル開発環境構築
・TypeScript、Stylus環境の導入
を実施していきます!
第二回ということで、
・公開中のWordPressブログのGit管理
・ローカル開発環境構築
・TypeScript、Stylus環境の導入
を実施していきます!

エレキベア
ついにこのブログの開発環境を構築するクマね

マイケル
公開中のブログと同等の環境を作るから、
DB環境の移行も必要で少し大変だけどがんばっていこう!
DB環境の移行も必要で少し大変だけどがんばっていこう!

エレキベア
楽しみクマ〜〜〜
公開中ブログのGit管理

マイケル
最終的に構築したい環境は下記の通り!
修正する資産についてはGitHubで管理するようにし、
WordPress側の更新があることも考慮してサーバ、ローカルの双方でGit操作できるようにしてみます!
修正する資産についてはGitHubで管理するようにし、
WordPress側の更新があることも考慮してサーバ、ローカルの双方でGit操作できるようにしてみます!


エレキベア
シンプルな構成クマね

マイケル
というわけでまずは必要なWordPress資産をGit管理していこう!
事前準備

マイケル
作業の準備として、WordPressサーバの
・ssh接続の設定
・DB接続情報の確認
をしておく必要があります。
このあたりは契約しているサーバによって確認方法が違うと思うので、各自調べてみてください!
・ssh接続の設定
・DB接続情報の確認
をしておく必要があります。
このあたりは契約しているサーバによって確認方法が違うと思うので、各自調べてみてください!

エレキベア
しょっぱなから投げたクマ・・・

マイケル
例としてXServerを使用している場合は下記箇所になります!
ssh接続の設定

マイケル
ssh接続はサーバパネルのSSH設定から設定することができます。
詳細は下記のマニュアルを参照しましょう!
詳細は下記のマニュアルを参照しましょう!

DB接続情報の確認

マイケル
DB接続情報についてもサーバパネルのMySQL設定から確認することができます。
後々DBのエクスポートをする際に使用するので、メモしておきましょう!
後々DBのエクスポートをする際に使用するので、メモしておきましょう!

↑DB接続情報
バックアップの取得

マイケル
そして作業前には必ずバックアップを取得しておきましょう!
作業中に何かあっても都会のエレキベアは一切保証しません。。
作業中に何かあっても都会のエレキベアは一切保証しません。。

エレキベア
非情クマ・・・
必要な資産をGitHubへpushする

マイケル
事前準備が完了したところで、資産をGit管理していきます。
まずはGitHubのリポジトリを作成しましょう。
この時、公開するべきではないのでプライベートリポジトリで作成することをおすすめします。
まずはGitHubのリポジトリを作成しましょう。
この時、公開するべきではないのでプライベートリポジトリで作成することをおすすめします。


マイケル
そしてWordPressサーバにssh接続した後、
【ドメイン名】/public_html/配下でgit initし、.gitignoreを作成します!
【ドメイン名】/public_html/配下でgit initし、.gitignoreを作成します!
# WordPressサーバにssh接続後、該当サイトのpublic_htmlに移動
cd 【ドメイン名】/public_html/
# git環境作成
git init
# gitignoreの作成
touch .gitignore

マイケル
.gitignoreにはGit管理したくない資産を指定します。
こちらはWordPress用の定義が公開されているので、こちらをベースに記述しましょう!
こちらはWordPress用の定義が公開されているので、こちらをベースに記述しましょう!
# WordPress - ignore core, configuration, examples, uploads and logs.
# https://github.com/github/gitignore/blob/main/WordPress.gitignore
# Core
#
# Note: if you want to stage/commit WP core files
# you can delete this whole section/until Configuration.
/wp-admin/
/wp-content/index.php
/wp-content/languages
/wp-content/plugins/index.php
/wp-content/themes/index.php
/wp-includes/
/index.php
/license.txt
/readme.html
/wp-*.php
/xmlrpc.php
# Configuration
wp-config.php
# Example themes
/wp-content/themes/twenty*/
# Example plugin
/wp-content/plugins/hello.php
# Uploads
/wp-content/uploads/
# Log files
*.log
# htaccess
/.htaccess
# All plugins
#
# Note: If you wish to whitelist plugins,
# uncomment the next line
#/wp-content/plugins
# All themes
#
# Note: If you wish to whitelist themes,
# uncomment the next line
#/wp-content/themes
# *** Add ***
/wp-content/upgrade/
/ads.txt
/default_page.png
↑.gitignoreの記述(一部追記)
マイケル
自分の環境では更に不要なファイルがあったので、いくつか追記しています。
基本的に管理が必要な資産は
・/wp-content/themes
・/wp-content/plugins
のみなので、git statusで差分を確認しながら定義しましょう!
基本的に管理が必要な資産は
・/wp-content/themes
・/wp-content/plugins
のみなので、git statusで差分を確認しながら定義しましょう!

エレキベア
確か他のフォルダはWordPressのコアファイルだから
基本的にいじらないのだったクマね
基本的にいじらないのだったクマね

マイケル
それと/wp-content/uploadsも容量が大きいため、別途ローカルにコピーしてくる方がよいでしょう。。

マイケル
定義して差分が問題なさそうなら、作成したリポジトリにpushしましょう!
# 差分確認
git status
# 問題なさそうならpush
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/【リポジトリ名】.git
git push -u origin main
↑作成したリポジトリへpush
マイケル
これでリポジトリに対象資産が格納されているはずです!

エレキベア
簡単クマ〜〜〜
.gitへのアクセスを防ぐ

マイケル
リポジトリ作成はこれで完了ですが、public_html配下に作成したため、今の状態ではブラウザ上から.gitにアクセスできるという危険性があります。
そのため、.htaccessに「RedirectMatch 404 /\.git」を追記してURLに.gitが指定された場合には弾くよう対応しておきましょう!
そのため、.htaccessに「RedirectMatch 404 /\.git」を追記してURLに.gitが指定された場合には弾くよう対応しておきましょう!
参考:
ドキュメントルート配下のコンテンツをGitを用いてデプロイする時のセキュリティ上の注意点
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RedirectMatch 404 /\.git
</IfModule>
↑.gitを含むURLを弾く
エレキベア
セキュリティの恐ろしさクマ・・・
ローカル開発環境の構築

マイケル
それではいよいよローカルに開発環境を構築していきます!
WordPressのDocker環境構築

マイケル
まずは最低限のWordPress環境を構築しましょう!
こちらは前回と手順はほぼ同様です。
こちらは前回と手順はほぼ同様です。

マイケル
docker-compose.ymlを下記のように作成して・・・
# プロジェクトフォルダにymlファイルとhtmlフォルダを作成
cd 【プロジェクトパス】
touch docker-compose.yml
mkdir html
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
ports:
- "3306:3306"
environment:
MYSQL_ROOT_PASSWORD: test
MYSQL_DATABASE: wordpress
MYSQL_USER: test
MYSQL_PASSWORD: test
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
volumes:
- ./html:/var/www/html
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: test
WORDPRESS_DB_PASSWORD: test
volumes:
db_data:

マイケル
docker compose up -dで起動するのみ!
最低限の環境を構築するため、http://localhost:8000にアクセスしてwordpressのインストールまで行っておきましょう!
最低限の環境を構築するため、http://localhost:8000にアクセスしてwordpressのインストールまで行っておきましょう!
# コンテナ起動
# http://localhost:8000にアクセスしてwordpressのインストールまで行う
docker compose up -d


エレキベア
ここまでは前回と同様クマね
DB環境の移行

マイケル
そして次はDB環境の移行!
WordPressサーバにssh接続して下記コマンドでDBダンプをエクスポートしましょう!
WordPressサーバにssh接続して下記コマンドでDBダンプをエクスポートしましょう!
# WordPressサーバ内でダンプ出力
mysqldump 【DB名】 -h【ホスト名】 -u【ユーザ名】 -p【パスワード】 --no-tablespaces -P【ポート番号】 > 【出力ファイルパス】
↑DBダンプのエクスポート
マイケル
そしてローカル環境でDockerコンテナを立ち上げた状態で
下記コマンドを実行しDBダンプをインポートします!
下記コマンドを実行しDBダンプをインポートします!
# ローカル環境でインポート
# dockerコンテナを立ち上げた状態で行う
docker exec -i 【コンテナ名】 mysql wordpress -u【ユーザ名】 -p【パスワード】 < 【入力ファイルパス】

マイケル
うまくいけば下記のように本番データがインポートされていることを確認できるはずです!
自分はCocoonテーマを使用しているため、デフォルトよりもテーブルが多い状態となっています。。
自分はCocoonテーマを使用しているため、デフォルトよりもテーブルが多い状態となっています。。


エレキベア
すんなりとデータ移行できたクマね

マイケル
しかし、移行直後の状態ではいくつかの項目が公開中のブログのURLで設定されているため、
こちらをローカルからアクセスするURLに変更する必要があります。
こちらをローカルからアクセスするURLに変更する必要があります。

エレキベア
elekibear.comの設定のままになっているクマね

マイケル
変更が必要なのは
・wp_optionsテーブル – option_valueカラム
・wp_postsテーブル – guidカラム、post_contentカラム
・wp_postmetaテーブル – meta_valueカラム
のようなので、こちらを下記のSQLで置換します!
・wp_optionsテーブル – option_valueカラム
・wp_postsテーブル – guidカラム、post_contentカラム
・wp_postmetaテーブル – meta_valueカラム
のようなので、こちらを下記のSQLで置換します!
今回の場合、ローカルのポートは8000なので、
http(s)://XXX.com -> http://localhost:8000
といった形で変更することになります。
参考:
リモートサーバーのWordPressをローカル(自分のPC)のDockerに移管する方法を実例で解説|コマンドライン(mysqlとmysqldump)
update `wp_options` set option_value=replace (option_value,'http://【ドメイン名】','http://localhost:8000');
update `wp_options` set option_value=replace (option_value,'https://【ドメイン名】','http://localhost:8000');
update `wp_posts` set guid=replace (guid,'http://【ドメイン名】','http://localhost:8000');
update `wp_posts` set guid=replace (guid,'https://【ドメイン名】','http://localhost:8000');
update `wp_posts` set post_content=replace (post_content,'http://【ドメイン名】','http://localhost:8000');
update `wp_posts` set post_content=replace (post_content,'https://【ドメイン名】','http://localhost:8000');
update `wp_postmeta` set meta_value=replace (meta_value,'http://【ドメイン名】','http://localhost:8000');
update `wp_postmeta` set meta_value=replace (meta_value,'https://【ドメイン名】','http://localhost:8000');

マイケル
SQLの実行が完了したら、各カラム内の値が正常に置換されているか確認しましょう!

エレキベア
失敗したら再度ダンプインポートクマ〜〜
Git Cloneとその他資産の移行

マイケル
あとはGitリポジトリ資産とWordPressコアファイルを結合させるのみ!
手順としてはコンテナを一旦停止させた後、マウントしているhtmlフォルダを一旦退避しておきます。
手順としてはコンテナを一旦停止させた後、マウントしているhtmlフォルダを一旦退避しておきます。
# 一旦コンテナは止めておく
docker compose down
# htmlフォルダを一旦退避
mv html/ html_tmp/
↑htmlフォルダの退避
マイケル
そしてhtmlフォルダにGit資産をクローンした後、
退避したファイル(WordPressコアファイル)をhtmlフォルダにコピーします。
コアファイルは.gitignoreで定義しているので、差分は発生しないはずです!
退避したファイル(WordPressコアファイル)をhtmlフォルダにコピーします。
コアファイルは.gitignoreで定義しているので、差分は発生しないはずです!
# htmlフォルダにgit clone
git clone https://github.com/【リポジトリ名】.git html/
# 不要なファイルを削除
rm -rf html_tmp/wp-content/plugins/akismet
rm html_tmp/wp-content/plugins/hello.php
# 退避したフォルダからコピー
cp -r html_tmp/ html/
rm -rf html_tmp/
# 差分の確認
# gitignoreで定義しているため無いはず...
cd html
git status

エレキベア
うまく結合できたクマね

マイケル
あとは/wp-content/uploadsから必要なファイルをローカルにコピーしてくれば環境構築は完了です!
容量がそれなりにあると思うので、ローカルでの確認に必要なものだけコピーしましょう。
自分は画像類とCocoonのリソースファイルを持ってきました。
容量がそれなりにあると思うので、ローカルでの確認に必要なものだけコピーしましょう。
自分は画像類とCocoonのリソースファイルを持ってきました。


エレキベア
これで本番環境と同等になったクマね
接続できるか確認

マイケル
環境ができたらdocker compose up -dして、
http://localhost:8000に接続して表示されるか確認してみましょう!
http://localhost:8000に接続して表示されるか確認してみましょう!


マイケル
このように自分のブログが表示されれば完了です!

エレキベア
やったクマ〜〜〜〜

マイケル
あとは同様に、http://localhost:8000/wp-adminにもアクセスして、
管理画面にもアクセスできるか確認しておきましょう。
管理画面にもアクセスできるか確認しておきましょう。

エレキベア
管理画面も表示されたクマ〜〜
でも公開中のと見た目が同じだから少しビクビクするクマね
でも公開中のと見た目が同じだから少しビクビクするクマね

マイケル
あとは、うまく表示されない場合にはブラウザのキャッシュが影響している可能性もあるため、一度キャッシュを削除して試してみるといいかもしれません・・・。
TypeScript、Stylus環境の導入
TypeScript、Stylus環境の構築

マイケル
ここからは自分の好みになりますが、使い慣れた
TypeScriptとStylusを使用して修正できるようにしてみようと思います。
TypeScriptについては以前、下記記事で触ったのでこちらも参照してみてください!
TypeScriptとStylusを使用して修正できるようにしてみようと思います。
TypeScriptについては以前、下記記事で触ったのでこちらも参照してみてください!

エレキベア
懐かしいクマ〜〜〜

マイケル
nodejsについてはインストールされている前提で進めていきます!
導入手順が分からない方は nodejs インストール 等でググりましょう!
導入手順が分からない方は nodejs インストール 等でググりましょう!

エレキベア
クマはインストール済クマ〜〜〜

マイケル
編集するのはテーマファイルになるため、子テーマフォルダ配下でnpm initします!
自分の場合はCocoonの子テーマを編集するため、wp-content/themes/cocoon-child-master配下になります。
自分の場合はCocoonの子テーマを編集するため、wp-content/themes/cocoon-child-master配下になります。
# 編集するテーマフォルダに移動
cd wp-content/themes/cocoon-child-master
# package.jsonの作成
npm init -y

マイケル
そしてTypeScript、Stylus関連のパッケージをインストールし、
tsconfig.jsonを作成します。
tsconfig.jsonを作成します。
# TypeScript関連のインストール
npm install --save-dev typescript ts-loader
# Stylus関連のインストール
npm install --save-dev stylus stylus-loader
# tsconfig.jsonの作成
./node_modules/.bin/tsc --init

マイケル
今回、tsconfig.jsonの定義は下記のようにしました!
src/ts配下のtsファイルをsrc/js配下にトランスパイルするようにしています。
src/ts配下のtsファイルをsrc/js配下にトランスパイルするようにしています。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "src/js",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": [
"src/ts/**/*"
]
}

エレキベア
シンプルな定義クマね

マイケル
そしてpackage.jsonにbuildコマンドを定義しておきましょう!
下記はStylusのビルドコマンド(build:stylus)とTypeScriptのビルドコマンド(build:ts)を合わせて実行するよう定義してあります。
下記はStylusのビルドコマンド(build:stylus)とTypeScriptのビルドコマンド(build:ts)を合わせて実行するよう定義してあります。
{
"name": "cocoon-child-master",
"version": "1.0.0",
"description": "",
"main": "javascript.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm run build:stylus && npm run build:ts",
"build:stylus": "stylus src/styl/*.styl -o src/css",
"build:ts": "./node_modules/.bin/tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"stylus": "^0.57.0",
"stylus-loader": "^6.2.0",
"ts-loader": "^9.2.8",
"typescript": "^4.6.3"
}
}

マイケル
あとはnpm run buildするだけでトランスパイルが実行されるはずです!
# src/js、src/css配下にトランスパイルしたコードが出力される
npm run build


エレキベア
シンプルで楽に環境を作れたクマね

マイケル
あとはgitignoreにnode_modulesフォルダも管理対象外とするよう定義しておきましょう。
これで環境構築は完了です!
これで環境構築は完了です!
# *** Add ***
/wp-content/themes/cocoon-child-master/node_modules/

エレキベア
やったクマ〜〜〜
簡単な修正とPHPファイルからの読込

マイケル
それでは動作確認も含めて簡単な修正を行ってみましょう!
テーマフォルダ配下にsrc/ts/index.tsを作成し、下記のようにアラートを出す処理を記述してみましょう。
テーマフォルダ配下にsrc/ts/index.tsを作成し、下記のようにアラートを出す処理を記述してみましょう。
/**
* ウィンドウ読み込み時
* @param e
*/
window.addEventListener("load", function(e) {
alert("Hello!!");
});

マイケル
npm run buildするとsrc/js/index.jsが出力されるはずなので、
これをfunction.php内で下記のように読み込みます。
これをfunction.php内で下記のように読み込みます。
// JavaScript追加
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('custom-index-js', get_stylesheet_directory_uri() . '/src/js/index.js');
});

マイケル
この状態でブラウザからアクセスすると、
アラートが表示されることが確認できました!
アラートが表示されることが確認できました!


エレキベア
正常に動作しているクマね

マイケル
そして次はスタイルの修正確認です。
TypeScriptと同様、src/styl/index.stylを作成し、下記のようにカテゴリアイテムの透明度が徐々に上がりながら表示されるように記述してみます。
TypeScriptと同様、src/styl/index.stylを作成し、下記のようにカテゴリアイテムの透明度が徐々に上がりながら表示されるように記述してみます。
/**
* ヘッダー項目の透明度を徐々に上げる
* displayだと効かないのでvisibilityで指定
*/
.navi-in li.menu-item-has-children ul
display: block
visibility: hidden
opacity: 0
transition: all .3s
position: relative
.navi-in li.menu-item-has-children:hover > ul
display: block
visibility: visible
opacity: 1

マイケル
こちらもnpm run buildするとsrc/css/index.cssが出力されるため、
function.phpから読み込みます。
function.phpから読み込みます。
// CSS追加
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('custom-index-style', get_stylesheet_directory_uri() . '/src/css/index.css');
});
// CSSをリロードの度に更新するため、日時をバージョンに設定
add_action('wp_default_styles', function($styles) {
$mtime = filemtime( get_stylesheet_directory() . '/style.css');
$styles->default_version = $mtime;
});

マイケル
この時、キャッシュを無効にするため
CSSのバージョンは日時で指定するようにしています。
CSSのバージョンは日時で指定するようにしています。

マイケル
この状態でブラウザから操作してみると、
下記のようにスタイルが反映されていることが確認できました!
下記のようにスタイルが反映されていることが確認できました!


エレキベア
やったクマ〜〜〜〜
修正内容の反映

マイケル
環境構築は異常となりますが、
最後に修正内容の反映方法についても記述しておきます。
最後に修正内容の反映方法についても記述しておきます。

マイケル
ローカルでの開発時には、下記のように修正用ブランチを切って作業しましょう。
修正が完了したらpushしてmainブランチにマージします。
修正が完了したらpushしてmainブランチにマージします。
# 修正用ブランチを切る
git checkout -b 【ブランチ名】
# 修正内容をpush
git add .
git commit -m "【コミット内容】"
git push origin 【ブランチ名】
# 修正内容をmainブランチへマージ
git checkout main
git merge 【ブランチ名】
git push origin main

エレキベア
ブランチを切って作業しておかないと
本番環境とGit環境で差分が出ている状態になってしまうクマね
本番環境とGit環境で差分が出ている状態になってしまうクマね

マイケル
mainブランチに反映したら、WordPressサーバにssh接続して、git pullするのみ!
以上で修正内容が反映されるはずです!
以上で修正内容が反映されるはずです!
# WordPressサーバにssh接続してpullする
git pull origin main

エレキベア
簡単クマ〜〜〜〜
おわりに

マイケル
というわけで、今回はWordPressの開発環境構築でした!
どうだったかな?
どうだったかな?

エレキベア
手順は少しややこしかったクマが
順番にやればうまくいってよかったクマ
順番にやればうまくいってよかったクマ

マイケル
これでやっといじり放題だね!
でもやっぱりWordPressや既存テーマに対してのカスタマイズになるからどうしてもやり辛いところはありそうだ・・・。
一から作りたいくらいだけど仕方がない・・・。
でもやっぱりWordPressや既存テーマに対してのカスタマイズになるからどうしてもやり辛いところはありそうだ・・・。
一から作りたいくらいだけど仕方がない・・・。

エレキベア
手軽に作れるのがWordPressのメリットだからクマね

マイケル
ひとまず環境はできたから、少しずつブログ改修も行っていこう!
それでは今日はこの辺で!アデュー!!
それでは今日はこの辺で!アデュー!!

エレキベア
クマ〜〜〜〜
【ブログ改造計画】公開中のブログをGit管理して開発環境を構築する【WordPress】 〜完〜
コメント