ブログの本筋テーマや方向性もブレブレのINFO BOXです。
今回WordPressのテーマを変更しよう！と言う衝動に襲われたため「Cocoon」に変更してみました。変更前のテーマから変更後の変化を中心に注意点を交えながらまとめてみましたので、
同じ様にテーマ変更でお悩みの方々のご参考になって頂ければ幸いですw
Cocoon以前のテーマはバズ部さん「Xeory BASE」
2018年12月頃からブログ開通に伴いこちらのテーマを利用させて頂きました。初めてのワードプレスで何故これを選んだかについては以下の4点が主な理由でした。
- シンプルであること
- ノウハウ(ナレッジ)がネット上にあること
- テーマ更新がされていること
- SEO対策
個人的にわちゃわちゃしたサイトより「見やすさ」「操作性」を重視したいと思っています。googleさんと一緒でユーザーファーストを掲げていきたい！
と…大それた理由ではありませんが（笑）
なんせ初めてなため、バグった時や思うようなカスタマイズが出来なかった時の情報収集や他の方の対応方法を参考にしたいためマニアックなテーマは避けたい所でした。SEO対策について充実していること。
使ってみて(Xerox BASE)
かなりシンプルな構成でカスタマイズ性もあり、ナビゲーション等も容易に設定できたのも操作性に優れていたからではないかと思います。
※ほぼ初テーマだったため他との比較ができず個人的感想として捉えてください
SEOについては専門用語だらけで初めは不慣れでしたがヘルプ情報も多く少しずつ慣れることが出来ました。
WordPress Cocoonテーマ変更の理由
- 主にモバイル版の読み込みスピード向上
- 記事一覧の各カードがでかすぎる。
- 続きを読むを指定しないと全記事がトップに表示されてしまう。
- 一覧記事はサムネ付きのコンパクトなものに。
- アドセンス広告の簡単設定
上記の中でも「スピード」「記事一覧」が大きな要因でした。PageSpeed Insightsでの結果があまり向上しなかったこと。
PageSpeed Insights test モバイル版
PageSpeed Insights test PC版
記事一覧の内容が「続きを読む」設定を入れておかないと本文が長々と表示され、かなり長い1ページとして複数の記事が表示される状態となってまうため、調整を考慮するのが面倒でした。そのほかアイキャッチ画像の重複等のバグも起こっていたりと一つ一つ解消させるよりテーマ変更した方が手っ取り早く解消されるんじゃないかとおもいました。
テーマ変更手順(Cocoon)
参考にしたブログは以下のCocoonさんサイトです。
基本的にはこちらの手順に沿っていけば問題無くテーマの有効化(子テーマ)することができました。
注意点はPHPのバージョン確認くらい。
CocoonオフィシャルサイトよりCocoonテーマPHP推奨versionについて
私はサクラレンタルサーバのため、管理画面からバージョン確認をしました。
◼️SAKURAレンタルサーバでのPHPバージョン確認方法
- サーバコントロールパネルログイン
- 画面左下部「アプリケーションの設定/PHP設定の編集」
3.PHPのバージョン選択/現在のバージョンを確認
Xeory BASE→Cocoonへテーマ変更により受けた3つの恩恵
- スピードが劇的に改善されました。
- 記事一覧も若干調整したい感はありますがカード式に進化w
- アドセンスの簡単設定
スピードについては上記画像と比較してみると一目瞭然でした。
PageSpeed Insights モバイル版
PageSpeed Insights PC版
モバイル版は27→51
パソコン版は72→92
モバイル版については有効化直後に測定した時に「70」と言う結果は出ましたが、プラグインの整理や初期設定等をした後の測定結果のためこれからも前後していくとは思いますがかなり改善されたと言って良いのでは無いでしょうか。
スピード向上するとそれだけみてくれる人が増える！と期待して良いと言うことですね！
「記事一覧」についてもヘッダーをクリックして頂くとTOPページから一覧をご確認頂けると思いますがちゃんとカード型になりましたよねw
やっぱりこっちの方がスクロールした時に見やすいし複数の記事をチェックできるのでメリットは大きい！
最後にアドセンスの設置方法ですね。合格したばかりということもあり「自動広告」設定のみで利用していましたが、自分で管理しているわけでは無いためしっくりきませんでした・・・。個別に設置もやる気しない(笑)
そんなめんどくさがりやな私にぴったりでした。Cocoonさんの記事を参考にさせて頂きましたが非常に簡単ですぐに表示確認もできたので一安心。
2019/5/10追記
google Adsense(グーグルアドセンス)を設定すると外部要素が増えるため、
Cocoonの爆速の恩恵も虚しく速度が低下してしまいます。
アドセンス広告を貼り付け過ぎても読み込みスピードが低下するためユーザーの離脱率が上がってしまう。無さ過ぎても収益が上がらないためバランス調整が必要ですね。
以前はAMP対応も試みましたがエラー祭りになりかけたので、
時間にゆとりのある時や別サイトを立ち上げた際等にチャレンジしたいと思います。
コメント