WordPressテーマをCocoonに変更しました【Simplicity2からCocoonへ】

Cocoonロゴ

WordPressのテーマを、Simplicity2からCocoonに移行しました。

より新しいCocoonを使いたいという理由もあったのですが、Amazonアソシエイトの「PA-API v5」に対応するためでもあります。

事前準備をしっかりしたおかげもあり、特に問題なく進めることができたので作業内容をまとめておきます。

スポンサーリンク

テーマ移行事前準備

1.Simplicity2の設定をメモ

テーマ移行後に設定し直す必要があるので、もれなく情報を集めておきます。

Simplicity2の設定画面を開いてメモ帳にコピーして保存します。

以下に挙げている項目は、あくまでも当サイトで必要としているものです。

SEO関係

  • Google AnalyticsトラッキングID
  • Google Search ConsoleのID
  • PtengineのID

SNS関係

  • twitter.com/XXXXXXX
  • facebook.com/XXXXXXX
  • youtube.com/XXXX/XXXXXXX
  • Facebook OGP 管理者ID(fb:admins)
  • FacebookOGPアプリID(fb:app_id)
  • OGPやTwitterカードのホームイメージ

 

ついでに、アフィリエイト用の情報もまとめておきます。

  • AMAZON アクセスキーID,シークレットキー,トラッキングID
  • 楽天アプリケーションID,楽天アフィリエイトID
  • バリューコマースsid,バリューコマースpid(Yahoo!ショッピング)
  • もしもアフィリエイト楽天 a_id

 

2.子テーマの内容(カスタマイズ)

Simplicity2の子テーマで使用していた、「style.css」「functions.php」のバックアップを取ります。

Cocoon移行後にも必要な内容をまとめます。

テーマ移行後、各ファイルへコピペすれば良い状態まで準備しておくと慌てずに済みます。

(カエレバ用のCSSは移行しなくても、同等のものがCocoonに実装されているため問題なく表示されました)

 

続いてサイトのクリーンナップに入ります。

3.不要なプラグインの削除

まったく使っていない、もしくは機能していないプラグインを削除します。

 

4.ウィジェットの整理

現在表示していないウィジェットの内、今後も利用しないと思われるものを削除します。

また利用を継続したいものは、設定をメモしておきました。

中には消えてしまうウィジェットもあります。

 

facebookページ用の「いいね」ボタンをウィジェットで表示していましたが、これはSimplicity2の拡張ウィジェットだったようで移行後消えました。

Facebookページ いいねボタン

Cocoonにも、[C]Facebookボックスという「いいね」ボタンウィジェットがありました。

Simplicity2の物よりも大きく主張するようになってます。

Simplicity2と同じデザインにできないのかな?

 

さらに良く見たら、[C]Facebookバルーンというのがありました。

これならSimplicity2と同等です。

よかった。

5.Cocoonのインストール

いよいよCocoonに手を付けますが、ここではインストールのみで有効化はしません。

公式 Cocoonテーマのダウンロード | Cocoon

Cocoon親テーマおよび子テーマをダウンロードして、Wordpressにインストールします。

先ほども言いましたが、インストールのみで有効化はしません。

インストール方法は以下サイトを参照ください。

公式 Cocoonテーマをインストールする方法 | Cocoon

 

ティーブレイク

これで事前準備は完了です。

ここで一旦手を止めて、作業を振り返ります。

サイトのバックアップは取りましたか?

時間は十分ありますか?

ここから先は一気に作業を進めなくてはなりません。

ただし、あせらず落ち着いて取り組みましょう。

テーマ変更実施

6.Googleアドセンス広告を停止

ギリギリまで広告を表示しておきたかったので、テーマ変更直前のタイミングで行いました。

アドセンスはウィジェットで表示していましたが、すべて停止しました。

テーマ移行後にどのように広告が表示されるか分からないので、アドセンスの規約違反になってしまっては困ります。

移行後に確認しながら再設置します。

 

7.Cocoon有効化

有効化するのは子テーマの方です。

お間違いなく。

8.「style.css」「functions.php」を編集

テーマエディターを開いて、事前に準備した「style.css」「functions.php」を貼り付けます。

9.Cocoonの設定

最初に、Simplicityから設定の引き継ぎを行います。

【その他】タブを開き、「Simplicityから投稿設定を引き継ぐ」チェックを入れて「変更をまとめて保存」を押します。

引き継げる情報はそれほど多くは無いようですが、念のため実施しておきました。

 

続いてそれぞれのタブで設定を確認していきます。

【OGP】タブ

「Facebook APP ID」を入力

「ホームイメージ」を設定

Cocoon OGPの設定

 

【広告】タブ

Googleアドセンスのレスポンシブ広告コードを用意します。

「広告コード」の欄にレスポンシブ広告コードを貼り付けます。

「アドセンス表示方式」:マニュアル広告設定(自前で位置を設定)

「広告の表示位置」は...

インデックスページの表示位置:トップ,ボトム

投稿・固定ページの表示位置:本文中,本文下,関連記事下(投稿ページのみ)

としました。

Cocoonのアドセンス設定

 

【アクセス解析・認証】タブ

タグマネージャID

AMP用 タグマネージャID(※AMP非設定)

Google AnalyticsトラッキングID

Google Search Console ID

必要に応じてそれぞれセットします。

 

【SNSシェア】タブ

SNSシェアボタンにシェア数を表示するよう設定します。

当サイトは「SNS Count Cacheプラグイン」を導入済しています。

このページには「Facebook設定-アクセストークン」を入力する欄がありますが、Facebookのシェア数もSNS Count Cacheプラグインで取得しているので設定していません。

「シェア数を表示」にチェックを入れただけで、シェア数が表示されるようになりました。

Cocoon SNSシェア数

 

Facebookアクセストークンについては以下を参照ください。

参考 Facebookのシェア数を表示させる方法(アクセストークンの取得) | Cocoon

 

【SNSフォロー】タブ

「Twitter」「Facebook」「YouTube」のフォローボタンを追加します。

SNSフォローのタブを開くと、プロフィールページから設定するように促されます。

WordPress管理画面の「ユーザー」から「あなたのプロフィール」を開きます。

WordPressのプロフィール設定画面

それぞれの項目にアカウントを設定することでフォローボタンが増えます。

WordPressフォローボタン

 

【画像】タブ

「本文上にアイキャッチを表示する」からチェックを外しました。

Cocoonにはアイキャッチに設定した画像を、本文上に自動的に挿入する機能があります。

記事トップに自分で画像を入れている場合があるので、自動挿入されると連続して画像が表示されてしまいます。

初期設定で有効になっているので停止させます。

 

「画像の拡大効果」について

Cocoonには画像の拡大表示(Lightbox系効果)機能が標準で搭載さています。

参考 Cocoonの画像拡大効果(Lightbox)ライブラリ各々お勧めの使いどころ | Cocoon

これまでは「Simple Colorboxプラグイン」を使用していましたが、標準の「baguetteBox」を使うことにしてプラグインを停止しました。

 

【API】タブ

それぞれ必要なIDを設定し、詳細は以下のようにした。

・Amazon

「カタログ写真を表示する」 ※チェック外す

「レビューを表示する」 ※チェック外す

「ロゴを表示する」 ※チェック外す

「検索ボタンのリンク先を詳細ページにする」 ※チェックする

・楽天(もしも)

「リンクをもしもアフィリエイトを経由にする」 ※チェックする

・Yahoo!ショッピング

「Yahoo!検索ボタンを表示する」 ※チェックする

 

【全体】タブ

見た目のカスタマイズは後回しにするつもりでしたが、記事に使われているフォントの色がどうにも薄い。

フォントの色を変えれば良いのかなと、確認してみるも黒になっているようだ。

細字のフォントなので薄く見えるようである。

ということでフォントの変更。

「サイトフォント」を「メイリオ,ヒラギノ角ゴ」にした。

 

テーマ移行に伴う基本的なCocoonの設定は以上です。

その他設定

Cocoonには直接関係しませんが、テーマ変更により必要となった設定です。

ヘッダーメニュー

ヘッダーメニューがタイトルにかぶってしまいました。

タイトルにヘッダーメニューがかぶっている

一旦ヘッダーメニューを解除することにします。

WordPress管理画面の「外観」から「メニュー」を開きます。

ヘッダーメニュー:解除

 

すっきりしました。

 

メディアサイズ

メディアサイズ大,中をCocoonの標準サイズに変更します。

これまでは、中サイズを「300」,大サイズを「640」としていました。

それぞれ「400」,「800」に変更します。

 

WordPress管理画面の「設定」から「メディア」を開きます。

中サイズ 300→400

大サイズ 640→800

Wordpressのメディアサイズ設定

※この設定を変更しても、すでにアップされている記事には影響しない。

サムネイのル再作成

「Regenerate Thumbnailsプラグイン」を利用してサムネイルを再作成しました。

これを実施しないと、アイキャッチ画像のサイズがまちまちで綺麗に表示されません。

Wordpress Regenerate Thumbnailsを実行

基本的にはボタンを押すだけです。

2段目の「Delete thumbnail files for…」にはチェックは付けません。

これは「不要なサムネイルを削除する」機能のようです。

今回メディアサイズを変更しているため、旧サイズのサムネイルは不要なファイルと判定される恐れがあります。

もし旧サイズのサムネイルが削除されてしまうと、記事の画像が表示されなくなってしまいます。

目次

目次はこれまで「Table of Contents Plus」プラグインで表示していました。

Cocoonには標準で目次を表示する機能を搭載しているので、プラグインを停止しCocoon版に切り替えます。

 

プラグインを停止するだけで、自動的にCocoon版目次に変わります。

Cocoonの機能で目次を表示

※プラグイン版とCocoon版が同時に表示されることはありませんでした。

モバイルキャッシュをオフ

当サイトはMixHost で運用しているため、ページキャッシュとして「LiteSpeed Cache」を利用しています。

Simplicity2は完全なレスポンシブページでは無かったため、モバイル端末用に個別のキャッシュが必要でした。

Cocoonは完全レスポンシブになったので、個別キャッシュは不要となります。

LiteSpeed Cacheプラグインの設定画面にて以下の設定に変更しました。

LiteSpeed Cacheプラグインのモバイルをオフに設定

カスタマイズ

カスタマイズ内容のメモです。

サイトキーカラー

Cocoon設定の全体タブを開き、サイトキーカラーを「#77a6ce」にしました。

 

1ページに表示する最大投稿数

トップページに表示される記事の数を10から20へ増やします。

WordPress管理画面の「設定」から「表示設定」を開きます。

「1ページに表示する最大投稿数」を20にしました。

 

メニュー

ヘッダーメニューおよびフッターメニューを追加しました。

WordPress管理画面の「外観」から「メニュー」を開きます。

それぞれのメニューを作成し設定しました。

 

「ページ送りナビ設定」の表示タイプ

Cocoon設定の投稿タブを開く。

「ページ送りナビ設定」の欄にて、表示タイプを「サムネイル正方形」に変更。

 

「表示する日付」の表示タイプ

Cocoon設定のSEOタブを開く。

「表示する日付」を「更新日のみ表示」に変更。

現在導入しているプラグイン

プラグインのすべての機能を使っているわけではありませんが、不具合なく動作しています。

  • AddQuicktag
  • Akismet Anti-Spam (アンチスパム)
  • Broken Link Checker
  • Classic Editor
  • Contact Form 7
  • Download Monitor
  • Edit Author Slug
  • EWWW Image Optimizer
  • Google XML Sitemaps
  • LiteSpeed Cache
  • Media Library Alt Fields
  • Page Builder by SiteOrigin
  • Post Snippets
  • Preserve Editor Scroll Position
  • PS Auto Sitemap
  • Regenerate Thumbnails
  • Search Regex
  • SiteGuard WP Plugin
  • SiteOrigin Widgets Bundle
  • Slimstat Analytics
  • SNS Count Cache
  • Table of Contents Plus ※停止
  • TinyMCE Advanced
  • TinyMCE Clear Float
  • WebSub/PubSubHubbub
  • WP Media Category Management
  • WP Multibyte Patch
  • WP-Ban

Cocoon標準の機能に置き換えられるものもあるので、今後整理していきたいと思います。

まとめ

意外と簡単にできました。

Simplicity2とCocoonは、どちらも作者が「わいひら」さんであり、親和性が高く移行トラブルは発生しにくいかと思います。

あわせて、事前準備を念入りに行ったためスムーズに移行できました。

 

次の画像は、Cocoonの設定を開いたとき表示されるメニュータブです。

Cocoonのメニュータブ

 

Cocoonには多数の設定項目があります。

このページで紹介しているCocoonの設定はごく一部でしかありません。

マニュアルの参照も含めて、万全の態勢で移行できるように心がけましょう。

公式 テーマ利用マニュアル | Cocoon

 

WordPress
スポンサーリンク
この記事が気に入ったら、
いいねしてくれると嬉しいです!
ゆうぱぱをフォローする
こんな記事も読まれてます
得意なことからコツコツと

コメント

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