Simplicity2からCocoonへの切り替え手順と初期設定など

Simplicity2からCocoonへの切り替え手順と、最初にしておきたい設定、及びプラグインとの競合について紹介します。

スポンサーリンク

Cocoonへの切り替え手順

PHP7以上であることを確認

先ずは、サーバーパネルでPHPのバージョンが7以上であることを確認します。

テーマの取得

Cocoon公式サイトから、親テーマと子テーマの両方をダウンロードします。
子テーマは、テーマをカスタマイズする際に必要となります。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

 

テーマのアップロード

WP Adminから、親テーマ、子テーマの順にアップロードします。

テーマの有効化と公開

子テーマのアップロードが完了したら、ライブプレビューで確認しておきましょう。

特に大きな問題がなければ、サイドバーにある「有効化して公開」をクリックします。

サイドバーのテーマから、Cocoon Childに切り替わっていることを確認します。

 

最初にしておきたい設定

Cocoonを有効化した素の状態です。

上から、タイトル、キャッチフレーズ、メニュー、インデックスは表示されています。
サイドバーは、Simplicity専用ウィジェットだけで構成していたためか、丸ごと消えています。
あと、メニューのアイコンも消えていますね。

投稿設定の引き継ぎ

Cocoon設定 > その他タブ から、Simplicityの投稿設定の一部を引き継げます。
説明文には次のようにあります。

Simplicityから利用可能なPost meta情報を利用します。例えば投稿画面の「SEO設定」「広告除外」「AMP除外」項目とか。※テーマカスタマイザーとかの設定は移行できません。

ウィジェットの復元

[S]Simplicity専用ウィジェットは、使用停止中になっています。
新しく[C]Cocoon専用ウィジェットが追加されているので、そちらを使用して復元しましょう。

Cocoonでは、広告ウィジェットを使用しなくても、AdSense広告を簡単に配置できるようになりました。Cocoon設定 > 広告タブから設定できます。

ただし、一つのAdSense広告を複数箇所に配置する仕組みなので、広告の配置場所による収益などを把握したい方には不向きです。

メニュー幅の調整

Cocoonの既定値では、メニュー幅は均一になります。

余白が広過ぎて、メニューが折り返しているような場合は、Cocoon設定のメニュータブで、メニュー幅をテキストに合わせることができます。

Font Awesome

Cocoonでは、メニューのアイコンなどに、Font Awesomeのバージョン4 又は 5 を使用できます。
どちらのバージョンを選ぶかは、Cocoon設定 > 全体タブ から設定できます。

メニューに設定する場合は、ナビゲーションラベルに入力します。
アイコンとテキストのあいだの余白は、</span>後の半角スペースで調整しています。

<span class=”fab fa-aws” aria-hidden=”true”></span> AWS

詳細は、Cocoon公式サイトの次の記事が参考になります。

Font Awesome5を利用する方法
サイトで利用されているアイコンフォントをFont Awesome5に変更したり、Font Awesome4に戻したりする方法です。

実際の入力は次のような感じです。

Simplicityでは、CSS Class (オプション)で設定できましたが、Cocoonでは仕様が変更されています。

プラグインとの競合

Cocoonはテーマですが、プラグインと同等の便利機能が数多く実装されています。
そのため、類似した機能のプラグインと競合する場合があります。

サイト高速化の問題

サイト高速化の縮小化機能は、プラグイン「Autoptimize」と競合を起こして表示が崩れます。
また、Cocoonのカルーセルも、このプラグインを有効にしていると機能しません。

今回、カルーセルは是非とも実装したかったので、Autoptimizeは無効にしました。

これにより、表示の崩れも回避できましたが、残念なことに縮小化機能を有効すると、私のサイトでは、表示が極端に遅くなってしまいました(涙)
さらに、Lazy Loadを有効にすると、管理者に設定しているGravaterのプロフィール画像も表示されなくなりました。

結局、Cocoonのサイト高速化では、ブラウザキャッシュの有効化のみ設定しました。

三つのアクセス集計

WordPressのダッシュボードには、Jetpackのアクセス集計を表示されている方が多いと思います。
わたしもそうしています。

一方、Simplicityでは、Simplicity専用ウィジェットの人気記事をPVで表示するため、WordPress Popular Postsを有効にする必要がありました。

そして、Cocoonでは、独自のアクセス集計の仕組みが実装されており、Cocoon設定 > 管理者画面では、PVの表示を、テーマ独自か、Jetpackかを、選択できるようになりました。

ただし、Cocoon専用ウィジェットの人気記事を使用したければ、結局、Cocoonのアクセス集計で、独自の「アクセス集計の有効化」にはチェックを入れておく必要があります。

以上、Jetpack、WordPress Popular Posts、Cocoonテーマ独自という、三種類のアクセス集計と、人気記事のウィジェットが併存している状態になってしまいました。

テーマをCocoonに切り替えたことで、少なくともWordPress Popular Postsを有効化しておく意味は無くなりました。

Cocoon専用ウィジェットの人気記事も、Simplicityのように、テーマ独自か、Jetpackかを、選択できるようになっていれば、嬉しいのですが。。。

結局、Cocoon専用ウィジェットの人気記事のためだけに、テーマ独自のアクセス集計を有効にしています。

すべてのウィジェットを試しましたが、Cocoonのデザインがダントツで秀逸なので、仕方ありませんね。

最後までご覧いただき、ありがとうございます。

 

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