WordPressのテーマをAFFINGERからCocoonに変更するためにやることをメモします。
AFFINGER4で確認したので、WING（アフィンガー5?）だと異なる部分がある可能性ありです。ご了承下さい。
まずはバックアップ
テーマ変更の前に必ずバックアップをとりましょう。
ボクが使ったのはプラグインのこれ。
設定内容をメモしておく
テーマ変更後の設定のために、現在の設定をメモしておくと楽です。
この辺をメモして置いたらいいかなというものを。
FTPで確認できる人は、メモしなくても直接フォルダ見るかダウンロードして確認してもよい。
headやbodyの記述
アクセス解析用のタグなどを記述している場合は、テーマ変更後に設定し直すことになるのでメモ。
functions.php と CSS
このあたりも、何かしら追記している可能性がある部分。
カスタマイズ→追加CSSとかに何か書いてたらメモ。
アクセス解析・アドセンス
GTM（Googleタグマネージャ）、Analytics、サーチコンソールらへん。
メモしなくてもGoogleさんのツールに入れば見られますが。
SNS
これも各SNSで確認すれば見られますが、メモしておけばコピペで済む。
FacebookページのURLとか、Facebook APP IDとか。
ショートコード
テーマ特有のショートコードを多用している人は、よく使うショートコードをメモしておいた方がいい。
テーマ変更するとショートコードが効かなくなって修正が必要になります。
メモしておくとショートコードを使っている記事を検索して見つけられますね。
テーマカラー
色ですね。#000000
メモしておくと、変更後にすぐ似たような色合いのブログに戻せます。
chromeの拡張機能ColorPick Eyedropperとか使えば、色が調べられます。
あとはAFFINGER管理に何か書いてないか
テーマの機能で設定している部分がないかざっと見てメモして置きます。
例えば「トップ用メタディスクリプション」とか。
テーマ変更してからやった設定
Cocoonをダウンロードして小テーマを有効化しましょう。
phpのエラー対処
Cocoonに変更したらphpのエラーが出ました。
サイト開いたら画面の上の方によくわからない文字列が表示されるやつ。
どうも、Cocoon1.0.4の時点でphp ver7.2.XXに対応してなかったようでした。
サーバーの設定でphp ver7.1.XXに下げたらエラー解消されました。
目次プラグインTable of Contents Plus停止
Cocoonは目次機能があるので、Table of Contents Plusが必要ない。
他にも機能が重複するプラグインを入れている場合は停止させます。
Cocoon設定を一通り済ませる
Cocoonテーマに用意されている設定項目を一通り目を通して終わらせます。
この流れでメモしておいたSNSとかアクセス解析とかの情報をポチポチ入れます。
サムネイルの再生成
テーマ変更すると画像のサイズがズレるので、作り直します。
※注意
画像の貼り方によっては、プラグインを使うことで画像が表示されなくなることもあります。プラグイン実行前に確認した方がいいです。
WordPressプラグインForce Regenerate Thumbnailsは要注意「画像リンク切れ」大量発生 – ソタブロ
Force Regenerate Thumbnailsというプラグインで一括で生成できます。
ブログカードの形式を変更する
AFFINGERにはブログカードを表示するショートコードがありますが、Cocoonは形式が異なるので、ブログカードを使った内部・外部リンクをすべて書き換える必要があります。
面倒ですね。
これを一括で書き換えられるプログラムを作ってくれている方がいらっしゃいました。素敵！
この記事の通りにやったらできました。
CSS・文字装飾とかをなんとかする
文字装飾や、スタイルにある「○○ボックス」みたいなデザインは、テーマが変わることで全部消えます。
直し方は2通り。
- AFFINGERのCSSをCcooonに追加
- AFFINGERのCSSをCocoonで該当するものに変更・置換
前者は、AFFINGERのスタイルシート（style.css）の中で自分が使っていたもの（必要なもの）を、Cocoonのスタイルシートか追加CSSに打ち込めば、AFFINGERの時のデザインに戻るはずです。
ただ、これだと既存の記事と、今後Cocoonで書く記事とのデザインに統一感は無くなりますね。
ボクはそれほど多くの装飾はしていないタイプだったのもあり、最低限のタグだけ置換しました。
↓一括置換に使うプラグイン。
例えば、
| AFFINGER | Cocoon | |
| 太字 | <span class=”huto”> | <span class=”bold”> |
| 太赤字 | <span class=”hutoaka”> | <span class=”bold-red”> |
こうですね。
<span class=”huto”>を<span class=”bold”>に置換すれば、AFFINGERで太字にしてた部分が、Cocoonでも太字になる！という形です。
まとめ
はい、これでざっくり見れるくらいのデザインにはなったと思います。
あ、AFFINGERでタグ管理プラグインや、ランキングプラグインを入れている場合は、テーマをCocoonに変更してもそのまま設定（プラグイン）は残ります。Cocoonに表示はされませんが。
AFFINGERのタグ管理やランキングプラグインで作っている内容を、Cocoonのランキング機能にそのままコピペして移せばいけます。