当サイト「WordPressお試しブログ」は、WordPressで運営しています。
これまでWordPressのテーマは「Simplicity2」を利用していましたが「Cocoon」に変更しました。
CocoonとSimplicity2はどちらも作者が「わいひら」さんであるため、親和性が高く移行の難易度は低めだと思います。
また、当サイトは構成がシンプルなこともあって、何の問題も無く移行が完了しました。
この後メインサイトも同様に移行しなければならないので、作業手順を残しておくことにします。
実施日：2019年9月25日
WordPressテーマ変更の事前準備
１．サイトのバックアップ
作業の途中で不具合が起きたときのためにサイトのバックアップを取ります。
MixHostの機能を利用してサイト全体をダウンロードしておきました。
２．サイトのクリーンナップ
少しでもトラブルを防止するため不要なものは排除しておきます。
以下作業を行いました。
- 残っていたカエレバを撤去
- 不要なウィジェットの削除
- 不要なプラグインの削除
- アドセンス（ウィジェットで表示）を停止
３．カスタマイズ内容の保存
Simplicity2に設定してある、「Google AnalyticsトラッキングID」「Google Search Console ID」などを保存
「style.css」「functions.php」の内容を保存
あわせて、アフィリエイト用の情報をまとめておく
AMAZON アクセスキーID，シークレットキー，トラッキングID
楽天アプリケーションID，楽天アフィリエイトID
Yahoo!ショッピング，バリューコマースsid，バリューコマースpid
Cocoonのインストール
１．Cocoonをダウンロード
上記サイトより、Cocoon及び子テーマをダウンロードします。
２．Cocoonをインストール
WordPressメニューから「外観」－「テーマ」を選択する。
新規追加ボタンを押す。
テーマのアップロードボタンを押す。
ファイルを選択ボタンを押して、ダウンロードしておいたCocoonテーマ（zipファイル）を指定してインストールを実行します。
次いで子テーマのインストールも実施します。
インストールが終わったら、Cocoonテーマ（子テーマの方）を有効にする。
これでサイト全体がCocoonの表示に変わりました。
インストールの詳細は以下ページを参照
Cocoonの設定
重要な設定から行います。
Cocoonを開きます。
１．Simplicityから設定の引き継ぎ
「その他」タブを開き、「Simplicityから投稿設定を引き継ぐ」チェックを入れて「変更をまとめて保存」を押します。
２．テーマの編集
テーマエディターを開いて「style.css」「functions.php」に必要な内容を書き込みます。
３．Amazon商品リンク用の設定
当サイトはSimplicityでしたが、以下サイトにあるコードを利用して「Amazon商品リンク」を表示していました。
Cocoonでも同じショートコードでAmazon商品リンクが表示できるため、急いでこの設定を行わなければなりません。（※同機能を利用していなければ必要になったときで良いです。）
設定しないと商品リンクはエラーメッセージになってしまいます。
「API」タブを開いて事前にまとめておいた、「AMAZON アクセスキーID」などを設定していきます。
※詳細設定は以下の通り
カタログ写真、レビュー、ロゴなし
「検索ボタンのリンク先を詳細ページにする」にチェック
「楽天標準ソート順」
４．Google Analytics等の設定
「アクセス解析・認証」タブを開いて、「Google AnalyticsトラッキングID」「Google Search Console ID」などを設定します。
５．本文アイキャッチ画像の停止
Cocoonはアイキャッチに設定した画像を、本文上に自動的に挿入するようになっています。
自分で挿入した画像と自動挿入された画像で、二重に画像が表示されてしまうことを避けるため以下の設定をします。
「画像」タブを開き、「本文上にアイキャッチを表示する」のチェックを外します。
５．サムネイルのサイズ調整
この作業をしないと、インデックス表示時の画像のサイズがまちまちで綺麗に整列されません。
プラグイン「Regenerate Thumbnails」をインストールします。
プラグインの画面を開いて「Regenerate Thumbnails」を検索すると見つかりますのでインストールしてください。
「Regenerate Thumbnails」を起動して、Regenerate Thumbnails For All *** Attachmentsボタンを押すと自動的にサムネイルを再作成してくれます。（***は画像の枚数です）
６．アドセンスの設定
アドセンスのレスポンシブ広告コードを用意します。
「広告」タブを開いて、用意した広告コードを貼り付けます。
「広告の表示位置」は
インデックスページの表示位置：トップ，ボトム
投稿・固定ページの表示位置：本文中，本文下，関連記事下（投稿ページのみ）
としました。
７．目次の調整
これまで目次は「Table of Contents Plus」プラグインを利用して表示していました。
Cocoon移行後も「Table of Contents Plus」による目次のままでした。
「Table of Contents Plus」を停止しすると、Cocoon標準の目次へと変わりました。
「Table of Contents Plus」を利用していても、目次が二重に表示されることはありませんでした。
この作業は後回しでも良さそうです。
後書き
これでパッと見は落ち着きました。
作業自体は特に難しいことはありませんでした。
「本文上にアイキャッチを表示する」を有効にするか否かは悩みどころです。自分で画像を入れるようにしているので、この機能は現時点では必要ありません。
ただ、これを有効にしておけば今後の作業が若干ではあるものの手数が減ります。
このサイトは良いけど、メインサイトのすべての記事を調整するのは大変です。
どうしたものか。
あとは見た目のカスタマイズとCocoonの機能チェックをして、万全の態勢でメインサイトのテーマ変更へ臨みます。
コメント