これでOK!Simpliciy2からCocoonに移行した時にやるべきこと

Simpliciy2からCocoonに移行した時にやるべきこと

Simplicityの後継テーマCocoonが公開されました。

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。

現在、Simplicity2からCocoonへの移行を考えているかと思います。

というわけで今回は、Simplicity2からCocoonに移行した際にやるべきことをまとめてみました。移行を考えている方はぜひ参考にしてみてくださいね。

私の場合は、細かいデザイン調整も含めて2時間ほどで完全移行できましたよ!
スポンサーリンク

移行する準備

移行前にちょっとした準備をしておくとスムーズです。

CocoonはSimplicityの後継テーマですが完全互換ではありません。

一部設定は受け継がれますが、設定しなおす部分がいくつかあります。Cocoonに移行する前に次の点をメモ&バックアップを取っておくと便利です。

GoogleアナリティクスとサーチコンソールのIDをメモ

Cocoonに移行すると、GoogleアナリティクスのトラッキングIDとサーチコンソールのIDが貼り直しになります。

ですので、あらかじめSimplicity2に登録しているIDをメモしておくとスムーズです。

Simplicity2のダッシュボード画面から「外観」→「カスタマイズ」→「アクセス解析とすすみ、それぞれのIDをメモしておきます。

 GoogleアナリティクスのトラッキングIDをメモ

サーチコンソールのIDをメモ

これでCocoonへの移行作業がスムーズになります。

カスタマイズに使ったコードをバックアップ

Cocoonに移行するとスタイルシートがリセットされますので、Simplicity2でカスタマイズをしていた方はもう一度コードを貼り直すことになります。

というわけでバックアップをとっておくと、作業がスムーズになります。

バックアップするのはここです!

Simplicityのカスタマイズコードをバックアップ

バックアップするのは、Simplicity2の子テーマ「style.css」の「Simplicity子テーマ用のスタイルを書く」以降の部分です。

バックアップできたら移行前の準備は完了です。

Cocoonをテーマに設定する

まずはCocoonの親テーマと子テーマをダウンロードしましょう。

「Cocoon」を使うにはまず公式サイトから親テーマと子テーマをダウンロードします(現在はβ版なのでユーザー登録した方のみダウンロード可能になっています)。

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。

ダウンロードしたテーマはこのようにzipファイルになっています。

Cocoon 親テーマと子テーマ

この2つをWordPressにインストールして有効化するとCocoonが使えるようになります。

インストール、子テーマを有効化

1.データがダウンロードできたら、WordPressのダッシュボード画面の「外観」→「テーマ」とすすみます。

テーマを選択

2.「新規追加」をクリックします。

外観を選択

3.「テーマのアップロード」をクリックし、「参照…」から先ほどダウンロードした2つのzipファイルをアップロードします。

テーマのアップロード

4.インストールできたら子テーマを有効化します。

Cocoonの子テーマを有効化

これでCocoonがテーマに設定されました!

初期設定で必ずやること

子テーマを有効化したら次の点を設定していきましょう。

Googleアナリティクス・サーチコンソールの設定

まずはGoogleアナリティクスとサーチコンソールのIDを登録します。

1.ダッシュボード画面から「Cocoon設定」をクリックします。

Cocoon設定

2.「アクセス解析」のタブをクリックします。

Cocoon設定 アクセス解析

3.GoogleアナリティクスのトラッキングIDとサーチコンソールのIDを入力します。

GoogleアナリティクスとサーチコンソールのIDを入力

入力したら保存でこの作業は完了です。

広告の設定

つづいてはGoogleアドセンスの広告設定です。

Cocoonではレスポンシブ広告がメインになりますので、まずはGoogleアドセンスでレスポンシブ広告のコードを取得します。

広告コードの取得

1.Googleアドセンスにログインし「ホーム」→「広告の設定」とすすみます。

Googleアドセンスの広告コードを取得

2.「新しい広告ユニット」をクリックします。

新しい広告ユニット

3.「テキスト広告とディスプレイ広告」を選択します。

テキスト広告とディスプレイ広告を選択

4.広告サイズ「レスポンシブ」を選び、「保存してコードを取得する」をクリックします。

レスポンシブを選択

5.広告コードが表示されるのでコピーします。

コードをコピーする

これでコードの取得は完了です。

Cocoonに広告を設定する

さっそくコピーしたコードを貼ってみましょう。

1.Cocoon設定から「広告」をクリックします。

Cocoon設定 広告を選択

2.広告コードに、先ほどコピーしたコードを貼ります。

アドセンスのコードを貼る

3.広告の表示位置を選択すると、任意の場所に広告を入れることができます。

広告位置・表示方法の選択

いろいろ試してみて、最適な表示設定をさがしてみましょう。

フォントサイズ・投稿設定の確認

Cocoonは、Simplicity2よりメインカラムが横に広くなりました。1行に表示される文字数やフォントサイズも変わり、ずいぶんと見栄えが変わりました。

というわけで、自分好みに調整していきましょう。

フォントサイズの確認・変更

1.フォントサイズは「Cocoon設定」→「全体」から設定します。

 Cocoon設定 全体

2.サイト全体のフォントサイズとモバイル端末でのフォントサイズが設定できます。

フォント設定

デフォルトのフォントサイズは大きめに設定されています。自分のサイトにぴったりなサイズを探してみましょう。

投稿設定の引き継ぎ

Cocoon設定から「その他」にすすむと、「Simplicityから投稿設定を引き継ぐ」という項目があります。

Simplicityから投稿設定を引き継ぐ

チェックを入れておくと、Simplicity2から利用可能なpost meta情報を引き継ぐことができます。

投稿画面の「SEO設定」「広告除外」「AMP除外」項目などが適用されますので、チェックを入れておくと便利かと思います。

カラムの横幅の調整

メインカラム(記事の表示される部分)やウィジェット(サイドバー)の横幅が気になる場合は「Cocoon設定」の「カラム」から調整できます。

Cocoon設定 カラム幅の調整

ここではメインカラムやサイドバーの幅や余白を調整することができます。

コンテンツ幅の調整 

デフォルトのコンテンツ幅は800になっています。680あたりにするとSimplicity2と同じ感じになりますよ。

ヘッダーの設定

Simplicity2のヘッダー設定やヘッダー画像もリセットされているので、「Cocoon設定」の「ヘッダー」から設定しておきましょう。

Cocoon設定 ヘッダー

Cocoonはタイトル表示がセンターになりました。いろいろためしながら設定してみましょう。

ウィジェットの確認

Cocoonに移行すると、ウィジェット(サイドバー)の表示項目が変わっている場合がありますので確認しておきましょう。

1.ダッシュボード画面から「外観」→「ウィジェット」とすすみます。

ウィジェットの設定

2.サイドバーウィジェットの項目をみて、表示項目を確認します。

サイドバーウィジェットの確認

3.消えている項目がある場合は「利用停止中のウィジェット」を確認してみましょう。

利用停止中のウィジェット

この作業まで終えれば、サイト全体のおおよその形はできるかと思います。

【お好みに応じて】やっておくといいこと

お好みに応じて次の点もやってみましょう。

カスタマイズ用のコードを貼り直す

見出しのカスタマイズなどSimplicity2で使っていたコードを使う場合は、子テーマの「style.css」に貼っていきます。

Cocoon カスタマイズ用のコードを貼る

コメント欄の表示・非表示

コメント設定はデフォルトで「表示する」になっています。

非表示にする場合は「Cocoon設定」→「投稿(または固定ページ)」とすすみます。

Cocoon設定 コメント

チェックをはずすとコメントが表示されなくなります。

Cocoon設定 コメントの非表示

パンくずリストの表示位置

Cocoonでは、パンくずリストの表示位置も細かく選べます。

パンくずリストとは、ページに表示されるこんな感じのものです。

Cocoon パンくずリスト

デフォルトではメインカラム下に表示されるようになっています。表示位置を変える場合は「Cocoon設定」→「投稿」とすすみます。

Cocoon設定 投稿

「パンくずリスト設定」で表示位置を決めることができます。

Cocoon設定 パンくずリスト

ここまでやれば、かなり自分らしいサイトになっていると思いますよ!

まとめ

今回は、Simpliciy2からCocoonに移行した時に最初にやることをまとめてみました。

Simplicity2のアップデートと違い、いろいろと設定し直す部分もありますが、私の場合は2時間ほどで完全移行できました。

移行を考えている方はぜひ参考にしてみてくださいね。

スポンサーリンク