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設定 >管理者画面タブ

 

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

 

0

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