XeoryBaseからCocoon テーマ変更時にやったこと

この記事では、当サイトのWordPressのテーマを『XeoryBase』から『Cocoon』へ変更した時にやったことをまとめています。

私

約3年間使用させて頂いた「バズ部」の『XeoryBase』から、わいひらさんが開発した『Cocoon』へテーマを変更した時にやったことをご紹介します！

毛玉

やったことが増える度に更新していくにゃ！

XeoryBaseからCocoon テーマ変更時にやったこと
まとめ

XeoryBaseからCocoon テーマ変更時にやったこと

早速ですが、XeoryBaseからCocoonへテーマを変更した時にやったことを項目ごとに1つずつご紹介していきます。

Search Regexプラグインで広告挿入用のオリジナルショートコードを記事内から一括削除

XeoryBaseを利用していた頃は『functions.php』を編集し、広告挿入用に” [adsense] ”というオリジナルショートコードを作成していました。

このショートコードを記事作成時に都度記述して広告を表示していたのですが、『Cocoon』テーマにはもともと【adショートコードを有効にする】という項目があり、段落ブロックに

と入力することで任意の場所に広告を表示する機能が搭載されていました。

私

かゆいところに手が届く。
Cocoon開発者のサイト運営を知り尽くしてる感ぱねぇ。。

更に「タイトル上下」や「本文上中下」「SNSボタン上下」といった広告の表示位置も最初から複数用意されていて、ピンポイントに設定することができるのでオリジナルショートコードは完全に不要となりました。

私

頑張って勉強してショートコード作ったのに…。

全ての記事から手作業で” [adsense] ”を削除していくのは大変ですので【Search Regex】という一括置換プラグインを使って、ショートコードを一括削除しました。

ショートコードを一括削除した方法は、下記記事でわかりやすくご紹介しています。

Search Regexプラグインでショートコードを記事内から一括削除

この記事では、Search Regexというプラグインを使って、広告挿入用のショートコードを記事内から一括削除する方法を書いています。

AMPの有効化

Cocoonへのテーマ変更を決めた大きな要因の一つである【AMP（Accelerated Mobile Pages）】対応。

私

Googleが”収益とアクセスが増えるからオススメ！”って言ってるから導入してみたい！

サイトをAMPに対応させるには様々な細かい決まりがあって、初心者が自力で対応するのはほぼ不可能と諦めていたのですが、Cocoonでは設定から『AMP機能を有効化する』という項目にチェックを入れるだけで全ての記事をAMP対応できます。

『CSS』や『functions.php』などを頻繁にカスタマイズしている方は、思い通りのサイト表示にするのに少し時間がかかるかと思いますが、私のサイトの場合は大したカスタマイズはしていませんでしたので、大きなエラーも出ずAMP対応することができました。

XeoryBaseからCocoonへ移行し、AMP機能を有効にした時に発生した細かいエラー等は下記記事にまとめています。

XeoryBaseからCocoonへテーマ変更 AMP対応後に発生したエラー等

この記事では、XeoryBaseからCocoonへテーマ変更し、AMP対応後に発生したエラー等を書いています。「AMPへの対応方法」や「通常ページとAMPページの表示（見た目）の比較」、「発生したGoogle Search Consoleエラー」をまとめてみました。

PWAの有効化

【PWA（Progressive Web Apps）】は、モバイルサイト上でネイティブアプリのようなユーザー体験を提供する技術のことです。

私

この説明だけでは、難しくてよくわからん。

私もCocoonにテーマ変更するまで【PWA】という単語は聞いたことがある程度でした。

調べてみると、PWAを導入することで主に下記のようなことが可能となるようです。

【PWA導入で可能となること（抜粋）】
・ホーム画面にアイコンを追加
・表示速度の向上
・キャッシュを利用してのオフラインでのサイト閲覧
・プッシュ通知（*iOSは未対応、また別途設定が必要です。）

私

なんか凄そう。導入したい。。

導入方法は簡単で、Cocoon設定の「PWA」タブから『PWAを有効化する』にチェックを入れて保存するだけです。

私

簡単だけどデメリットとかないの？

PWAを導入するメリットやデメリット、導入時のポイント詳細などは下記記事にまとめています。

CocoonでPWA設定する方法と導入のメリット、デメリット

この記事では、CocoonでPWA設定をする方法と導入のメリット、デメリットをわかりやすくご紹介しています。

スキンの変更

Cocoonには、サイトの見た目を簡単に変更できる『スキン』という機能があります。

「Cocoon設定」から「スキンタブ」を選択してみると、色々な方が作成した多種多彩なデザインのスキン一覧が表示されます。

利用者が多いCocoonテーマですが、このスキン機能のおかげで手軽に自分の個性を出したサイトが作成できるという訳です。

このサイトでは【tecurio sky】という、青を基調としたさわやかなデザインのスキンを使用させて頂いています。

私

グローバルナビメニューの配色は色々試してみて、しっくりきたものを選んだのですが、後になって『ウクライナの国旗』と丸かぶりなことに気づきました（笑）

グローバルナビメニューの配色は「Cocoon設定」→「ヘッダータブ」の中にある「グローバルナビメニュー色」から変更できます。

不要なプラグインの削除

その他のテーマではプラグインがないとできないことも、Cocoonテーマであればデフォルト機能で実現できることが多いです。

そのため、XeoryBaseの時に使用していたプラグインで不要なものを削除しました。

XeoryBaseからCocoonへのテーマ移行時に削除したプラグイン一覧は下記の通りです。

【XeoryBaseからCocoon テーマ移行時に削除したプラグイン】
*アルファベット順です。

『Autoptimize（高速化・コード圧縮）』
『Classic Editor（エディター）』
『Favicon by RealFaviconGenerator（アイコン・ファビコン）』
『Lazy Loader（画像の遅延読み込み）』
『Meta Slider（スライダー・カルーセル）』
『PS Auto Sitemap（サイトマップ）』
『Q2W3 Fixed Widget（スクロール追従）』
『Recent Posts Widget With Thumbnails（最近の投稿）』
『Shortcodes Ultimate（記事装飾）』
『Table of Contents Plus（目次）』
『WordPress Related Posts（関連記事）』

上記の削除したプラグインで実現していた機能を、Cocoonのデフォルト機能に置き換える方法は下記記事にまとめています。