ブログ

【大変】CocoonからAFFINGER5(WING)へ乗り換えたい人へ

CocoonからAFFINGER5の乗り換えは超大変、バグも発生
読者
無料ワードプレステーマのCocoonを使っているけど、有料テーマの方がいいのかな?
読者
AFFINGER5(WING)が評判良いって聞いたけど、どうなんだろう?

こんなお悩みに答えます。

管理人
このブログでもAFFINGER5を使用しています。

結論

既に50記事以上書いていれば、わざわざテーマを変更しなくても良いと思います。

修正がかなり大変でした。

  • ブログ立ち上げ時
  • 記事数が少ない時
  • リライトも一緒にする覚悟がある

なら購入をおすすめします。

本記事の信頼性

はぐれガラスの記事の信頼性

はぐれがらす(@hagure_garasu

\★収益数百万ブロガーも愛用!★/

AFFINGER5の公式サイトへ

今だけ4980円相当「STINGERタグ管理プラグイン3」無料プレゼント中!

AFFINGER5は多くのトップブロガーに支持されている

出典:AFFINGER公式サイトより

出典:AFFINGER公式サイトより

AFFINGER5は、多くのトップブロガーにおすすめされている有料テーマです。

このブログでもAFFINGER5を利用していますが、使い勝手はとても良いです。

購入を迷っている人向けの記事も書きましたので、ぜひ参考にしてください。

管理人
本当にテーマ変更すべきか」という点についても触れています。
怪しい情報には惑わされないように注意しましょう!
あわせて読みたい
AFFINGERブログ初心者におすすめの有料ワードプレステーマ
【体験談】AFFINGER5はブログ初心者こそ最初から使うべき

Cocoonからの移行は簡単?・・・正直、大変です

  • トップページや記事のデザインが崩れる
  • 謎のバグが発生する
  • ブログの修正に1週間以上はかかるかもしれない

テーマ移行したら、明らかにデザインが崩れます。

読めなくなるわけではないのですが、不格好になり、修正するまでは離脱率が上がるかもしれません。

ポイント

なるべくまとまった時間が取れる時にテーマ変更をするのがおすすめです。

私の場合、文章の無限ループも生じました。

その時の解決策がネットにはありませんでした。
もし、あなたが同じような目に合ってもなんとかなるように、自分が行った方法を解説します。

この記事を読めば、CocoonからAFFINGER5への移行方法と注意点がわかると思いますので、最後までお読みください。

CocoonからAFFINGER5へ移行する簡単な手順

まずはじめに、CocoonからAFFINGER5に移行する簡単な手順を紹介します。

テーマ移行の簡単な手順

step
1
AFFINGER5を購入

まずは、公式サイトからAFFINGER5を購入し、有効化しましょう。

「管理画面>外観>テーマ」から設定ができます。

Cocoonのテーマについては特にいじる必要は無く、AFFINGER5を有効化すればCocoonは無効になります。

step
2
初期設定

有効化した後は、初期設定をしましょう。

  • パーマリンクの更新
  • デザインパターンの選択
  • メニューの作成
  • ヘッダー画像の変更

これらの初期設定の具体的な方法については、AFFINGER5の管理画面「はじめに行うこと」に記載されています。

一つずつ順番に行いましょう。

AFFINGER初期設定

AFFINGER初期設定

step
3
トップページのカスタマイズ

初期設定で、簡単な修正は終わりです。

しかし、トップページや記事のデザインは崩れたままだと思います。

カスタマイズしましょう!

トップページを特にカスタマイズしていない人

特にカスタマイズしていない場合は、大きな変化はないかもしれません。

色の設定など、ワードプレスのカスタマイズ画面から変更しましょう。

トップページをカスタマイズしていた人

カテゴリーごとの記事を作ったり(当ブログのように)、おすすめ記事や新着記事などを分けていた人は注意が必要です。

CSSが反映されないので、ショートコードやHTMLは、そのまま”テキスト”として表示されます。

修復するには、固定ページを使って、作成し直す必要があります。

AFFINGER5には、デザイン済みテンプレートもあります。

インストールすればいい感じのデザインにすることができるので、マニュアルで確認しましょう。

step
4
記事修正

一番大変なのがこの記事修正です。

Cocoonで吹き出しやブログカードを利用していた人も多いのではないでしょうか?

これらは全て反映されなくなります。

Cocoonのショートコードや記述が残ったままになっていると、思わぬエラーも発生します。

これらを根気よく修正していく必要があります。

step
5
完了

ここまでやってようやく終了です。

しかし、「Step4:記事修正」では、色々と罠があるのでもう少し詳しく解説します。

特に気を付けたいこと

次の二つは起こる可能性が高いので、要注意です。

メタディスクリプションが消える(All in One SEOをテーマ変更前に入れて対策)

Cocoonの場合、SEO対策はされているので、All in One SEO(プラグイン)を入れていない人もいると思いますが、テーマ変更前に入れておきましょう。

もし、プラグインを入れていないで、テーマ変更をするとmeta descriptionがすべて消えます。

管理人
また入力するのは地味にめんどくさいですよ・・・

All in One SEOを入れておけば、メタディスクリプション(meta description)は保存されるので、あらかじめ入れておくと良いでしょう。

記事修正が終ってからまた、プラグインを消去すればいいんです。 

All in One SEOのメタディスクリプションとWordPressにもともと備わっているメタディスクリプションのそれぞれがあります。

All in One SEOに残っているメタディスクリプションをWordPressの方のメタディスクリプションにコピペすると作業が多少楽になります。

メモ

AFFINGER5もSEO対策はされているので、最終的にAll in One SEOは不要です。

動作も重くなるので、最後はプラグインを消去しましょう。

同じ文章が繰り返される(Search Regexをうまく活用して修正)

注意とお願い

ここで紹介する内容はあくまで私の環境で生じたことです。

自分はこれから説明する内容で解決しましたが、責任については負いかねますことをご了承ください。

事前に必ずバックアップを取ることを推奨します。

Gutenbergで記事を書いている人も多いと思います。

しかし、AFFINGER5ではClassic Editorの使用が推奨されています。

この点については、次の記事を参考にしてください。

関連記事
AFFINGERブログ初心者におすすめの有料ワードプレステーマ
【体験談】AFFINGER5はブログ初心者こそ最初から使うべき

Classic Editorにはビジュアルエディタテキストエディタがあります。

ビジュアルエディタでは、CSSなどもある程度反映した状態で見ることができるので、多くの人はこちらを使用します。

テキストエディタでは、本当にHTMLの羅列なので、アフィリエイトリンクを貼ったりするときに切り替えて使用するくらいでしょう。

ここで、ビジュアルエディタでの見え方を見てみましょう。

ビジュアルエディタでの見え方

ビジュアルエディタでの見え方

一見、何の問題も無いように見えます。

これをテキストエディタで見てみると・・・?

テキストエディタの見え方

テキストエディタの見え方

赤枠のGutenbergの記述が見えますか?

管理人
実はこれ、キレイな心の持ち主にしか見えないので、見えていれば、あなたは心のキレイな方です

冗談はさておき、この<!-- wp:paragraph~以下、省略~ -->という記述があると、バグが生じます。

具体的には、次のようになります。

目次のバグり

目次のバグり

同じ内容が繰り返されていますよね?

そして実際に、記事の文章も同じ内容が繰り返されるんです。

こんなものを放っておいたら、重複文章とみなされて、検索上位の記事も飛ばされかねません。

早急に対策しましょう!

step
1
<--! -->の文章は全て消去

Classic Editorで行う以上、<--! -->の記述は消去して構いません。

参考

WordPress はじめてのデザイン&カスタマイズ入門からの引用です。

この本にも書かれている通り、Gutenbergで作成したものを、Classic Editorで編集するのは好ましくなさそうです。

Gutenbergの記事をClassic Editorで修正する時の注意点

出典:WordPress はじめてのデザイン&カスタマイズ入門(技術評論社) 初版 p.29より

step
2
”cocoon”が含まれる記述も消す

Cocoonはショートコードが多いので、おそらくcocoonという単語が多数出てくるでしょう。

それらの記述は消去して構いません。
Cocoonでしか作動しないからです。

「Ctrl + F」で"cocoon"と探して消していくのが良いでしょう。

読者
ひとつひとつやるのめんどくさいな・・・

作業が多少楽になるかもしれないプラグインを紹介します。

Search Regexです。

メモ

Search Regexは過去に投稿した記事の内容の一括置換や一括削除ができるプラグインです。

プラグイン>新規追加でSearch Regexを入力しましょう!

Search Regexの使い方

Search Regexの使い方

インストールするだけで簡単に使用することが可能です。

”検索”に、一括で消したい記述をコピペし、"置換"を削除に設定し、青色の検索ボタンを押すと、該当する記述の件数が表示されます。

あとは赤色の”すべて置換”を押せば、その記述は全ての投稿記事から削除されます。

<!-- -->やcocoonの記述は、共通することも多いので、毎回記事ごとに消していくより早く終わる可能性があります。

ぜひ利用を検討してみてください。

万が一のために、必ずバックアップを取りましょう!

CocoonからAFFINGER5に変更するなら、記事が少ないうちに!

CocoonからAFFINGER5(アフィンガー5)に移行する際の、手順について紹介しました。

管理人
自分が直面したバグについては、どこにも書かれていなかったので、とても苦労しました・・・
あなたが同じようなバグに遭遇した時に参考になれば嬉しいです

この手順でやれば、簡単にテーマ移行ができると思います。

テーマ変更を検討しているなら、ブログ立ち上げ時or記事数が少ない時の方が良いです。

正直、上に書いたようなことやりたくありませんよね?(笑)

私は、解決策を見つけるのに結構時間をかけたのもありますが、かなりしんどかったです。

有料テーマに変更しようと悩んでいる人は早めに変えることをおすすめします。

また、記事数が既に多い人は、Cocoonのまま突っ走っても大丈夫です。

Cocoonはそれくらい優秀な無料テーマです。
有料でないのが信じられないレベルのクオリティです。

Cocoon利用者へ

デザインの差別化をしたくてCocoonからAFFINGERに変えたい人へ。

吹き出しを自分オリジナルのものに変えるだけでも、Cocoonぽさは無くなりますよ?
吹き出しをそのまま使ってしまうと、一気にCocoonぽさが出てしまうので、必ず変えましょう!

そして、Cocoonを信じて大丈夫です。

AFFINGER5は確かに使い勝手がよく、最初から利用するならおすすめできる有料テーマです。

レビューはこちらで紹介しているので、参考にしてください。

AFFINGER5のレビュー
AFFINGERブログ初心者におすすめの有料ワードプレステーマ
【体験談】AFFINGER5はブログ初心者こそ最初から使うべき

\★収益数百万ブロガーも愛用!★/

AFFINGER5の公式サイトへ

今だけ4980円相当「STINGERタグ管理プラグイン3」無料プレゼント中!

↓参加しています!
クリックしていただけると嬉しいです。


転職・キャリアランキング

-ブログ
-, , , ,

© 2021 はぐれガラスは今日も啼く