WordPressテーマをCocoonに変更して、いろいろ苦労した備忘録

Twitterでつぶやいていましたが、ブログを2021/4/16にリニューアルし、WordPressテーマを無料の人気テーマ「Cocoon」に変更しました。
どこかで見た様なデザインかと思いますが、超人気テーマなので似通ってしまうのは仕方ありません。
独自性よりも今後のメンテナンス性重視ということでこのテーマにしました。

当初はすんなり移行できると踏んでいたのですが、実はかなり悪戦苦闘しました。
今回は自分自身の備忘録も兼ねて綴っていこうと思います。

また、テーマ変更に伴い、Googleアドセンス広告表示に関してもいろいろ問題がありました。
当ブログでは広告表示させていただいておりますが、広告収入はブログの運営費に充てられるため、必要不可欠です。
広告表示がうまくいかないと、このブログの運営にかなり影響してくるので、私にとっては大問題でした。
現在も未解決なところが多々ありますが、いろいろ苦労した点を綴っていこうと思います。

なお、この記事の内容は個人的な推測で書いているところが多々あります。
もし、誤り等がありましたらコメント投稿等でご連絡いただけると助かります。

【目次】

WordPressテーマをCocoonに替えたわけ

今まで、Twenty-FifteenというWordPress純正のテーマを自己流でカスタマイズして使っていましたが、タグやCSS、およびスクリプトが肥大化し、メンテナンスの手間が多くなり過ぎて来ました。
そして、Google Search Consoleのエラー対策が限界に達して来たため、思い切ってテーマを変更したというわけです。
Twenty-Fifteenはかれこれ６年近く使い続けてきたので、替え時でもあったのです。

CocoonというWordPressテーマについて、かなり好評という噂は聞いていたのですが、実際使ってみると、今までメンテナンスで苦労していたあらゆる事が設定画面で簡単にカスタマイズできるようになっていて、至れり尽くせりでした。
とにかく素晴らしいテーマだと思います。

ただ、実際に本番のサーバー環境でテーマを移行してみると、いろいろと難題にぶつかりました。
今まで使っていたプラグインとの干渉問題や、画像貼り付けショートコード、SEO（Search Engine Optimization, 検索エンジン最適化）、AMPページ対策、Googleアドセンス広告対策、その他ブラウザエラー対策等々、盛り沢山でした。
特にGoogleアドセンスの自動広告が記事内に表示されないことに長い間悩まされました。

結局のところ、Cocoonに変更開始してからある程度落ち着くまで、約１か月の時間コストを要しました。
今回の場合、５月の連休前に始めたのが大失敗で、連休中の空いた時間は全てこれに費やすことになってしまい、休んだ気がしませんでしたね。
連休前のテーマ変更は避けるべしという教訓を得ました。

Cocoonテーマ変更で行った主な手順

Cocoonテーマの使い方については、公式のこちらのページを参照しました。
簡単に終るかと思ったのですが、意外と多くの手順がありました。

1. ローカル環境でCocoonをテスト

まずは、ローカルPC環境でCocoonテーマをじっくりテストしました。

ローカル環境について、私はXAMPPのApacheモジュールでWordPressローカルサーバー環境を構築していたので、それでテストしました。

以前使っていたテーマTwenty-FifteenからCocoonにテーマを変えて、いろいろ試しました。
ローカル環境で試しただけで、Cocoonはとても素晴らしいテーマだとすぐに分かりましたね。

Cocoonテーマをダウンロードしてインストールし、有効化

公式の以下のサイトを参照して、CocoonテーマのZIPファイルをダウンロードし、ローカル環境のWordPressにCocoonテーマをインストールして、子テーマの方を有効化しておきます。

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

旧テーマfunctions.phpの自作関数を移行してテスト

旧テーマのfunctions.phpファイルには、画像貼り付け等のショートコード関数を自作していました。
それをローカル環境のCocoon子テーマのfunctions.phpにコピーし、ちゃんと機能するかをチェックしました。

旧テーマstyle.cssから、必要なCSSを移行してテスト

実際にローカル環境でテストしてみると、旧テーマで使っていたCSSを使わないとうまく表示してくれないことがあったので、必要なCSSをローカル環境のCocoon子テーマのstyle.cssにコピーしてチェックしました。

メタディスクリプションやメタキーワードの一括変換方法をチェックしておく

WordPress管理画面の投稿ページを確認すると、メタディスクリプションやメタキーワードが空白になっているのがわかります。

私の場合は、旧テーマのSEO（Search Engine Optimization, 検索エンジン最適化）対策として、Yoast SEOプラグインを使っていました。
メタディスクリプションやメタキーワードは、SQLデータベースに入力されているので、phpMyAdminなどのアプリを使って一括変換する手順を確認しておきました。

例えば、メタディスクリプションをYoast SEOからCocoon用に一括変換する場合、Yoast SEOで設定したメタディスクリプション中の適当な語句を拾ってphpMyAdminで検索して、メタディスクリプションのmeta_keyを探し出します。
Yoast SEOのmeta_keyは、_yoast_wpseo_metadescでした。

また、Cocoonのmeta_key検出の場合は、投稿ページのメタディスクリプションに適当な単語を入力して更新して置きます。その後、phpMyAdminで検索すれば取得できます。
Cocoonのmeta_keyは、the_page_meta_descriptionでした。

それが判明すれば、phpMyAdmin等のSQLで、以下のコマンドでメタディスクリプションを一括置換できます。

update 〇〇_postmeta set meta_key=replace(meta_key, "_yoast_wpseo_metadesc", "the_page_meta_description")

例えば、ブログのpostmeta名が「wp」だった場合、○○のところを変えて、wp_postmeta とすればOKです。
同様に、メタキーワードは以下のコマンドです。

update 〇〇_postmeta set meta_key=replace(meta_key, "_yoast_wpseo_focuskw", "the_page_meta_keywords")

因みに、Yoast SEOのメタキーワードは、キーワード毎に半角スペース区切りでしたが、Cocoonではカンマ区切りになっています。
SQLの一括変換だけではスペース区切りのままなので、必要ならば変換しても良いです。
ですが、現在、メタキーワードはあまり重要視されていないので、後回しにしました。

Cocoon設定のバックアップファイルを出力しておく

ローカル環境のテストで特に問題無ければ、Cocoon設定をバックアップ出力してファイルに保存しておきます。
後に本番サーバー環境で復元するためです。

しかし、実際に外部のサーバー環境で試してみると、思わぬエラーや問題点が続出しました。
特に、広告表示は本番サーバー環境でないと確認できないのです。
あとで詳しく述べます。

2. 本番サーバー環境のWordPressで、Cocoonテーマを新規インストールしておく

では、今度は本番のサーバー環境のWordPressでCocoonを新規インストールしておきます。
公式の以下のサイトを参照して進めていきます。

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

ここで注意することは、完全版をサーバーにアップする時に、アップロード可能なファイルサイズを確認しておくことです。サーバー内のphp.iniで編集します。
私の場合はその設定をすっかり忘れていて、なかなかアップロードできなくてハマりました。

3. ローカル環境で確かめた子テーマファイル群を、本番サーバーのCocoon子テーマフォルダに上書きしておく。

本番サーバー環境でCocoonのインストールが終わったら、Cocoon子テーマフォルダに、ローカル環境で動作を確かめておいたfunctions.phpやstyle.cssを上書き保存しておきます。
その際、その他のファイルも含めて、パーミッションを確認しておくことが大事です。

4. 不要なプラグインは無効化しておく

まだCocoonを有効化していない状態で、不要と思われるプラグインを無効化します。
サイトの運営上、支障のない範囲のものでOKです。

5. 本番サーバーのWordPress管理画面で、Cocoonテーマをライブプレビューして、最低限の表示を確認しておく

Cocoonを有効にする前に、WordPress管理画面→「外観」→「テーマ」のところで、Cocoon子テーマのライブプレビューを使って最低限の表示を確認しておきます。

6. Cocoonの子テーマを有効化する

以上で特に問題無ければCocoonの子テーマを有効化します。
ただし、ここで有効化しても、まだ最低限のものしか機能していないので、この後の設定が大事です。
ここから先は本番環境で既に稼働しているので、慎重に編集していきます。
できることなら、アクセスの少ない深夜～未明にかけて作業した方が良いと思いますが、そうもいかないのが現実ですね。

7. Cocoon設定バックアップファイルを復元する

ここで、ローカル環境テストでバックアップを取って置いたCocoon設定ファイルを本番サーバー環境で復元します。

ただし、ここで要注意！
ローカル環境の設定で確認したロゴ等の画像ファイルのアドレスは、ローカル環境アドレスのままになっている場合があり、それはブラウザでエラーになるということを頭に置いておかねばなりません。
復元したら、即、そのロゴ等の参照先を新たに設定し直さないと、Googleクローラが巡回してきたときにサイト評価が下がってしまうので要注意です。

8. メタディスクリプションとメタキーワードをCocoon用に一括変換しておく

先ほどローカル環境テストのこちらの節で手順を確認したように、メタディスクリプションとメタキーワードをCocoon用データベースに移行します。

メタディスクリプションはGoogle検索結果で表示される説明文となるので、重要な要素です。
メタキーワードは最近では殆ど重要視されていませんが、一応変換しておきます。
この変換作業は、Googleクローラの巡回が来る前に終わらせておかないと、サイト評価を下げてしまう可能性があるので早めに行うようにします。

移行方法は、先ほどローカル環境テストで述べたように、そこで手順を確認済みなので、それに従ってphpMyAdmin等のアプリを使って一括変換しておきます。

9. Yoast SEOプラグインを無効化する

メタディスクリプションとメタキーワードの移行が終わったら、その時点で旧SEO対策プラグインのYoast SEOを無効化します。
メタディスクリプションとメタキーワードの移行の前にプラグインの無効化および削除してしまうと、メタディスクリプションの移行が出来なくなる恐れがあるので、順番を間違えないようにします。

10. XML Sitemaps プラグインをインストールし、有効化する

SEO関連はCocoonで賄っているので、Yoast SEOが不要になったわけですが、そうするとサイトマップファイル（sitemap.xml）が作れなくなってしまいました。
Cocoonテーマではサイトマップまでは作成してくれませんので、新たにサイトマップ作成のためだけのプラグインを使う必要がありました。
調べると、Cocoonではほとんどの人がXML Sitemapsプラグインを使っていることが分かりました。旧名はGoogle XML Sitemaps という名前で、現在変更になっていますので要注意です。

XML Sitemapsプラグインをインストールして有効化し、必要な設定を済ませたら、サイトマップが作られているかを確認します。
このブログでは以下のアドレスです。
https://www.mgo-tec.com/sitemap.xml

ところで、個人的な願望として、サイトマップ生成とSEO対策は、テーマに全て盛り込んで欲しいですね。
そういうものはおそらく有料テーマになってくるんでしょうね。

11. Google Search Consoleを開き、sitemap.xml を送信する

サイトマップができていることを確認したら、早めにGoogleにサイトマップを送信した方が良いと個人的に思います。Google Search Consoleで送信します。
Googleのクローラが当サイトを早めにチェックするように促す目的もありますし、以前のサイトマップと形態が変わったために、Googleに知らせる目的もあります。

ただ、この段階ではまだ細かいところの修正やチェックが終わっていないので、はたしてこの時点で送信した方が良いのかは正直わかりません。

12. Amazon広告ショートコードの変更

旧テーマでは、Amazonアソシエイトの広告タグ用ショートコードを自己流の関数で作っていましたが、それはCocoonテーマに標準装備されていたので、自作ショートコードは不要になりました。
これは嬉しいですね。
そして、ショートコードの記名方法をCocoon用に一括変換するだけで済みました。
これはスムースに移行できましたね。

このAmazon広告というのは、Amazonサーバーにある商品の画像やタイトルおよび価格等のデータをダウンロードさせるスクリプトが必要になるわけですが、Amazon広告を多く貼ると、一昔前は画像データのダウンロードが全て終了するまでブラウザ上のサイト表示レンダリングが終了しませんでした。これがサイト表示速度の最大のネックとなっていました。
ですから、現在、画像の読み込みはLazy Load（遅延読み込み）対応が必須になっています。
Cocoonでは当然その辺も対策済みなので、とても有難いですね。
Lazy Loadについては後で詳しく述べます。

13. コメント投稿欄の動作チェック

コメント投稿欄がちゃんと機能しているかどうかを、実際に投稿してチェックしておきます。
コメント投稿入力欄を予め展開しておくのか、ボタンを押したら展開する挙動にするのかを選んでおきます。
ボタンを押したら展開する方式は、私の様なreCAPTCHA v2を使う場合に問題となるので、私の場合は事前に展開する方式としました。

14. reCAPTCHAのコード修正および動作チェック

コメント投稿やお問い合わせフォームでは、何も対策しないとスパム投稿が鬼のように来るので、スパム防止対策としてGoogleのreCAPTCHAを設定することは欠かせません。
このブログの右下に常時出ているアイコンがありますが、これはreCAPTCHA v3が機能しているということです。（※AMPページではロゴが出ません）
これを使うことによって、スパム投稿が劇的に減りましたね。
コメント投稿やお問い合わせフォームには必ず設定しておいた方が良いアイテムです。

私の場合、お問い合わせフォームではプラグイン内の設定でreCAPTCHA v3 を使っていますが、コメント投稿入力はreCAPTCHA v2を使っています。
コメント投稿入力欄をクリックすると、reCAPTCHAのチェックボックスが現れるように自前でコードを組んでいます。
いずれ、CAPTCHA画像のチェック不要な最新のreCAPTCHA v3に統一したいと思っていますが、お問い合わせフォームのプラグイン設定が外せないので、あえて別々にしています。

実は、reCAPTCHAはAMPページの場合で問題になります。これについては後で述べます。

15. Cocoonの高速化設定で、ブラウザキャッシュを有効にし、Lazy Loadを有効にした。

Cocoonの高速化設定で、ブラウザキャッシュは有効にしました。
その方がページの表示を高速化できます。

Lazy Load （遅延読み込み）は、過去のこちらの記事で扱いましたが、設定しておいた方が良いと思います。
要は、見えている画面上の画像は即読み込み、スクロールしなければ見えない画像はスクロールした時点で読み込むという機能です。
これについては後でも述べます。

私の場合、Lazy Loadは独自のショートコードで対応しているため、CocoonのLazy Load設定にはあまり影響を受けませんが、翌々はCocoonに任せるようにしたいです。

16. ウィジェットおよびサイドバーへのHTMLコードおよび広告コード移行

旧テーマで使っていたウィジェットのメニューや広告コードを移行します。

それにしても、ウィジェットに関しては、Cocoonの凄さに驚きました。
ブロックごとにかなり細分化されていて、とても機能的になっていたからです。
それに、スクロール追従サイドバーウィジェットが標準で装備されていたのには感動しましたね。
このウィジェットの素晴らしさは最後の方でもうちょっと詳しく紹介したいと思います。

ところで、このウィジェットで少々ハマった点は、広告設定で全ての広告を非表示にすると、ウィジェット内で自作のショートコードが使えなくなることでした。
まぁ、ウィジェットでショートコードを使うような人はほとんどいないと思いますので、あまり考慮しなくても良いかも知れませんね。

以上が、Cocoonテーマ移行初期の大まかな手順でした。

この他にもまだまだいろいろとチェックしなければいけない事が盛り沢山です。
次以降のページではAMPページのチェックやその他のチェック、およびアドセンス広告について紹介します。