【Wordpress】ワードプレスの開発環境・テスト環境構築 | サーバー移行手順

ワードプレスの開発環境を構築する手順。
サーバー移行する際も同じです。
ローカルに作成したい場合、Windows上であればVMWare等のバーチャルマシーンCentOS上に作ると良いでしょう。 サーバー移行に必要なものは、
  • Wordpressのファイル(フォルダ)
  • データベースのデータ(ダンプファイル)
の2点です。
wp-adminの管理者パスワードがわからない場合は、新たに設定可能です。
開発用なのでBASIC認証などで公開されない形にして、
簡単なパスワードに設定し直すのも良いでしょう。
移行前移行後
http://kowloonet.net/http://192.168.1.100/wordpress/

Wordpressのファイルを本番環境からダウンロード

サーバーから直接FTP等でダウンロードするのも良いですが、
コマンドが使える環境では、tar.gz に圧縮すると、サーバー間のファイル移動に好都合です。
フォルダ圧縮
# tar cvzf wordpress.tar.gz wordpress
wordpress/
wordpress/wp-config.php
wordpress/index.php
wordpress/license.txt
wordpress/readme.html
・
・
圧縮されたファイル wordpress.tar.gz が生成されますので、
こちらをFTP等でダウンロードします。
gzip形式で圧縮
 tar cvzf 圧縮後のファイル名.tar.gz ファイル名
gzip形式で解凍・展開
tar zxvf ファイル名.tar.gz
zip形式で圧縮
zip 圧縮後のファイル名.zip -r ファイル名
zip形式で解凍・展開
unzip ファイル名.zip
unzip ファイル名.zip -d 展開先ディレクトリ

データベースのエクスポート

wordpressで使用しているデータベース名を wp-config.php で確認。
コマンドが使える環境でない場合はmysqladminを利用してください。
ダンプファイル作成
# mysqldump -uユーザ名 -p  wordpress_db >  wordpress_db_dump.sql
wordpress_db_dump.sql が作成されますので、こちらもFTP等でダウンロード。

ファイルの展開と設定

ドキュメントルート /var/www/html/ 直下に展開します。
FTPなどでアップロードして配置してください。
ファイル展開
# cd /var/www/html/
# tar zxvf wordpress.tar.gz 
wordpress/
wordpress/wp-config.php
wordpress/index.php
wordpress/license.txt
・
・
ファイルの所有者変更
# chown -R apache:user wordpress/
所有者をapache
グループをuser
にしてuserでもファイルの書き込み変更を行えるようにします。
開発環境なので、パーミッションを
ディレクトリは775
ファイルは664
にしておきます。
ファイルのパーミッション変更
# find wordpress/  -type d -exec chmod 775 {} \;
# find wordpress/ -type f -exec chmod 664 {} \;
本番環境では下記のパーミッション変更も追加で実施
# chmod 606 ./wordpress/.htaccess
# chmod 404 ./wordpress/wp-config.php
※サーバー移転などでの本番環境のパーミッションはサイトルールに従ってください。
パーミッション確認
# cd wordpress/
# ls -la | awk 'NR>1{cmd="stat "$NF" -c %a";cmd|getline c;close(cmd);print c,$0}'
775 drwxrwxr-x  6 apache user  4096 Nov 20 11:53 .
755 drwxr-xr-x 12 user user  4096 Nov 20 11:00 ..
775 drwxrwxr-x  2 apache user  4096 Nov 18 18:24 img
664 -rw-rw-r--  1 apache user   420 Nov 18 13:10 index.php
664 -rw-rw-r--  1 apache user 19550 Nov 18 13:09 license.txt
664 -rw-rw-r--  1 apache user    68 Nov 18 13:10 php.ini
664 -rw-rw-r--  1 apache user  7447 Nov 18 13:09 readme.html
664 -rw-rw-r--  1 apache user  6919 Nov 18 13:09 wp-activate.php
775 drwxrwxr-x  9 apache user  4096 Nov 18 18:24 wp-admin
664 -rw-rw-r--  1 apache user   369 Nov 18 13:09 wp-blog-header.php
664 -rw-rw-r--  1 apache user  2340 Nov 18 13:09 wp-comments-post.php
664 -rw-rw-r--  1 apache user  4450 Nov 18 13:09 wp-config.php
664 -rw-rw-r--  1 apache user  3807 Nov 18 13:09 wp-config-sample.php
775 drwxrwxr-x  8 apache user  4096 Nov 18 18:24 wp-content
664 -rw-rw-r--  1 apache user  3847 Nov 18 13:09 wp-cron.php
775 drwxrwxr-x 20 apache user 12288 Nov 18 18:24 wp-includes
664 -rw-rw-r--  1 apache user  2502 Nov 18 13:09 wp-links-opml.php
664 -rw-rw-r--  1 apache user  3306 Nov 18 13:09 wp-load.php
664 -rw-rw-r--  1 apache user 39551 Nov 18 13:09 wp-login.php
664 -rw-rw-r--  1 apache user  8403 Nov 18 13:09 wp-mail.php
664 -rw-rw-r--  1 apache user 18962 Nov 18 13:09 wp-settings.php
664 -rw-rw-r--  1 apache user 31085 Nov 18 13:09 wp-signup.php
664 -rw-rw-r--  1 apache user  4764 Nov 18 13:09 wp-trackback.php
664 -rw-rw-r--  1 apache user  3068 Nov 18 13:09 xmlrpc.php

データベースの設定

データベース名、MySQLユーザ名は本番環境と同じである必要はありません。
ご都合に合わせて設定して下さい。今回は、
デーーベース名wordpress_db
MySQLユーザ名user
MySQLパスワード1234
データベースサーバーlocalhost
で設定。データベース名以外は本番のものから変更しておきました。
wp-config.phpの修正
# cd wordpress/
# vi wp-config.php
/** WordPress のためのデータベース名 */
define('DB_NAME', 'wordpress_db');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'user');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '1234');

/** MySQL のホスト名 */
#define('DB_HOST', 'mysql.xxxxxxx.com');
define('DB_HOST', 'localhost');
・
・
/**
 * WordPress データベーステーブルの接頭辞
 *
 * それぞれにユニーク (一意) な接頭辞を与えることで一つのデータベースに複数の WordPress を
 * インストールすることができます。半角英数字と下線のみを使用してください。
 */
$table_prefix  = 'wp369041';
vi を使わずにテキストエディタで修正したものを配置しても同じです。
データベースの作製
# mysql -uuser -p
mysql>CREATE DATABASE wordpress_db;
データベースのインポート
# mysql -uuser -p1234 wordpress_db< wordpress_db_dump.sql
コマンドが使えない場合はmysqladminを利用して下さい。
今回は、本番URL
http://kowloonet.net/

http://192.168.1.100//wordpress/
でアクセスできるように変更します。
サイトURLが記載されている XXXoptions テーブルのカラム option_name の値 home と siteurl のカラム option_value の値を変更します。
XXXは wp-config.phpに記載されている $table_prefix の文字列になります。
テーブル名の変更が無い場合は「wp_」で、テーブル名は「wp_options」になります。
私の環境では「wp369041」でしたので、テーブル名は「wp369041options」になります。
サイトURL変更
mysql> USE wordpress_db
mysql> SELECT * FROM wp369041options WHERE option_name IN ('home','siteurl');
+-----------+-------------+-------------------------------+----------+
| option_id | option_name | option_value                  | autoload |
+-----------+-------------+-------------------------------+----------+
|         2 | home        | http://kowloonet.net/             | yes      |
|         1 | siteurl     | http://kowloonet.net/               | yes      |
+-----------+-------------+-------------------------------+----------+
2 rows in set (0.00 sec)

mysql> UPDATE wp369041options SET option_value = 'http://192.168.128.100/wordpress/'
 where option_name IN ('home','siteurl');
本番環境のwp-adminの管理者ユーザのパスワードは長くて複雑な場合が多々あるので、
簡易なものに変更しておきます。
パスワードが不明な場合もこちらの方法で再設定可能です。
管理者ユーザは XXXusers テーブルにあるので、
管理者ユーザの確認・パスワード変更
mysql> SELECT * FROM wp369041users;
で確認。
しかし、これだと管理者が誰かわからないので、「usermeta」テーブルも参照して、
mysql> SELECT u.user_login FROM wp369041users u, wp369041usermeta um WHERE u.ID = um.user_id AND um.meta_key LIKE '%capabilities' AND um.meta_value LIKE '%administrator%';
+------------+
| user_login |
+------------+
| admin     |
| user     |
+------------+
2 rows in set (0.00 sec)
ユーザ名「admin」のパスワードを「pass」に変更します。
パスワード変更
mysql>UPDATE wp369041users SET user_pass = MD5('pass')  WHERE user_login = 'admin';
必要があれば管理者のメールドレスも変更。
パスワード変更
mysql> update wp369041users set user_email = 'メールアドレス'  WHERE user_login = 'admin';
http://192.168.1.100//wordpress/
http://192.168.1.100//wordpress/wp-admin/
にアクセスして表示、動作できればOK。

Googleマテリアルアイコン - Material icons

Googleマテリアルアイコンの使用例

Google Material icons
HTML
<head>
・
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
・
</head>
<body>
・
<div class="search-box">
<input type="text" placeholder="遠征検索" v-model="keyword" class="encolle-global-search" />
</div>
・
</body>
※v-model はvue使用時の記述です。
CSS
.encolle-global-search{
display:inline-block;
width: 300px;
font-size: 1.2rem;
height: 30px;
line-height: 1;
box-sizing: border-box;
padding: 5px 4px 5px 28px;
color: #687c98;
border-radius: 5px;
font-weight: 700;
border: 1px solid #dcdfe6;
transition: border-color .4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.search-box{
position: relative;
display: inline-block;
}
.search-box::before{
content: '\e8b6';
font-family: 'Material Icons';
font-size: 24px;
color: #ccc;
font-family: 'Material Icons';
position: absolute;
top: 4px;
left: 4px;
}