サイトアイコン A1 Style

[WordPress] Simplicity2からCocoonへの乗り換え

Simplicity2からCocoonへの切り替え手順と、見た目などの復元方法を紹介します。

また、Cocoonの機能の有効化に際して気付いた点を、いくつかご参考までに紹介します。

Cocoonへの切り替え手順

バックアップの取得

作業を始める前に、今の状態をバックアップしておきましょう。

バックアップは、プラグインを使用するのがお勧めです。

PHP7以上であることを確認

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

テーマの取得

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

テーマのアップロード

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

テーマの有効化と公開

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

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

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

見た目の復元

Cocoonを有効化した直後の素の表示です。

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

メニュー

メニュー幅

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

設定場所:Cocoon設定 > メニュータブ

Font Awesome

Cocoonでは、メニューのアイコンなどに表示するFont Awesomeのバージョンを、4 又は 5から選択できます。

設定場所:Cocoon設定 > 全体タブ

メニューに表示するアイコンは、ナビゲーションラベルに入力します。
アイコンとテキストのあいだの余白は、</span>後の半角スペースで調整できます。
詳細は、Cocoon公式サイトの次の記事が参考になります。

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

設定場所:外観 > メニュー

ウィジェット

テーマ用ウィジェット

テーマの切り替えによって、[S]Simplicityウィジェットは使用停止になるので、新しく追加された[C]Cocoonウィジェットを使用して、復元しましょう。

設定場所:外観 > ウィジェット

広告ウィジェット

Cocoonでは、ウィジェットを使用しなくても、AdSense広告を配置できます。
ただし、一つのAdSense広告を複数箇所に配置する仕組みなので、配置による収益の違いなどを把握したい場合には不向きです。

Cocoon設定 > 広告タブ

機能の有効化

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

機能の有効化に際して気付いた点を、いくつかご参考までに紹介します。

投稿設定の引き継ぎ

Simplicityの投稿設定の一部を引き継げます。
説明文には次のようにあります。

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

設定場所:Cocoon設定 > その他タブ

高速化

コード圧縮

Cocoonのコード圧縮を有効化する場合は、プラグインのAutoptimizeを停止しましょう。
競合を起こして、画面の表示が崩れます。また、Cocoonのカルーセルも、このプラグインを有効化していると、表示が崩れて機能しません。

設定場所:Cocoon設定 > 高速化

Lazy Load

Googleが推奨するメディアの遅延読み込み方法であるLazy Loadは、Cocoon以外に、Jetpackや、EWWW Image Optimizerでも提供されています。

組み合わせなど色々試してみましたが、Jetpack以外では、管理者用メニューバーにある統計情報のグラフやGravaterのプロフィール画像が表示されません。₍遅れすぎて表示が間に合わない?₎

設定場所:Cocoon設定 > 高速化

アクセス集計

人気記事ウィジェット

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

Cocoonでは、独自のアクセス集計を使用するので、アクセス集計の有効化にチェックを入れる必要があります。

設定場所:Cocoon設定 > アクセス集計サイドバー内

管理者パネル

管理者パネルのPV表示は、テーマ独自か、Jetpackかを選択できます。
人気記事ウィジェットも、テーマ独自か、Jetpackかを選択できるようになれば、嬉しいのですが。。。

設定場所:Cocoon設定 > 管理者画面タブ

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

モバイルバージョンを終了