SimplicityからCocoonへの移行

WordPressテーマSimplicityを長く愛用してきたけれど、ようやく後継テーマCocoonに移行。
SimplicityからCocoonへの移行

手順メモ

現状のバックアップ

    1. 普段からXサーバーでも自動バックアップされているけれど、
      定期的に自動バックアップ設定しているプラグインUpdraftPlus Backup/Restoreで、
      手動の「今すぐバックアップ」を実行。
      テーマファイルだけでなく全体をGoogle Driveにバックアップ。
    2. 念のため、Simplicityの親テーマ・子テーマのフォルダをFTPでもバックアップ。
    3. これまで　外観－カスタマイズ　Simplicityで設定していた項目を別のところにメモ。
      • Google Analytics、Search Consoleの設定
      • SNSの設定
      • 文字色・リンク色、ロゴ画像、背景画像、背景色の設定
      • [S]のついたSimplicity独自のウィジェット（自分は使っていなかった）
      • 追加CSS（自分は使っていなかった）
        …など
        ※子テーマのstyle.cssも追加CSSも、新テーマにそのまま使えるわけではない。
        内容を見直して使う。
        ※Simplicityの機能でチェックを入れるだけで簡単設定していた項目は膨大にあるし、Cocoonではさらに簡単に設定できる項目が増えているので、主な項目以外はCocoonで新規設定していった方が早い。

新テーマCocoonのダウンロード・インストール・有効化

Cocoonの親テーマ・子テーマを　>> 公式サイトからダウンロード
インストールと有効化

新テーマCocoonの基本設定

メニューの「Cocoon設定」を選択し、膨大な数のタブが並ぶ中から少しずつ設定する。

    1. 最初に、Simplicityの引き継ぎ。
      「その他」のタブ
      「Simplicityから投稿設定を引き継ぐ」にチェックを入れる！
      各投稿の「SEO」「広告」「AMP」の設定が引き継がれる。
    2. つづいて「アクセス解析・認証」タブ
      「Google Analytics設定」、「Google Search Console設定」にそれぞれIDを入力。
      「Googleタグマネージャー設定」の入力欄もある。
    3. ここからは個人的に目についたものから設定していった。
      こだわり過ぎると進まないので、とりあえず最低限のことをやって、後で整えた方がいい。

      • 「全体」のタブ
        サイトの背景色　を設定
      • 「ヘッダー」のタブ
        「ヘッダーレイアウト」デフォルトでは「センターロゴ」になっているのを、「センターロゴ（スリムメニュー）」に変更してみた。
        ヘッダーロゴはとりあえず以前のものを使用、高さ指定、ヘッダー全体背景色・ヘッダー全体文字色・グローバルナビ色・グローバルナビリンク色など設定
      • 「タイトル」のタブ
        タイトル・キーワード・ディスクリプションの設定、表示の選択
      • 「SEO」のタブ
        記事一覧など、投稿日・更新日を表示するかどうか。
      • 「本文」のタブ
        一番下「投稿情報表示設定」
        投稿・固定ページの関連情報表示について、投稿日・更新日・投稿者名を表示するかどうか。
        記事を読む目安時間を表示させたりもできる。
      • 「SNSシェア」のタブ
        トップシェアボタン、ボトムシェアボタンについて
        「メインカラムトップシェアボタンを表示」　自分はいずれもチェックをはずした。
      • 「SNSフォロー」のタブ
        「本文下のフォローボタンを表示する」　　　自分はチェックをはずした。
      • 「 フッター」のタブ
        フッター背景色、フッター文字色の指定
        フッター表示タイプの選択　「メニュー＆クレジット（左右）」にしてみた。
        クレジット表記の選択
      • 「モバイル」のタブ
        「ヘッダー・フッターモバイルボタン」を選択してみた。
        https://wp-cocoon.com/mobile-header-buttons/
        フッターモバイルボタンの設定方法
        スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。
        wp-cocoon.com

その他

Simplicityの時と同じく、固定ページで作ったフロントページのカスタムCSS欄に以下を入れて
自動で他ページ同様のページタイトルh1を表示させないようにした。

.entry-title{display: none;}

Cocoon子テーマのCSSに、Simplicityの時とは少し変えた指定をして、
代わりのページタイトルh1を別表示させた。

/*トップページのタイトル*/
#top-title{　……　}

※Cocoonの設定で、選べる、設定できる項目がかなり多いので、使いながら必要に応じて進めていきたい。
わざわざプラグインを利用したり、CSSを変更しなくても、簡単に設定できることが増えている気がする。

＜追記＞
これまで使用してきたけれど、Cocoonには内臓されているので、不要になった以下のプラグインを削除。
Cocoonにインストール不要なプラグイン
Classic Editor
Classic Widgets

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