WordPressテーマをLuxeritasからCocoonへ変更しました。Localでのテスト環境構築、All-in-One WP Migrationによる移行、独自ブロックやブログカードの修正など、実際に行った作業を記録としてまとめています。
WPテーマをLuxeritasからCocoonへ
今回は、しまなみ海道やサイクリングから少し離れた話題を。私のウェブサイト「しまなみ自転車ツーリングTips」のWordPressテーマを、長年使ってきたLuxeritasからCocoonへ変更しました。実は私自身、Luxeritasはとても気に入っていたテーマで…。無料とは思えないほど細かくカスタマイズでき、軽量で表示速度も速い。個人でコツコツとサイトを作っている私にとって、本当にありがたいWordPressテーマでした。
それでも今回、思い切ってテーマを変更することにしました。調べてみると、テーマ変更自体は簡単にできるものの、対応すべきことがかなり多そうで、しばらく躊躇していました。実際、想像以上に細かな作業が山積みで、大まかな作業が完了するまでに1週間ほどかかってしまいました。
この記事では、「テーマ変更のやり方」を詳しく解説するというよりも、私が実際に行った作業を記録として、備忘録のような形でまとめてみます。同じようにLuxeritasからCocoonへの変更を検討している方や、これからテーマ変更を考えている個人ブロガーの方の参考に、少しでもなれば嬉しいです。
AD (Google AdSense)
なぜLuxeritasからCocoonへ変更したのか
先述の通り、Luxeritasはお気に入りのテーマなのですが、ここ1〜2年の状況を見て少しずつ不安を感じるようになっていました。
アップデートが止まっている現状
2023年頃から開発者の方の体調不良により、更新が途絶えています。公式サイトのコメントも2024年で止まったままです。もちろん事情があることは承知していますし、これまで素晴らしいテーマを提供してくださったことへの感謝の気持ちは変わりません。
ただ、WordPressは定期的にアップデートが行われ、PHPのバージョンも上がっていきます。その変化にテーマ側が追いつけない可能性やセキュリティ上のリスクを考えると、長期的には不安が残りました。
実際、WordPressやPHPをアップデートした際に、小さなエラーが出たことが何度かあります。表示が崩れたり、フリーズしてしまったり。その都度、調べながら応急処置的に対応してきましたが、「もし大きな不具合が出たら、自分は対応できるだろうか」という不安は、正直ずっと心のどこかにありました。
やるなら早めが良いかも
もう一つの理由は、記事数が増えてきたことです。テーマ変更には少なからず手作業での修正が伴います。これ以上記事が増える前に動いた方が、作業的に楽なのは間違いありません。
そこで検討したのが、ブロガーにも広く利用されている無料テーマのCocoonです。さらに、Cocoonの作者さんがレンタルサーバー大手のエックスサーバーと提携したことを知り、「このテーマは今後も長く安定して使えるのではないか」と感じました。
もちろん、すぐに本番環境へ導入することはせず、まずはテスト環境で実際に触ってみました。そのうえで、操作性やカスタマイズの感触を確かめ、「これなら移行しても大丈夫そうだ」「使い心地もそれほど変わらなそう」と判断。今回のテーマ変更を決めました。
AD (Google AdSense)
実際に行った作業の流れ
今回のテーマ変更で、私が実際に行った作業を時系列でまとめてみます。まとめてみたら、割と膨大な作業になりましたね…。
1. ローカル環境の構築
- フリーソフトの Local を使い、PC内にWordPressのローカル環境を構築。
- プラグイン All-in-One WP Migration and Backup を使用して、「しまなみ自転車ツーリングTips」全体をローカル環境（私のPC）へコピー。サイト容量が無料版の上限（512MB）を超えているため、All-in-One WP Migration Unlimited Extension を導入してサイズ制限を解除。
- ローカル環境での作業が完了するまで、本番サイトは更新しない方針を決定。
私の場合、普段からプラグインの更新テストなどでこのローカル環境を使用しているので、それを活用しました。今回の作業に限らず、テスト環境があるとプラグインやアップデートのテスト時に安心＆便利ですね。
2. ローカル環境での修正作業
① Cocoonの導入
- ローカル環境のWordPressにCocoonを導入。親テーマ・子テーマをダウンロードし、インストール・有効化。
- 全体をざっと確認し、修正が必要な箇所を洗い出し。
② デザイン・見た目の修正
- 元のデザインに近づけるため、スキン選択やCocoon設定内のパラメータ調整を実施。調整できない部分は子テーマのstyle.cssに記述して修正。
- ウィジェット、ヘッダーメニュー、フッターメニューを再設定（初期状態では非表示になっていたため、ひとつずつ再構築）。
③ 個別HTMLタグの修正
- 各記事で個別設定していた ＜
title＞と＜description＞のHTMLタグの内容が引き継がれていなかったため、本番サイトから手作業でコピー。
④ Luxeritas独自ブロックの修正
- 記事中で使っていたLuxeritas独自ブロックの表示確認。
- プラグイン Search Regexを使い「区切り線」は置換できたが、「ブログカード」「トピック」「紹介文」「枠線ブロック」は難しそう…。
- Search Regexで正規表現による一括置換を試みるも、エラーで対応できず。
- 結果として、「ブログカード」「トピック」「紹介文」「枠線ブロック」は記事ごとに手作業で修正。特にブログカードは閲覧者に表示されない状態だったため優先的に対応。
- 修正作業のついでに、古くなった情報の確認や軽いリライトも実施。ブログカード過多の記事も整理。
- 本文中の背景色が正しく反映されていない箇所や、色味が極端になっていた部分を修正。
- Search Regexで「lux」と検索し、修正し損ねている箇所が無いか最終チェック。
⑤ インデックス設定の修正
- noindex設定が引き継がれていなかったため、インデックスさせたくないページを再設定。
3. 本番環境への移行と微調整
- ローカル環境で完成させたCocoon版サイトを、本番環境へ移行（再びAll-in-One WP Migrationを使用）。
- 本番環境で表示確認・最終チェックを実施。
- 関連記事表示、目次、ブログカードデザインなど細かな部分を微調整。
- 通常の記事執筆を再開。Luxeritasテーマを削除。
AD (Google AdSense)
一番時間がかかった作業
今回のテーマ変更で、最も時間がかかったのは記事ごとの細かな修正作業でした。
titleとdescriptionの手動移行
まず気づいたのが、記事ごとに個別設定していたtitleとdescriptionの内容が引き継がれていなかったことです。私は記事ごとに、検索結果に表示されるタイトルやディスクリプションを調整していました。それがCocoon側では空欄になっていたため、本番サイトを開きながら、一つずつ手作業でコピーしていきました。
作業自体はコピペなので単純です。ただ、記事数がそれなりにあるので、想像以上に時間がかかりました。自転車旅と同じで地道な作業。まさにコツコツです。
Luxeritas独自ブロックの修正
次に大変だったのが、Luxeritas独自ブロックの扱いです。
「区切り線」「トピック」「紹介文」「枠線ブロック」などは、表示自体はされるものの、デザインが少し崩れていたり、編集画面ではHTML化を促す表示が出ていたりと、そのまま放置するのは少し気になる状態でした。
一番困ったのは「ブログカード」です。Luxeritasで作成していたブログカードが、Cocoonでは表示されない状態（箱だけ表示され、リンクは生きていない）になっていました。Luxeritasではリンクをブログカードと認識させるときに、data-blogcard=”1″というコードが使われていて、これが独自なものなのだそうです。
一括置換を試みたけれど…
手作業で全部修正するのは大変なのは明らかなので、まずはSearch Regexを使って、一括置換を試みました。
「区切り線」についてはうまく変換できたのですが、「ブログカード」「トピック」「紹介文」「枠線ブロック」は、それぞれに違う文章が入っているため、分割での変換や正規表現での検索と置換が必要でした。他の方のブログやAIに聞いたりして試したのですが、特にブログカードの置換がSearch Regexのエラーでうまくいきませんでした（たぶん私の知識不足が原因…）。
結果として、これらは記事ごとに開いて、手作業で一つずつ修正していくことに。
特にブログカードは閲覧者側に表示されない状態だったため、優先的に対応しました。「トピック」や「紹介文」「枠線ブロック」は表示はされていたので、理論上はそのままでも大きな問題はありません。でも、どうせ修正するなら、きれいに整えておきたい。「ブログカード」以外は数も多くなかったこともあり、結局すべて手作業で直しました。
こちらもコツコツと単調な作業でしたが、その分、記事を改めて読み返す機会にもなりました。ブログカードを使いすぎていた記事に気づいたり、情報が少し古くなっている部分を見つけたり。想定外ではありましたが、結果的にはサイト全体を見直す時間にもなったように思います。
本番環境への移行
ローカル環境での修正が一通り終わったところで、いよいよ本番環境への移行です。この作業でもプラグイン「All-in-One WP Migration and Backup」を使いました。ローカルで完成させた「しまなみ自転車ツーリングTips」Cocoon版のデータをエクスポートし、本番サイトへインポートする流れです。
ここまでかなりの時間をかけてきたので、正直なところ、この作業が最も緊張しました。もしインポートがうまくいかなかったら…。それでも、無事に移行は完了。表示を一つずつ確認しながら、大きな崩れや不具合がないことをチェックしました。画面がテスト通りに表示されたときは、ほっとしましたね…。
実際にテーマ変更をやってみて
実際に、テーマ変更をやってみての気づきです。
- とにかく記事数が多いと大変（当たり前）。
- テーマ独自のブロックを大量に使っていると大変。
- 一括置換をすれば簡単に終わるだろうと思ってたけれど、そううまくいかない（ここは私の能力不足も）
- ローカル環境で作業したほうがいい。途中でトラブルが起きがち。
- こまめにバックアップをとって、エラー発生前に戻れるようにしておくべし。
ウェブサイトという形で個人が情報発信するというのは、私には最初、少しハードルが高く感じていました。それでも、ハイクオリティな無料テーマの存在が、そのハードルをぐっと下げてくれました。「私にもできるかもしれない」と思わせてくれたのは、間違いなくLuxeritasのおかげです。Luxeritasテーマ、そして作者のるな様、長い間、本当にありがとうございました。
AD (Google AdSense)