JINからJIN:Rへの移行に苦労した話：デザインへの影響や移行手順の事例解説

WordPressテーマをJINからJIN:Rに移行した際の手順と、実際に起きたデザイン崩れや注意点をまとめています。

数十記事ある状態での移行はそれなりに手間がかかります。移行すべきかの判断軸、作業の進め方、実際に発生した問題とその対処を一通り記録しました。

旧式のJINを使って後悔した話は別の記事にまとめています。

JINを買ったけどJIN:Rにすべきだった話（WordPress有料テーマ購入体験）WordPress有料テーマ「JIN」を購入して後悔した経験から、旧テーマJINと後継テーマJIN:Rの違い、選ぶべきテーマの判断基準を解説します。fand.jp

「簡単」ではない：JINからJIN:Rへの移行の現実

JINとJIN:Rは同じ制作者によるものですが、実は全く別のテーマとして再開発されています。内部の仕組みが大きく異なっているため、単純に切り替えるだけでは様々な問題が発生する可能性があります。

どの程度の問題が発生するかは利用中のプラグインとの相性もあるので一概には言えませんが、代表的な事例を紹介します。

移行時に注意すべきポイント

デザインの再調整が必要になる : JIN:Rに移行すると、見出しのデザインなどが最適化されていない場合があります。HTML上のタグとしては正常に機能していますが、見た目には少々劣化感があるかもしれません
全記事の確認と編集が必要かも : 完璧を求めるならば、全ての記事を一つ一つ確認し、必要に応じて編集する必要があります。これは非常に手間のかかる作業になります
データが消える部品もある : 公式マニュアルにも記載されている通り、いくつかの情報は引き継ぎがされません。例えばプロフィール情報やヘッダー画像設定です。1つ1つは大した作業ではありませんが、積み重なると意外と手間がかかります

jinr.jphttps://jinr.jp/manual/jin-to-jinr/

スムーズな移行のための対策

「JIN → JIN:R 移管プラグイン」を活用する : このプラグインを使用することで、移行の手間を若干軽減することができます。ただし、完全な解決策ではない点に注意が必要です
デザインの再調整は避けられない : 移行後はサイト全体のデザインを一式再調整する覚悟が必要です。テーマを切り替えた後の作業を楽にするために、現在のブログがどのようなデザイン・色合いになっているのかを写真に残しておくと、それと見比べながら作業ができるので楽になります
ブログカードの再設定で問題解決 : アイキャッチ画像に関するエラーを防ぐため、JIN:Rのブログカード機能を使って一通りの記事を再設定する必要があります。この修正に要する時間をあらかじめ見積もっておくと計画を立てやすいです
テスト環境で事前チェックが理想 : 本番環境に適用する前にテスト環境で移行を試すのが理想です。ただ、現実問題としてそこまでの手間をかけていられないケースもあるでしょう。「今このブログのデザインが大きく壊れてしまったらビジネスにどのように影響があるだろうか」という目線で一考してからアクションを決めるのが無難です

ブログデザイン変化の実例

ここからは、実際にこのブログでJIN:Rに移行した時に生じた課題を紹介します。

大量のPHPエラーが発生

すべての記事ではありませんが、いくつかの記事を開くとエラーが発生していました。

WordPressがPHPで動いていることを知っている方であれば落ち着いて対応できますが、非エンジニアの方にとっては、この画面が表示された時点でかなり不安になると思います。

PHPエラーが表示された画面 — テーマ移行後に発生したPHPエラーの実例（2024年9月時点）

エラーが発生している対象をいくつか見てみると、傾向としてブログカードを表示しているパターンだと気が付きました。JINでは問題なく表示されていたブログカードが、JIN:Rではアイキャッチ表示がおかしくなっていました（全ての記事にアイキャッチを設定しているわけではなかったので、アイキャッチ画像が無い場合のデフォルト表示の処理がおかしくなっていたように見えます）。

ブログカードのアイキャッチエラー — ブログカードのアイキャッチ表示が崩れた例（2024年9月時点）

結論として、一通りのブログカードを再設定することでエラーが消えることを確認しました。

修正後のブログカード — ブログカードが正常に表示された状態（2024年9月時点）

ブロックのリカバリー実施

Hタグ（見出しタグ）やリストタグのようなシンプルなものさえも、一通り再生成しなければなりませんでした。

例えば、リスト表示ブロックが以下のように壊れています（Gutenbergエディタ上で [ブロックのリカバリーを試行] というボタンが表示されています）。

ブロックのリカバリーボタン — Gutenbergエディタ上のリカバリーボタン表示（2024年9月時点）

実際のページ表示を見ると、リストのデザインが効いていません。

リストデザインが崩れた表示 — 修正前：リストのデザインが崩れた状態（2024年9月時点）

HTMLとしてはしっかりリスト構造（ ul タグ）が使われていますので、検索エンジンなどのシステムから見るとしっかり意味づけがされている点では一安心です。

<ul class="wp-block-list">
  <li><strong>Google サーチコンソール</strong>：ユーザーがどのようにしてGoogle検索を通じてあなたのサイトを見つけたかを教えてくれます。</li>
  <li><strong>Google アナリティクス</strong>：ユーザーがあなたのサイト内をどのように移動しているかを確認できます。</li>
  <li><strong>PageSpeed Insights</strong>：サイトの速度やパフォーマンスを向上させるためのアドバイスを提供します。</li>
  <li><strong>Google AdSense</strong>：サイトに広告を表示して収益を得るためのツールです。広告の設定や収益の確認ができます。</li>
</ul>