ワードプレスのテーマを移行する予定だけど、どんな作業をすればいいの？
ワードプレスのテーマを移行すると、どんな変化があるの？
ぶっちゃけ何が大変？
という移行作業について5ステップでまとめていきたいと思います。
私の場合、CocoonからJINに移行しましたが、他のテーマ移行でもご参考になるかと思います。
具体的なテーマの比較を知りたい方はこちらの記事がオススメです。
・ワードプレスのテーマ移行作業の流れ
・作業方法の公式リンク
・記事の整え方の手順（HTMLについて）
Contents
ワードプレステーマ移行作業全体の流れ
全体の流れは
-
STEP01バックアップ
-
STEP02子テーマのダウンロードと有効化
-
STEP03Googleアナリティクスの再設定
-
STEP04アドセンス広告の再設定
-
STEP05ブログデザインや記事のレイアウト変更
このようになります。
一番大変な作業はSTEP5になります。
順番に開設していきますね。
スポンサーリンク
STEP01 バックアップ
バックアップにはプラグイン「BackWPup」を用いて行いました。
手順についてはサルワカさんが丁寧に説明してくださっています。
私もこちらを見て設定を行いました。
STEP02 子テーマのダウンロード
子テーマは自分のカスタマイズ内容を保持するために必須です。
忘れずにダウンロードしましょう。
スポンサーリンク
STEP03 Googleアナリティクスの再設定
Cocoonでは「Cocoon設定」の「アクセス解析」に直接トラッキングIDを入力するだけで設定できていました。
JINでは「HTMLタグ管理」の「head内」にコードを貼り付ける必要があります。
設定方法についても公式ページで確認しましょう。
STEP04 アドセンス広告の再設定
移行中に読者様がいらっしゃるかもしれませんので、アドセンス広告も早めに貼っておきましょう。
貼り方についても公式サイトで説明されています。
私オススメのインフィード広告も簡単に貼ることができます。
広告設定まで詳細に説明してくださってます。
STEP05 ブログデザインや記事のレイアウト変更
これらを始めるためには、JINに必要なプラグインのインストールやJIN特有のブログパーツ名を知る必要があります。
まずは公式サイトの「JIN設定手順」を読んでください。
ブログデザインを整える
ブログデザインは着せ替え機能で簡単に整えることができます。
後述しますが記事のレイアウトがかなり変わってしまっているので、ビジター様のことを考え先に記事を整えてあげましょう。
個人的には、色やパーツデザイン等のブログデザインは落ち着くまで着せ替えそのままで良いと思います。
記事の修正が終わりましたら、思う存分カスタマイズしてくださいね！
記事を整える
JINをインストールしたあと記事を見ると、あんなにがんばって作ったページが崩れていてショックですよね・・・。
けれど整えれば本当に読みやすくなるので頑張りましょう。
さて、記事のレイアウト修正は、簡単に言えば手作業で「文字の装飾やボックスを設定しなおす」だけです。
しかし、これを私の場合HTMLレベルで修正していったので、1記事あたり30分以上かかりました。
私が行った整える順番は
-
①ビジュアルエディター吹き出しやボックスをショートコードで整える
-
②テキストエディターHTMLで不要なタグを消去
-
③ビジュアルエディター太字・マーカー・赤字などを付けなおす
です。
吹き出しやボックスをショートコードで整える（ビジュアルエディター）
吹き出しは画像と文章が分かれて、ボックスはすべてなかったことにされています。
JINでは、Cocoonと異なり吹き出しや一部のボックスはショートコードで入力しなければ反映されません。
正しく反映されているか不安な場合、「変更をプレビュー」を押せばすぐに見ることが出来ますよ。
②HTMLで不要なタグを消去（テキストエディター）
この作業はもともとHTMLに直書きしている方には関係ありませんので飛ばしてください。
Cocoonの時にビジュアルエディターを使っていた方は要注意です。
なぜこの作業が必要かというと、大きな理由は2つあります。
正しい文法でタグを書かなければ、Googleの評価が下がるのでSEOで不利になる
余計なタグのせいでエラーが発生することがある
順番に説明していきますね。
例えばCocoonでは「赤色太文字」にしたいときは一瞬で選べましたよね？
あれはHTMLタグで見ると「red-bold」というスタイルが入力されています。
しかしそれはCocoon様の親切設計で、正確には「color: #d40e37」「strong」という色と太字をそれぞれタグで指示しなくてはいけません。
JINに移行した時点でCocoon様の恩恵は消えています。
そのため、テキストエディターで見た時に「red-bold」というHTMLタグが入力されていても、ビジュアルエディターやプレビューを見たら装飾のない文字が並んでいることになるのです。
それを見て「太くない！赤くない！」とビジュアルエディターでもう一度設定しなおしたとします。
すると、HTMLタグには不要な「red-bold」と「color: #d40e37」「strong」が併用されてしまうのです。
これはGoogleから見ると「入れる必要のないタグが入ってるぞ！」という認識になるため、評価が下がります。
他にもマーカー機能では、Cocoonは「marker-under」や「marker-red」など下線や色の指示がされていますが、JINでは反映されません。
全体を通して、テキストエディターで入力されているのにも関わらずビジュアルエディターに反映されていないタグは、すべて無意味なタグです。
見慣れればテキストエディターから直接タグを修正することはできますが、苦手な方や不安な方は一度すべてタグを消してしまってからビジュアルエディターで設定しなおすのが良いかと思います。
現在WordPressにはGutenbergエディターが搭載されていて、WordPressを立ち上げて真っ先に起動するのがこのGutenbergエディターです。
しかしまだ搭載されて間もないため、JINではGutenbergエディターは対応できていません。
そのため上記の設定手順で真っ先に「Classic Editor」をインストールする必要があるのです。
一方で、CocoonはGutenbergエディターにすでに対応しています。
Cocoonを使用していた時にGutenbergエディターを使用していると、HTMLに
<!?- wp:paragraph ?->
<!?- /wp:paragraph ?->
といったタグが挿入されています。
他にも「<!?- wp:」や「<!?- /wp:」で始まるタグはすべてGutenbergエディターによって生まれたものです。
実はこのタグが入っていると、ブログカードが正しく表示されないエラーが発生します。
私に起きたエラーはそれだけでしたが、対応していない以上他にもエラーが起きる可能性があります。
リスクを持っているタグはすべて消しておきましょう。
他にもプラグインなどで相性が悪いと不具合が起きる可能性があるそうです。
③太字・マーカー・赤字などを付けなおす（ビジュアルエディター）
ここまで修正できたら、あとはビジュアルエディターで記事を整える作業になりますので今まで通りです。
直接HTMLタグを②で直していた方は、不要かもしれません。
ただし、テーマを変更するとフォントや行間の間隔も変わりますので、かならずプレビューを確認しておきましょう。
「ワードプレスのテーマ移行作業」まとめ
いかがでしたか？
私は30記事の時にテーマを移行し、記事のリライトに4日、サイトのカスタマイズに1日、計5日を要しました。
その間全く記事は書けませんでしたが、徐々に検索順位も上がってきていますし、時間をかけた分ブログデザインにも満足しています。
これから移行を考えている人の参考になれば幸いです。
