Simplicity2からCocoonへの移行手順！プラグインでテーマ移行後のサイト確認

先日、サイトのテーマをSimplicity2からCocoon（コクーン）に変更いたしました。

基本的な部分の移行は簡単でしたが、細かいところで色々と時間がかかった部分がありました。また、後から振り返ると「こうすれば、もっと楽だったな」といったことも多々ありました。

というわけで、私の失敗談なども含めて移行手順をまとめました。これから移行しようと考えている方の参考になれば幸いです。

ちなみに、このページでは「Cocoonって何？」や「Cocoonの良いところ」は紹介しません。私が説明しなくても色んなサイトで最高のテーマと言われているので。笑

もちろん、私も最高のテーマだと思ってます。

もし、「Cocoonって何？」を知りたい方がいらっしゃれば、こちらの本家サイトをご覧ください。

移行前のサイトの状態

Simplicity2からCocoonへの移行の手順を説明する前に、私が移行したサイトの状態についてご紹介します。

レンタルサーバやテーマのバージョン等

• 使用サーバはmixhost
• PHPのバージョンは7.0
• 使用テーマはSimplicity2.6.7
• style.css、function.php等のカスタマイズを行なっている

使用している主なプラグイン

• SEO設定はSimplicity2の機能ではなく、「All in one SEO」を利用
• キャッシュプラグインは「Lite Speed Cache」
• 目次は「Table of contents Plus」を利用
• 人気記事表示は「Simple GA Ranking」を利用

その他にも、AddQuicktagや Broken Link Checkerなど、いくつかプラグインは入れていますが、移行とはあまり関係しないので、割愛致します。

移行手順

移行手順は大きく分けると、「Cocoonを有効化する前にやること」と「Cocoonを有効化した後にやること」の2段階です。

これ以降、順番に以降手順についてご説明します。

Cocoonを有効化する前にやったこと

Cocoonのダウンロード、インストール

Cocoonの親テーマおよび子テーマのダウンロードとインストールは「本家サイト」から実施してください。

Theme Test Drive を使ってデザイン崩れを事前に確認

WordPressのプラグイン「Theme Test Drive」を使うと、管理者だけ移行後のテーマが表示されて、管理者以外のユーザは、今まで通りのテーマが表示されます。

これにより、サイト全体を移行する前に今のサイトが移行後のテーマでどのようなデザインになるかを確認することができます。

このプラグインを使うと、移行直後は「サイドバーには何も表示されないこと」や「投稿一覧に文章が表示される」などに気付けると思います。

また、私の場合は「style.css」や「function.php」などをカスタマイズしていましたので、Cocoonに移行すると、どこでデザイン崩れが起きるかを事前に確認することができました。

全てのページをチェックするのが面倒だという方は、自分のサイトでアクセス数の多い記事のデザインが崩れていないかだけでもチェックした方が良いと思います。

ウィジェットやメニューの変更はしない方が良い

「Theme Test Drive」を使うと一見、Cocoon用のウィジェットやグローバルナビのメニューなどの設定変更が出来るように見えます。

ただし、これは一時的なものであり、一度「Theme Test Drive」を停止すると、設定変更した内容は消えてしまいます。（仕組みはわかりませんが、私の場合は消えていました）

また、ウィジェットやメニューを変更すると、既存のSimplicityのテーマにも影響が出ました。

「Theme Test Drive」を停止すると、既存のSimplicityのサイトを見ると、ウィジェットやメニューの一部が崩れてしまっていました。

Cocoonの子テーマのphpやcssファイルを修正

先ほどの「Theme Test Drive」を使って、Cocoonでのデザイン崩れなどを確認しながら、cssやphpファイルを修正しました。

phpやcssファイルを修正したものは、移行後もそのまま利用できますので、なるべくここで修正しておいた方が良いと思います。

Cocoonを有効化した後にやったこと

Table of Contents Plusの削除

Cocoonでは、テーマの機能として目次表示機能を備えています。そのため、Table of Contents Plusのプラグインは不要となります。

私もCocoonの目次表示機能を利用しており、デザインはかなりシンプルですが、「使用するプラグインの数を減らせること（サーバの負荷が減る）」から、Cocoonの目次機能を使うのがおすすめです。

Cocoonの設定メニュー「目次」で、「目次を表示する」にチェックをするだけで目次を表示することができます。

Table of Contents Plusでも設定できる「目次のタイトル」や「見出しの何階層目までを目次にするか」等の設定もできますよ。

Simple GA Rankingの削除

人気記事の表示に使用していた「Simple GA Ranking」のプラグインを削除し、Cocoonの機能を使って人気記事を表示することにしました。

私は「プラグインの数を減らせること」や「サイドバーのウィジェットで人気記事が簡単に追加できる」等から、Cocoonの人気記事表示機能を利用することにしましたが、必ずしもこのCocoonの人気記事表示機能を利用する必要はないと思います。

なぜならCocoonの人気記事を表示する仕様は、以下の通り訪問者がアクセスする度に、情報を記録していくもので、多少なりともサーバの負荷が予想されるからです。

WordPress Popular Postsプラグインと同様に、訪問者が訪れるとアクセス集計を行います

引用 アクセス集計機能の説明

私はとりあえず、人気記事表示機能を使ってサイトを運営してみて、サーバの負荷状況を見ながら適宜見直したいなと考えてます。

ちなみに、Cocoonの人気記事を表示する仕様の詳細は、本家サイトの記事を参考にしてください。

サイドバーウィジェットの設定

Cocoonのテーマを有効にすると、最初はサイドバーが何も設定されていませんので、「外観」>「ウィジェット」からサイドバーの設定をしてください。

なお、Cocoonではサイドバーのウィジェットごとに「表示/非表示の制御」ができるようになりました。

これが非常に便利で、例えば「このウィジェットはAMPページの時は表示しない」とか「その逆でAMPの時だけ表示する」といったことが通常の設定で可能となっています。

詳細はこちらの本家サイトをご確認ください。

Google AnalyticsとSearch Consoleの設定

Cocoonの設定メニュー「アクセス解析」から「Google Analytics」と「Google Search Console」のIDが設定できます。

これはSimplicityの「外観」>「カスタマイズ」>「SEO」に入れていた値と同じで問題ありません。

広告（Google Adsense）の設定

Cocoonの設定メニュー「広告」から「Google Adsense」の設定ができます。

Cocoonはレスポンシブのテーマなので、レスポンシブの広告コードを入力して、表示位置を指定してください。

SEO対策の設定

私の場合、All in one seoを使用してSEO対策を実施しているため、そのまま利用すると、CocoonのSEO対策の機能としてメタディスクリプションの出力等で重複が起きてしまいます。

そこで、Cocoonの設定メニューで以下3点を実施しました。

1. Cocoonの設定メニュー「SEO」で全てチェックを外す
2. Cocoonの設定メニュー「タイトル」にある「メタディスクリプションタグの出力」と「メタキーワードタグの出力」のチェックを外す
3. Cocoonの設定メニュー「OGP」にある「OGPタグの挿入」と「Twitterカード
   タグの挿入」のチェックを外す

ちなみに、上記の3点目は、CocoonのフォーラムでAkira様に教えて頂いたものです。何でも質問するのは、良くないかもしれませんが、移行手順でどうしようもなくなった時には、フォーラムで質問するのもありだと思います。

AMP機能の有効化

AMPはデフォルトで有効になっていません。Simplicityの時からAMP機能を有効化していた方は、AMP機能有効化のチェックをつけるだけでOKです。

AMP機能の有効化は、Cocoon設定メニューの「AMP」画面から有効にできます。

グローバルナビのメニュー設定

グローバルナビのメニュー設定も忘れずに実施してください。Simplicityの時と仕様が若干異なるため、こちらの本家サイトを参考に設定してください。

なお、Cocoonのサイトのグローバルナビメニューでは、「ホーム」の下に薄い文字で「HOME」と表示されています。

このような表示をしたい場合は、メニューに補足説明文を追加する必要があります。この設定についても本家のサイトが参考になりますので、そちらをご確認ください。

ヘッダー、フッターの設定

最後に、ヘッダーとフッターの設定すれば、OKです。

Cocoonではヘッダーに背景画像とロゴの画像を設定できるようになっています。背景画像をうまく重ねて表示すると、オシャレなサイトロゴになると思います。（私はできていませんが笑）

なお、ヘッダーの背景画像の変更方法はこちらの本家サイトをご確認ください。

まとめ

今回はSimplicityからCocoonへの移行手順についてご紹介しました。WordPressプラグインのTheme Test Driveをうまく使って、テーマ移行前にphpとcssファイルをカスタマイズしておくのがポイントかと思います。

ちなみに、私が移行にかかった時間は「10時間前後」です。仕事やりながらの移行はなかなかまとまった時間が取れないので、地味に日数がかかってしまいました。

移行に時間はかかりましたが、テーマとしては非常に使いやすく、文章が見やすくなる仕掛けがたくさん用意されています。また、サイトもかなり高速化されたこともあり、「移行した甲斐があったな」と感じているところです。

サイトがどれだけ高速化されたかについては別の記事でまとめたいと思います。

以上、Simplicity2からCocoonへの移行を考えている方の参考になれば幸いです。