2019年7月1日、WordpressのテーマをSimplicity2からCocoonに変更しました。現在は、正常に運用できていますが、移行は決して簡単ではありませんでした。画面が真っ白となり、検索順位も一気に下がった為、Simplicity2に戻して、テーマの変更を断念したこともありました。が、あきらめずに切り替えて良かったと思います。Cocoonは素晴らしいの一言です。不具合の解決策を含めてCocoon移行時の最低限の設定方法について記録しておきます。
Cocoonのインストール
テーマのダウンロード
Cocoonのテーマサイトより、親テーマ及び子テーマをダウンロードします。
親テーマのダウンロード

子テーマのダウンロード

テーマのアップロードと有効化
ダウンロードした親テーマと、子テーマをアップロードして、有効化します。

不具合の発生
初期現象
親テーマと子テーマをインストール。子テーマを有効化して、管理画面からCocoo設定で、スキンを選択してGoogleAnalytics等色々と設定をして、サイト表示。(この時は「スキン」も「全体」もプレビュー表示がされていました。)すると、トップ画面から投稿記事をクリックしても、該当記事に飛ばない現象が発生。

パーマリンク変更
パーマリンクが変わったのか?とパーマリンクを一度変更しましたが、やはり投稿記事に飛ばず、パーマリンクの設定はもとに戻しました。
テーマの再インストール
CocoonからSimplicity2にテーマを戻し、Cocoonの親テーマも子テーマも削除した後、再度、インストールからやり直しました。
二次現象
テーマの再インストールを行いましたが、今度は「スキン」、「全体」でプレビュー表示がされなくなり、サイト表示をしても真っ白の画面となりました。(画面が真っ白な為、投稿記事に飛ばないという現象は確認が、できなくなりました。)
※再インストールしても、一度設定した内容は消えずにのこったままなので、残った設定をクリアしなければ、現象は変わりません。

親テーマを有効化
子テーマでなく、親テーマでも同じ現象となるのか?を確かめる為、子テーマではなく、親テーマを有効化して、確認すると、プレビュー表示、Webサイトの画面もきちんとされて、且つ、投稿記事へも飛びました。

留意:
子テーマでは、「スキン」や「全体」がプレビュー表示できず、Webサイトの画面も真っ白となりますが、親テーマでは問題ないということは、初期化すれば修正できるということがわかりました。
子テーマのリストア(初期化)
Cocoonフォーラムに不具合現象を投稿して、初期化の方法を助言頂きました。Cocoon設定の中にある「バックアップ機能」で、まず、親テーマを有効化して、cocoon_settings.txtを「バックアップ(バックアップファイルの取得)」した後、子テーマを有効化してcocoon_settings.txtを「リストア」すると、初期化されます。

不具合現象の解決
Cocoon設定のやり直し
設定の際に、「変な文字」を入力したのではないか?と、「アクセス解析・認証」か、又は「広告」の設定があやしいと何度も、設定順番も変えては入力し直しました。
※子テーマの初期化の方法がわかったので、現象が発生しては、子テーマを初期化してやり直すという事を何度も行いました。
原因の特定
CSS縮小化が原因
「高速化」の設定で、「CSSの縮小」をチェックすると、現象が発生しました。Cocoon自体の設定が原因ではなく、高速化の設定が原因でした。

プラグインの特定
「CSSを縮小化する」と、「スキン」と「全体」でプレビュー画面が表示されない、つまり、CSSを縮小化できないのは、いづれかのプラグインであるとの推測から、プラグインを1つずつ停止しては「CSSを縮小化する」にチェックを入れて試してみて、プラグインを特定することができました。原因は、DownloadManagerというプラグインでした。
対応
高速化の設定では、CSS縮小化の除外ができますので、DownloadManagerを除外して、CSS縮小化を行います。

留意:
プラグインのWordPressDownloadManagerを有効にするとWEBサイトの画面が真っ白になってしまいます。「CSS縮小化」を無効にすれば使えるのですが、DownloadManagerを活用していますので、このプラグインについては高速化からは、除外しました。
Simplicity2の設定の控え
Simplicity2からCocoonへテーマを移行するにあたって、Simplicity2での設定内容を控えておきます。
アクセス解析・認証
GoogleAnalyticsトラッキングID

GoogleSearchConsoleのID

Simplicity2で使用していたプラグイン

※赤字のプラグインは、Cocoonに変更した後、削除したプラグインです。
新たに取得したレシポンシィブ広告コード
Cocoonでは、1つの広告コードで設定できるようですので、cocoon用として新たにレシポンシィブ広告コードを取得しました。

使用していたウィジェット
サイドバー

投稿本文

バナー


Cocoon設定

その他

AMP

アクセス解析・認証
GoogleAnalyticsトラッキングIDと、GoogleSearchConsoleのIDを設定する。

スキン
スキンは、わいひらさんのCOLORS(グリーン)を選択

ヘッダー
背景画像は、800x152pxを用意しました。

フッター

目次
Table of Contents Plusと同様、「目次」を付ける為、チェックします。
※私は、見出しはH3までとしました。

エディター
Classic Editorと同じ入力とする為、Gutenbergエディターのチェックを外します。

広告
新たに、「cocoon」という広告ユニットを作成して、それを広告コード及びリンクユニット用として入力した。

サイトの高速化

コメント