【ブログ改造計画】公開中のブログをGit管理して開発環境を構築する【WordPress】

# WordPressサーバにssh接続後、該当サイトのpublic_htmlに移動
cd 【ドメイン名】/public_html/

# git環境作成
git init

# gitignoreの作成
touch .gitignore

# 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

# 差分確認
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

<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>

# プロジェクトフォルダに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:

# コンテナ起動
# http://localhost:8000にアクセスしてwordpressのインストールまで行う
docker compose up -d

# WordPressサーバ内でダンプ出力
mysqldump 【DB名】 -h【ホスト名】 -u【ユーザ名】 -p【パスワード】 --no-tablespaces -P【ポート番号】 > 【出力ファイルパス】

# ローカル環境でインポート
# dockerコンテナを立ち上げた状態で行う
docker exec -i 【コンテナ名】 mysql wordpress -u【ユーザ名】 -p【パスワード】 < 【入力ファイルパス】

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

# 一旦コンテナは止めておく
docker compose down

# htmlフォルダを一旦退避
mv html/ html_tmp/

# 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

# 編集するテーマフォルダに移動
cd wp-content/themes/cocoon-child-master

# package.jsonの作成
npm init -y

# TypeScript関連のインストール
npm install --save-dev typescript ts-loader

# Stylus関連のインストール
npm install --save-dev stylus stylus-loader

# tsconfig.jsonの作成
./node_modules/.bin/tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "src/js",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src/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"
  }
}

# src/js、src/css配下にトランスパイルしたコードが出力される
npm run build

# *** Add ***
/wp-content/themes/cocoon-child-master/node_modules/

/**
 * ウィンドウ読み込み時
 * @param e
 */
window.addEventListener("load", function(e) {
    alert("Hello!!");
});

// JavaScript追加
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('custom-index-js', get_stylesheet_directory_uri() . '/src/js/index.js');
});

/**
 * ヘッダー項目の透明度を徐々に上げる
 * 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

// 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;
});

# 修正用ブランチを切る
git checkout -b 【ブランチ名】

# 修正内容をpush
git add .
git commit -m "【コミット内容】"
git push origin 【ブランチ名】

# 修正内容をmainブランチへマージ
git checkout main
git merge 【ブランチ名】
git push origin main

# WordPressサーバにssh接続してpullする
git pull origin main