スポンサーリンク

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

WordPress
この記事は約7分で読めます。

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

私

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

毛玉
毛玉

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

スポンサーリンク

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

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

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

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

このショートコードを記事作成時に都度記述して広告を表示していたのですが、『Cocoon』テーマにはもともと【adショートコードを有効にする】という項目があり、段落ブロックに[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のデフォルト機能に置き換える方法は下記記事にまとめています。

XeoryBaseからCocoon テーマ移行時に不要となったプラグイン一覧
今回は『Cocoon』へのテーマ移行を考えている方向けに、私が約3年間使用していた『XeoryBase』から『Cocoon』にテーマを移行した時に削除したプラグインを全てまとめてみました。 主に『Cocoon』テーマのデフォルト機能と重複しているプラグインをご紹介していますので、『XeoryBase』以外のテーマから移行する方も参考になるかと思います。

反対にCocoonに入れたほうが良いプラグインはこちらの記事にまとめています。

最強の無料テーマCocoonを更に強化するおすすめプラグイン17選
この記事ではCocoonの公式サイトで紹介されているものを参考に「当サイトで実際に導入したプラグイン」や「導入することで得られる効果」などをご紹介していきます。

ウィジェットをCocoonに最初から用意されているものに切り替え

XeoryBaseを利用していた時、プラグインなどを使ってサイドバー等に表示していた「新着記事」や「人気記事」「プロフィール」などをCocoonに最初から用意されているウィジェットへ切り替えました。

具体的な切り替え箇所は下記の通りです。

最近の投稿
XeoryBaseの利用時
『Recent Posts Widget With Thumbnails』プラグインで表示していました。
Cocoonに変更後
→Cocoonのデフォルトウィジェット【[C]新着記事】に変更。
人気記事
XeoryBaseの利用時
『WordPress Popular Posts』プラグインで表示していました。
Cocoonに変更後
→Cocoonのデフォルトウィジェット【[C]人気記事】に変更。
カテゴリー
XeoryBaseの利用時
『WordPressデフォルト機能』か『自作コード』で表示していました。
Cocoonに変更後
→Cocoonのデフォルトウィジェット【[C]ボックスメニュー】に変更。
プロフィール
プロフィールについてはCocoonテーマ変更時に新規で追加しました。
現在は「投稿SNSボタン下」に【[C]プロフィール】で表示しています。
スポンサーリンク

まとめ

2020年7月9日現在までに『XeoryBaseからCocoonテーマへ変更時にやったこと』をまとめてみました。

しかしやったことは日々増加しており、現在やったことをまとめたメモは50項目程になってしまいました…。

私

メモの中から役立ちそうなものを少しずつ解説記事にしていき、この記事にも反映させていきたいと思います。

毛玉
毛玉

テーマをCocoonにしてから出来ることが増えて、サイト運営が更に楽しくなったにゃ!

 

WordPress 体験記
スポンサーリンク
たにぽよをフォローする
たにぽよ

当サイトの運営者。
30超えてからいつもしんどい。

・32歳男
・大阪府出身→沖縄県在住
・個人事業主(アフィリエイト&クラウドワーク)

『趣味』
・オンライン麻雀(天鳳)
・格闘技観戦(プロレス・大相撲・ボクシング)

このサイトの他
沖縄巡り.com(沖縄の芸能人・観光・グルメ情報まとめサイト)』
天鳳マニアクラブ(オンライン麻雀ファンサイト)』
などを運営中。

たにぽよをフォローする
たにあど

コメント

おすすめサーバーランキング

アフィリエイター&ブロガー満足度No.1!

・日本で唯一の”LiteSpeed公式パートナー”
・元アフィリエイターが立ち上げたレンタルサーバー
・最高レベルのサイト表示速度
・無料独自SSL証明書対応
・復元無料の自動バックアップ機能
・WordPressクイックスタート機能
・大容量のディスク容量&転送量(高PVサイトも安心)
・サイト運用数20万件以上

格安料金ですぐに記事が書ける!

・月額費用が480円からと格安
・大容量のディスク容量&転送量(高PVサイトも安心)
・無料独自SSL証明書対応
・プランを自由自在に変更できる
・同サービス内でドメイン管理が可能
・「WordPress快速セットアップ機能」で簡単にSSL対応のWordPressサイトを作成できる
・安全性が高い遠隔地での自動バックアップも標準搭載(無料)
・データベース&ファイルの無料自動復旧可能(14日以内)

コストパフォーマンスNo.1!

・LiteSpeed対応のサーバーでは最安値(月額費用290円~)
・WordPressワンタッチインストール機能
・他サーバーからのサイトデータの引越代行が無料
・費用に対して利用できるサーバーのスペックが高い
・独自ドメインが無制限で利用できる
・ディスクの拡張だけでなくCPU、メモリを増強可能
・無料独自SSL証明書対応
・他のサイトが原因で自分のサイトが表示できなくなることがない
・24時間365日のサポートが受けられる
・無料お試しトライアルあり

低価格!初心者におすすめ!

・月額99円からという超低価格プランあり
・LiteSpeedを利用できるプランでも月額469円~
・無料独自SSL証明書対応
・自動バックアップ機能あり
・障害情報が少ない(安定性が高い)
・サポートの評価も高い

国内最速!サポート◎

・WEBサーバーの応答速度で国内最速を獲得している
・大容量のディスク容量&転送量(高PVサイトも安心)
・自動バックアップ機能あり
・データベース&ファイルの無料自動復旧可能(14日以内)
・WordPressかんたんインストール機能あり
・簡単サーバー移行ツールが用意されており、サイトの引越しが容易
・プランを自由自在に変更できる
・サポートの対応が迅速丁寧

初心者向き!安心と信頼の老舗!

・国内最大級のレンタルサーバー
・月額100円からという超低価格プランあり
・サーバーの管理画面が使いやすい
・これまでに170万人が利用している安心感

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