Simplicity2からCocoonへの切り替え手順と見た目などの復元方法

Wordpress

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

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

スポンサーリンク

Cocoonへの切り替え手順

バックアップの取得

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

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

BackWPup – WordPress Backup Plugin
WordPress の完全自動バックアップを予約します。保存するコンテンツ (Dropbox、S3など) を指定できます。これは無料版です。…続きを読む >

PHP7以上であることを確認

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

テーマの取得

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

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。…続きを読む >

 

テーマのアップロード

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

テーマの有効化と公開

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

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

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

見た目の復元

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

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

メニュー

メニュー幅

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

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

Font Awesome

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

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

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

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

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

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

ウィジェット

テーマ用ウィジェット

テーマの切り替えによって、[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設定 >管理者画面タブ

 

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