Simplicity2からCocoonへの移行の際に発生した不具合と解決方法

WordPress

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」という広告ユニットを作成して、それを広告コード及びリンクユニット用として入力した。

サイトの高速化

コメント

タイトルとURLをコピーしました