Ubuntu

WordPress クローン環境の構築とテーマの変更

このサイトを始めるにあたって選んだテーマはTwentySeventeen。リストの点が本文より左側に表示されるところから始まって、色々としっくりこなかった。
それをなんとかカスタマイズして、なんとかエディターでも似たような表示になるようカスタマイズして…とかなり手間を掛けた。



広告


カスタマイズをしながら感じていたのが「WordPressの仕組みをちゃんと理解していないことが一番の原因なんだろうけど…それにしてもテーマが複雑すぎる。」だった。1つの要素が本当に多くのスタイルを積み重ねて作られている。

ここ1年くらい、もう少しシンプルなテーマに変えたいと考えていたので、クローン環境でテーマを試しまくってから本番環境にリリースしようと考えた。

環境

テスト環境はこちら。

  • Ubuntu 18.04
    temp.hogeserver.hogeddns.jp で名前解決ができるようになっている。
  • Apache
  • MariaDB
  • WordPressはいつも最新版になっていく

毎日バックアップを取っているので、クローンはバックアップから作成する。別に最新じゃなくてもいいし。

クローン環境の構築

OS

先日までKopanoのパッケージをアップグレードする記事を書いていたが、この環境をそのまま使う。

Welcome to Ubuntu 18.04.5 LTS (GNU/Linux 4.15.0-142-generic x86_64)

Webサーバー

これもテスト環境にインストール済みなので、そのまま使う。

$ apache2 -v
Server version: Apache/2.4.29 (Ubuntu)
Server built:   2020-08-12T21:33:25

データベース

これもテスト環境にインストール済みなので、そのまま使う。

$ mariadb --version
mariadb  Ver 15.1 Distrib 10.1.47-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2

ユーザーとデータベースを作る。
knooto / WordPress のデータベースの文字コードと照合順序
※この調査凄いなぁ。日本語サイトはUTF8を推奨しているけれど、でも、そうじゃないって調べて教えてくれている。

$ sudo mysql
MariaDB [(none)]> create user wordpress;
MariaDB [(none)]> set password for wordpress = password('wordpresspassword');
MariaDB [(none)]> create database wordpress default character set utf8mb4 collate utf8mb4_unicode_520_ci;
MariaDB [(none)]> grant all privileges on wordpress.* to wordpress@'%';
MariaDB [(none)]> quit

PHPからMySQLにアクセスするために、追加モジュールをインストール。

$ sudo apt install php-mysql

WordPressインストール

いったんまっさらな環境を作り、データーベースとディレクトリをまるごと復元する作戦。

日本語サイトから最新版をダウンロードしてくる。
WordPress.org 日本語 / ダウンロード

PHPは7.3以上と書かれているが、Ubuntu 18.04はリポジトリに7.2までの登録しかない。
クローン環境ではWordpressが動けばいいので、気にしない。

$ unzip latest-ja.zip
$ sudo chown -R www-data:www-data wordpress/
$ sudo mv wordpress/ /var/www/

このテスト環境では、Kopanoを同じドメインに同居させる形を取る。

基本的にはWordPressがメインになるが、webappディレクトリだけはKopanoに繋ぐ。
Kopanoはconf-availableに入っているファイルがちょっと変な感じがするので、これを無効にしつつ、ちょっと改変してincludeする。

/etc/apache2/sites-available/temp.conf

<VirtualHost *:80>
    ServerName temp.hogeserver.hogeddns.jp
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI}
</VirtualHost>

<VirtualHost *:443 >
    ServerName temp.hogeserver.hogeddns.jp
    UseCanonicalName Off
    Alias /webapp    /usr/share/kopano-webapp

    SSLEngine on
    SSLCipherSuite        ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNUL
    SSLCertificateFile    /etc/ssl/private/temp.hogeserver.pem
    SSLCertificateKeyFile /etc/ssl/private/temp.hogeserver.key

    Include /etc/kopano/webapp/apache2.conf
    Include /etc/apache2/sites-available/wordpress.conf
</VirtualHost>

WordPressの設定もKopanoにあわせてincludeすることにした。

新しく設定ファイルを作る。
/etc/apache2/sites-available/wordpress.conf

Alias / /var/www/wordpress

<Directory /var/www/wordpress/>
    DirectoryIndex index.php
    Options -Indexes +FollowSymLinks

    Allow from all
    Order allow,deny

    AllowOverride All
</Direcotry>

※動けばいい、という最低限の設定。

サイトを有効化して、問題なければ反映させる。

$ sudo a2ensite temp.conf
$ sudo apachectl configtest
Syntax OK
$ sudo systemctl reload apache2

wp-config-sample.phpをコピーしてwp-config.phpを作って編集する。
認証用ユニークキーはこのサイトで自動作成してくれる

…
define( 'DB_NAME', 'wordpress' );
define( 'DB_USER', 'wordpress' );
define( 'DB_PASSWORD', 'wordpresspassword' );
define( 'DB_HOST', 'localhost' );
define( 'DB_CHARSET', 'utf8mb4' );
define( 'DB_COLLATE', '' );
…
define('AUTH_KEY',         'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('SECURE_AUTH_KEY',  'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('LOGGED_IN_KEY',    'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('NONCE_KEY',        'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('AUTH_SALT',        'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('SECURE_AUTH_SALT', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('LOGGED_IN_SALT',   'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('NONCE_SALT',       'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
…

ここまで設定したところで、WordPressにアクセスしてみる。
今回の場合だと、https://temp.hogeserver.hogeddns.jp/wp となる。

「ようこそ」画面が表示された、とりあえずインストールはできた感じ。

リストアとドメイン変更

毎日バックアップを取っているので、それを復元する。

バックアップを持ってくる

やり方は色々あるけれど、Sambaで共有しているフォルダからバックアップを持ってくる方法をメモ。

$ sudo apt install cifs-utils
$ mkdir mount
$ sudo mount -o user=rohhie,password='password',vers=2.0 //backupserver/share ./mount
$ cp mount/backup.2021-06-19.zip ./
$ sudo umount mount

持ってきたファイルを展開。

リストア

念のため、Apacheを止めておく。

$ sudo systemctl stop apache2

データベースを復元する。

$ sudo mysql -D wordpress < wordpress.dmp

元々データーがあっても入れ替えられる模様。デザインが見られれば良いので、正確性は二の次。

ディレクトリの復元

バックアップしたWordPressのディレクトリをそのまま/var/www/wordpressに配置。

$ sudo mv /var/www/wordpress /var/www/wordpress.bk
$ sudo mv wordpress /var/www/
$ sudo chown -R www-data:www-data /var/www/wordpress

 

WordPressの設定修正

WordPressはまるごと置き換えたわけで、クローン環境に色々合わせないと。
/var/www/wordpress/wp-config.php

define( 'DB_NAME', 'wordpress' );
define( 'DB_USER', 'wordpress' );
define( 'DB_PASSWORD', 'wordpresspassword' );
define( 'DB_HOST', 'localhost' );
define( 'DB_CHARSET', 'utf8mb4' );

 

ドメインの書き換え

さて、バックアップしているデータベースは元のサイトで使われることを想定しており、当然このままでは動かない。
ドメインをクローン環境のものに書き換える必要がある。

wp-cliというツールをダウンロードしてくる。
The command line interface for WordPress

$ wget https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
$ php wp-cli.phar --info
OS:     Linux 4.15.0-142-generic #146-Ubuntu SMP Tue Apr 13 01:11:19 UTC 2021 x86_64
Shell:  /bin/bash
PHP binary:     /usr/bin/php7.2
PHP version:    7.2.24-0ubuntu0.18.04.7
php.ini used:   /etc/php/7.2/cli/php.ini
WP-CLI root dir:        phar://wp-cli.phar/vendor/wp-cli/wp-cli
WP-CLI vendor dir:      phar://wp-cli.phar/vendor
WP_CLI phar path:       /home/rohhie/work/wordpress
WP-CLI packages dir:
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 2.4.0
$ mv wp-cli.phar wp

データベースを書き換える。

$ ./wp search-replace --path=/var/www/wordpress 'rohhie.net' 'temp.hogeserver.hogeddns.jp'
Warning: Skipping an uninitialized class "GoogleSitemapGeneratorStatus", replacements might not be complete.
+----------------------------+-----------------------+--------------+------+
| Table                      | Column                | Replacements | Type |
+----------------------------+-----------------------+--------------+------+
| wp_actionscheduler_actions | hook                  | 0            | SQL  |
| wp_actionscheduler_actions | status                | 0            | SQL  |
…
Success: Made 8655 replacements.

※最初、サイト指定のところに https:// を付けていたのだが、wp_blogsのデーターが書き換わらなかった。なので、https:// を外して実行して移行できた。

このデーター書き換えの後、この行を書き換えた。
wp-config.php

define('DOMAIN_CURRENT_SITE', 'temp.hogeserver.hogeddns.jp');

Apacheを起動する。

$ sudo systemctl start apache2

動作しはじめた。

サイトヘルスの確認

動作し始めたところで、サイトヘルスを確認したところ、幾つか足りないモジュールがあった。

$ sudo apt install curl php-curl
$ sudo apt install imagemagick php-imagick
$ sudo systemctl restart apache2

これで正常動作しそうだ。

テーマの選定

ようやく、テーマを試すためだけの環境ができあがった!ということで、シンプルなものを見てみたい。
当サイトごときがテーマの選定など、おこがましいにも程があるが、現在のテーマ(TwentySeventeen)にもの凄く手が掛かった上に、思い通りにしきれない感じがあるので、簡単かつスマートに思い通りにできるテーマを探したいと思った。

GeneratePress

GeneratePressは一番最初に見つけた軽量テーマ。

TwentySeventeenで苦労した記事の幅は、外観設定からスクロールバーで変更できて、ホント気持ちいい。ブログ全体がすっきりとした印象に変わる。

コピーライト表示の変更にはPremiumの購入が必要で、年間$59、あるいは永続で$249とされている。
Premiumを購入すると変更できる幅が相当広がる感じ。

Luxeritas Theme

Luxeritas Themeは「SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです」として展開されている。

WordPressのテーマ検索では出てこないので、公式サイトから2つのテーマファイル(zip形式)をダウンロードし、そのファイルをアップロードする形でインストールする。このテーマは親子構造になっており、子テーマを適用する。

とにかくカスタマイズ項目が多く、結構苦労した記事の幅とかを簡単に調整できた。

Luxentasを有効化すると専用のメニューが表示されるようになっていて、ここでも本当に多彩な設定ができるようになっている。ここまでカスタマイズできるようなテーマが他にあったとして、日本語じゃないと厳しいかもしれないと思うレベルのきめ細かな設定項目。
SEO等もここで設定するようになっているので、別途のプラグインなどはいらない(むしろない方が良いらしい)。

そして、ウィジェットがたくさん用意されており、これを配置していけば思い通りのレイアウトにできそうだ。

かなり細かく指定できるけれども、h1とかh2の書式はフォントサイズの指定にとどまっていて、背景色を変えることはできない感じ。ここら辺を変える時はデザインファイルを作って、そこをいじっていく感じになりそうだが、そのための機能も搭載されているようだ。

提供元表示を消すためのプラグインが有料で提供されている。2021/04/25現在、5,230円となっている。
クローン環境でテーマを適用してみると、そんなに目立ちはしないが、確かにこれは消したくなる感じがする。

Cocoon

Cocoonは「SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。」として展開されている。

うん、言われてみれば、聞いたことがあるな、この名前。

こちらもWordPressのテーマ検索では出てこないので、公式サイトからテーマファイル(zip形式)をダウンロードして、それをサイトにアップロードする。カスタマイズするための子テーマも用意されており、それも一緒にインストールしてカスタマイズしていくのが良さそうだ。

設定は外観からではなく、Cocoonメニューから行うようになっていて、設定項目がとても多い。

このテーマは完全に無料で、テーマ作成元のリンクもどこにも出ない。公式サイトでカスタマイズについて述べられており、むしろCocoon感を消すことについて教えてくれていたりする。利用は自己責任で無保証、寄付は受けるけれど寄付によって追加する機能が変わることはない、ということで、このスタンスでこんな凄いものを作っちゃうのはホント凄いことだと思う。

当サイトはCocoonにお世話になることを決めた。

やったこと

Apacheの構成テストでなんか出てる

Apacheの構成ファイルを作ってテストしたら、なんかメッセージが出てる。

$ sudo apachectl configtest
AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message
Syntax OK

127.0.1.1を使用して、サーバーの完全修飾ドメイン名を確実に判別できませんでした。このメッセージを抑制するには、「ServerName」ディレクティブをグローバルに設定します

Google先生の翻訳

こんな適当な方法で良いのか分からないが、以下で解決。

$ echo "ServerName localhost" | sudo tee /etc/apache2/conf-available/fqdn.conf
$ sudo a2enconf fqdn
$ sudo apachectl configtest
Syntax OK
$ sudo systemctl reload apache2

 

WordPressへの最初の接続でエラー

データベースを作ってWordPressの設定も終わったので、さあアクセスしてみよう…

お使いのサーバーの PHP では WordPress に必要な MySQL 拡張を利用できないようです。

なんだろこれ?とりあえず必要っぽいからインストールしてみるか。

$ sudo apt install php-mysql

上手くいかない、と思って調べてみたらこんな情報が見つかった。
Re:ゼロから始めるサイト構築 / 〈WordPress・PHP7エラー〉「お使いのサーバーのPHPではWordPressに必要なMySQL拡張を利用できないようです。」の対処法

/etc/php/7.2/cli/php.ini

extension=mysqli

※この行の先頭にあるセミコロンを削除する。でも、この変更は不要だった。

これでも上手くいかない…ふと気が付いてapacheを再起動。

$ sudo systemctl restart apache2

これで動き出した。

ドメインの書き換え(うちでは上手くいかなかった)

ドメインの書き換えが必要だなと思い検索してみると、Search Replace DBというツールが見つかった。
Web Design Leaves / WordPress Search Replace DB の使い方

で、ここから提供元に飛んでいったら、企業で利用する場合は$7の支払いが必要という感じらしい。
Interconnect IT / Database Search and Replace Script in PHP

Do I have to pay?
No, this is free open source and you can find it on GitHub. You can also do things like send copies of it to your friends, or use the code in other projects. The full license is included in the software. We make the default path one of letting you make a donation, but if you’re skint and you work in one of those corporates where getting approval for a $7 spend isn’t worth the hassle, you can grab. Just remember us if the script makes you look good and gets you a raise!

支払う必要がありますか?
いいえ、これは無料のオープンソースであり、GitHubで見つけることができます。また、そのコピーを友達に送信したり、他のプロジェクトでコードを使用したりすることもできます。フルライセンスはソフトウェアに含まれています。デフォルトのパスは寄付を許可するパスですが、あなたが痩せていて、7ドルの支出の承認を得る価値がない企業のいずれかで働いている場合は、手に入れることができます。スクリプトによって見栄えが良くなり、昇給できる場合は、覚えておいてください。

Google先生の翻訳

なんか自信たっぷり、期待できそうだ!

オープンソースのこのアプリケーション、こちらにソースが置かれている。
Github / interconnectit / Search-Replace-DB

最新のリリースをダウンロードして展開すると、スクリプトが見つかる。
このスクリプトをコマンドラインで起動することで置き換えができる、とのことでやってみる。

$ php srdb.cli.php -h localhost -n wordpress -u wordpress -p "wordpresspassword" -s "https://rohhie.net" -r "https://temp.hogeserver.hogeddns.jp" --allow-old-php true
…
wp_options: replacing https://rohhie.net with https://temp.hogeserver.hogeddns.jp
syntax error, unexpected '\' (T_NS_SEPARATOR), expecting '{'

※と言うことで、エラー終了。これは、プラグインの何かに引っかかっており、サポートされない模様

バージョン3.1であれば動作すると書かれていたので、こちらをダウンロードしてきて走らせてみる。
こちらは古いPHPを前提に作られているようで、動作したのだが、大量のメッセージが吐き出された後、結局データベースを更新しなかった。

$ php srdb.cli.php -h localhost -n wordpress -u wordpress -p "wordpresspassword" -s "https://rohhie.net" -r "https://temp.hogeserver.hogeddns.jp"

このツールについて議論しているどこかのページで、このエラーが出るときは wp-cli を使うといいよ、という書き込みを見つけたので、このツールを諦めた。

パーマリンクのエラー

パーマリンク設定で「投稿名」を設定している。この場合、mod_rewriteが正しく動けないと上手くない。
どうしても上手くいかなくて色々と探していたら、ほぼ同じことをやろうとして、同じエラーが出ている方を発見。
Jラボ / WordPressの引越しでパーマリンクの404 Not Foundエラーが発生

他の投稿でもこのことは書かれていたのだけれど、思い至らなかったのが AllowOverride は Location だと上手くいかないかもしれない、ということだった。

Alias / /var/www/wordpress

<Location /var/www/wordpress/>
    DirectoryIndex index.php
    Options -Indexes +FollowSymLinks

    Allow from all
    Order allow,deny

    AllowOverride All ← 最初これがなかった。
</Location>

Directory指定よりLocation指定が好きで、こればっかり使ってたが、当該サイトが順番に確認していく様を読み進め、最後のAllowOverrideのところで、よく見るとLocationではなくDirectoryと書いてあることに気が付いた。
どれどれ…と変えてみたところ動き出した。

だいぶ時間を無駄に使ってしまったが、この情報に出会わなければ上手く動かないままだったので、大変ありがたかった。

PHPの新しいバージョンを使う

Ubuntuで新しいバージョンのPHPをサポートできるように親切にしてくれる人がいた。
Launchpad / ~ondrej/+archive/ubuntu/php

このリポジトリはApacheやNGINXでの利用も想定してくれていて、リポジトリを用意してくれているので、完全にこれに乗っていけば安全に使えるのかもしれない。

でも、テスト環境だし、今回は気にしないことにした。

さいごに

もともとは、テーマを適用するところまで書いてみようと思ったのだけれど、テーマのカスタマイズやサイトの評価に手を出したところで途方もない課題量になってしまった。しかも、テーマ適用にあたり、何度もこの内容に沿った復元を行ったため、別ページに切り出しても問題なさそうな気がしてきた。

現在、未完成ではあるものの、新しいテーマCocoonにお世話になっており、一部をカスタマイズしてほぼ思い通り、かつ、編集もしやすい環境ができあがっている。
とても良い気分で新しい課題に取り組んでいくことができそうだ。

コメントはこちらから お気軽にどうぞ ~ 投稿に関するご意見・感想・他