WordPressのテーマを「Simplicity 2」から「Cocoon」へと変更しました。

なぜテーマを変更したのか、変更に伴い行った詳しい設定内容やプラグイン、ブログの表示スピードの変化などを自分用にまとめておきます。

Simpliciy 2からCocoonへ。なぜテーマを変えたのか。

理由は至ってシンプルです。

ブログの表示速度が遅いから。

Simpliciy 2はキャッシュ系のプラグインと相性が悪いという話は聞いていて、今までに何度も高速化するために頑張ってきました。

【Simplicity】Wordpressを高速化を頑張った話

1週間ほど前の出来事。久しぶりにPageSpeed Insightsでブログの速度を調べてみました。すると17点。このままではSEOにも悪影響がと、Wordpressブログの表示読度の高速化に取り組みました。自分用の備忘録がてらその記録を書いておきます。

glamofgirls.com

2019.04.22

それについてはこちらの記事で書いていますが、CSSをいじったり、プラグインを色々試してみたり。

ネット上にある記事を片っ端から読んで、出来る限りのことは行ってきました。

それでも重いなあとは感じてましたが、それ以上の解決案も見つからずそのまま放置。

しかしつい先日、使用していたキャッシュプラグイン「WP Fastest Cache」からアップデートの通知が届き、アプデを行ったところ、ブログの表示が崩れてしまったんです。

正確には、スマホで見ているのにパソコン版が表示されていました。

その後すぐにGoogle Search Consoleから250を超えるエラーが届き、もうてんやわんや。

今までは問題無く使えていたのに。。。

プラグインを停止したところ、表示崩れはすぐに収まりました。

しかしキャッシュプラグインは使えなくなってしまいました。

その後使用していた画像の遅延読み込みのプラグイン「a3 Lazy Load」でも一部の画像が表示されない不具合が。

こちらのプラグインも停止することになり、更にブログが重くなってしまいました。

具体的にはPege Speed Insightsでのモバイルの点数が20点台になるまで…。

それ以外にも、毎月毎月Google アナリティクスの方から「サイトの速度に関する問題：成果の高いページの読み込み速度が低下しています」という通知が届いていました。

これはもう、なんとかするしかない。

しかしこれ以上Simpliciy 2の方で、私ができそうな高速化は思い浮かばず、テーマの変更をすることにしました。

新しいテーマに「Cocoon」を選んだ理由

私がテーマを選ぶ上での条件は、主に5つ。

・無料で使用できること
・ブログの表示が早いこと
・SEO対策ができること
・カスタマイズ、そして使い方が簡単なこと
・日本語対応

この条件で、おすすめのテーマを調べてみたところ見つかったのが「Cocoon」でした。

Simpliciy 2の同じ作者さんが作っていて、Simpliciy 2の新しいバージョン的な存在であること、初心者でも使いやすいものであることを知り、こちらに決めました。

デザインもシンプルで、Simpliciy 2より速くカスタマイズも簡単との話を聞き、もうこれしかない！と。

プレビュー画面もシンプルで使いやすそう。

早速親テーマ、子テーマをダウンロード、有効化し設定、カスタマイズへと乗り出しました。

Cocoonで行った設定、カスタマイズまとめ

ここからが大変なところ。

最初に使用していた海外のテーマから、Simpliciy 2に変更した時はかなり大変だった気がするのですが…。

あの時に比べて、Cocoonは比較的簡単に感じました。

自分がWordpressに慣れてきたのもあるのかもしれませんが。。。

初めてもう3年ぐらい経つもんなあ。早い。

Simpliciy 2では、Wordpressの管理画面の外観、カスタマイズから色々いじったり、CSSを書き加えたりと難しかった記憶があります。

その辺のカスタマイズが自由にできるのがSimpliciyの魅力だったりするのだと思いますが、CSSなどはさっぱり、パソコン自体使用してこなかった私には大変でした。

しかし、Cocoonをダウンロードしてみると…。

WordPressの管理画面に「Cocoon設定」というものが表示されるようになり、ほぼ全ての設定をここからできるようになってました。

色を付けたりするカスタマイズも、好きなスキンを選ぶことでボタン１つで可能に。

簡単になってる。。。

ありがたい〜！！

難しいことは何一つわからない私には本当にありがたいです。

スキンの種類も豊富で、まさに選びたい放題。

私は「Momoon（アクア）」を使わせて頂くことにしました。

水色を中心としたシンプルだけど可愛いデザイン。

ブログも見やすいし、邪魔なものがひとつもない感じです。

Cocoon設定で他に行ったこと

まずはページ全体の表示に関して。

正直デフォルトのままでも十分素敵で、特に変更しなければならないこともなさそう。

「全体」というところからは、サイト背景色のみグレーに変更しました。

「SEO」の部分では「日付の設定」から更新日のみを表示する設定に変更してみました。

ここは公開日、更新日どちらを表示すべきなのか、または表示しないべきなのか迷い中です。

SEO的にはどっちの方が正しいのかな…。

そして「アクセス解析・認証」。

ここはかなり重要な設定です。

Google アナリティクスのトラッキングIDの入力、そしてGoogle Search ConsoleのIDの入力を行いました。

更にGoogle自動広告もここから設定できます。

「その他のアクセス解析・認証コード設定」という欄の「ヘッド用コード」に自動広告のコードをコピペするだけ。

テーマエディターをいじらなくていいのは安心ですね。

前に一度、高速化のためにいじってWordpressの管理画面にすら入れなくなったことがあるので。。。

その時はエックスサーバーの方から修正できましたが、ほんと寿命が100年ぐらい縮む思いでした。怖かった…。

「インデックス」の「リスト設定」からは、カードタイプのところを「タイルカード2列」に変更しました。

「投稿」の部分はコメント設定でコメントを非表示に。

ここはなんというのか、色々絡まれたり暴言を吐かれたりするのが怖いので前のテーマでもOFFにしてました（笑）

次に「SNSシェア」と「SNSフォロー」の部分。

ここは結構変更しました。

まず、トップシェアボタンを非表示に。

シェアボタンはボトムのみ設定し、カラーは「ブランドカラー（白抜き）」変更。

シェア数の表示は無しにしました。

フォローボタンはTwitterとInstagramのみに。

feedly？とRSS？というボタンもあったのですが、これは全く聞いたことがなかったのでなしにしました。

大体行った設定はこれでおしまい。

ワンクリックで色々カスタマイズでき、プレビューで画面も確認できるのでスムーズに行うことができました。

分かりやすくてほんと感謝です。

特に気に入ったのが、モバイルの設定にある「フッターモバイルボタン」というところ。

記事のどこからでもメニューを開いたり、検索できたりするのがありがたい。めっちゃ便利です。

一度間違って消してしまい焦りましたが（笑）

モバイルメニューのところから再度設定し直すと、ちゃんと表示されました。よかった。

プラグインの削除、設定変更

新しいテーマに伴い、プラグインも整理することに。

私はプラグインを6つ削除し、合計16個まで減らしました。

プラグインが少ないほどブログの表示速度も速くなるらしいので、減らせるのはありがたい。

今回削除したプラグインはこちら。

・Autoptimize
・Category Order and Taxonomy Terms Order
・Speech bubble（ふきだし プラグイン）
・Speed Up – JavaScript To Footer
・Table of Contents Plus
・TypeSquare Webfonts for エックスサーバー

Cocoonと効果が重複するもの、使用する必要がなさそうなものは全て削除しました。

特に驚いたのが、プラグインを使用しなくても綺麗な目次を自動的に作ってくれること！！

すごい。天才。ありがとう。

キャッシュプラグイン「WP Fastest Cache」も、一応必要ないようですが、表示の速度が遅かったので設定だけ変更して残しておくことにしました。

具体的にはこんな感じに設定を変えました。

Cocoonには、CSSやHTMLを圧縮してくれる機能が備わっているみたいなので、そちらをオンにして他の物を補う形に。

これで今、使用しているプラグインは全部で16個になりました。

一応メモがてらこちらも書いておきます。

・a3 Lazy Load
・Akismet Anti-Spam（アンチスパム）
・Block Bad Queries（BBQ）
・Broken Link Checker
・Classic Editor

・EWWW Image Optimizer
・Google XML Sitemaps
・Really Simple SSL
・Siteguard WP Plugin
・Tableplus

・TinyMCE Advanced
・UpdraftPlus – Backup/Restore
・WebSub/PubSubHubbub
・Wordfence Security
・WP Fastest Cache

・WP Multibyte Patch

SSL化はプラグインがなくてもCocoonの方でできるみたいですが、やり方がよくわからなかったのでひとまず使用しているプラグインをそのまま残しておきました。

ウィジェットでの変更点

「外観」→「ウィジェット」での変更点。

ここは「投稿SNSボタン下」に2点だけ追加しておきました。

追加したのは「検索」と「人気記事」。

検索は下に「メニュー、ホーム、検索、トップ」という欄が表示されるので必要ないかな？と思ったのですが…。

あれはモバイルだけなんですね。

iPadやパソコンでは表示されないっぽいので、一応検索を追加しておきました。

そして「人気記事」。

これは表示したら重くなるかな？と思ったのですが（プラグインのPopular Postとかは重かったし…）、入れてみても変わらなさそうだったので追加しておきました。

表示数は5個、それをランキング表示にしました。

また重くなるようだったら考えます。

前はプロフィールとかも入れていたのですが、正直誰も読まないかなと思い今回は消しました。

消した分、ホームのところにちょっと自己紹介を追記しようかと思います。

大して書けることないんだけど…（笑）

WordPressブログのページ表示速度の変化

Cocoonなら「PageSpeed Insightsでモバイル90点台になれる！」という記事を目にしていたのですが…。

実際にトップページを分析してみると、このような結果に。

45点。

う〜ん。

正直、もうちょっと速くなると思ってました。

プラグインや広告を入れたりすることで遅くなるので、モバイルで高得点を出すのは難しいらしのですが、でも45点かあ…。

パソコンだと99点なのになあ。

まあ前の20点台よりはマシ…と思うべきなんだろうか。

でも赤だもんな…。

せめてオレンジぐらいはいって欲しかった…50点以上。

試しに私のブログの中で一番人気のある記事のURLも入れてみました。

【保存版】海外のかわいい女の子の名前は？意味＆英語のランキングも！

今回は「かわいい海外の女の子の名前」をご紹介していきます。名前は英語のものを中心に、ヨーロッパ方面からも集めてみました！意味や英語の読み方なども併せてお話ししていきますよ。更には人気の名前をランキング形式でもご紹介していきます～！

glamofgirls.com

2017.11.01

こちらの記事です。

すると…。

あれ？63点？

トップページより、記事の方が軽いのか…？

文字数は14000以上、画像も多く記事が長い分広告も増えているのに。むしろ重くなるのでは…？

もう1つ、違う記事を調べてみることに。

今度はこれ。

ヴィクトリアズシークレットで人気の香水13選！口コミもご紹介！

アメリカの人気ランジェリー&香水ブランド「ヴィクトリアズシークレット（Victoria's Secret）」、通称ヴィクシー。今回は「ヴィクトリアズシークレットで人気の香水13選」をご紹介します。香水の種類と香りの口コミもあわせてお話しますよ！

glamofgirls.com

2017.10.22

インスタグラムやカエレバなどを多く埋め込んでいる記事です。

これは重そう。

調べてみると…。

2、26。。。。。

困った。もう考えたくない。

記事によってかなり差がでてくるみたいなので、この辺はまた改めて高速化についてゆっくり調べて、改めて試して記事にまとめるか、ここに書き足すかしようと思います。

Cocoonへの変更に伴う新たな問題

Simpliciy 2からCocoonへの移動は、比較的にスムーズに行うことができました。

しかしやはり、いくつか問題も発生しました。

発生した問題と、解決方法をまとめておきます。

全てのブログのSEO設定が消えた

まずはこれ。

記事1つ1つにあるSEO設定です。

これがテーマを変更すると全て消えてしまいました。

これは本気で焦りました。。。

300以上ある記事、全て設定し直さなければならないのかと思うとゾッとします。

しかしこれは、Cocoonの設定がボタン1つで解決してくれました。

Cocoon設定から「その他」を開き、「Simpliciy設定」というところの「Simpliciyから投稿設定を引き継ぐ」にチェックを入れるだけ。

これだけで、全ての記事のSEO設定が元に戻りました。

凄すぎる…ありがとう…（涙）

ほんとCocoon、設定も簡単だしなんでもできるし有能すぎる。

一生ついていきます。

しかしこれ、前はSimpliciyを使用していて、姉妹的な存在のCocoonに移動したから良かったものの…。

もし全く違うテーマに変更していたら、300ある記事全部1つ1つ設定してまわらないといけないのだろうか。。。

恐ろしい。

Cocoon選んで正解でした…。

Pintrestの設定、埋め込みが消えた

これは私個人の問題ではあるのですが。

当ブログでは、結構頻繁にPintrestというサイトの、埋め込みを使用していました。

Pintrestの使用には、テーマのエディターの部分にタグを埋め込む必要があります。

これは1度だけで、1度テーマに埋め込めばそれからは埋め込みからコードをコピーすることで簡単に埋め込みができたのですが。。。

テーマの変更に従って、再度タグを埋め込む必要が出てきました。

これはそんなに難しくないので、すぐにできると思っていたのですが…。

この埋め込み、スマホやiPadからではできませんでした。

「埋め込む」というボタンが表示されないんですよね。

実は先日、使用していたパソコンか壊れてしまい、これからはiPadとキーボードで書くことになったんです。

前のテーマには、もうすでにタグが埋め込まれているので、今まで埋め込んできたタグは問題なく表示されていたのですが…。

（もちろん新しい埋め込みを作ることはできませんが）

テーマを変更したことにより、今まで埋め込んできた全ての投稿から、埋め込みの写真が消えてしまいました。

これは全部自動でインスタグラムなどの写真に変更したりするしかないので、結構大変でした。

パソコンがなくてもiPadとキーボードで問題なく記事は書けるので、新しいのを買う予定はないのですが、まさかこんなところに落とし穴があるとは思ってませんでした（笑）

カエレバの画像が表示されなくなった

これは前のテーマの時からあった問題なのですが…。

どうも最近、パソコンやiPad上で自分の記事を確認していると、カエレバの画像が表示されないことが多々ありました。

理由は分かりません。

スマホだと表示されたりしていたので、まあいいかと放置していたのですが、Cocoonに移行した後、スマホ上でも完全に表示されなくなってしまいました。

これは大問題。。。

しかしこれは、ワンクリックで簡単に解決することができました。

問題は画像遅延読み込みをするプラグイン「a3 Lazy Load」でした。

最初はいっそのこと削除してしまおうかなと思ったのですが（ちゃんと画像が読みこまれないことがちょくちょくあったので…）それをするとかなりPageSpeed Insights の点数が下がってしまったのでできず。

色々調べてみると、設定からあるボタンをOFFにするだけで解決するらしく、早速試してみた所すぐに成功しました。

まずはWordpress管理画面から設定、a3 Lazy Loadをクリックします。

「Lazy Load Images」という部分を開き、「Image in Content」という部分をOFFにします。

あとは下にスライドして「Save changes」で行った設定を保存するだけ。

【送料無料】スカルプD ボーテ ピュアフリーマスカラ | アンファー まつ毛美容液 ブラック ダークブラウン スカルプd マスカラ美容液 まつ育 お湯で落とせる 睫毛美容液 マツエク ロング ブラック 美容 フィルム スカルプボーテ 女性用

posted with カエレバ

楽天市場

Amazon

実際に貼ってみるとこの通り。

ちゃんと画像が表示されました！

これはテーマを変更したことによる問題なのかどうかちょっと分からないのですが、解決したので載せておきます。

しかしこのカエレバも、Cocoonのアフェリエイト設定から似たようなことができるっぽいのかな？？

こちらもちょっと難しかったので、ひとまずはこのままカエレバを使用していこうと思います。

また余裕ができたら調べてみようかな。

まとめ

今回は、WordpressのテーマをSimpliciy 2からCocoonに移動した経緯やそれに伴うプラグイン等の変更点、設定、問題点などをまとめさせて頂きました。

色々ありましたが、変更して良かったと思います。

期待していたほどブログの表示速度は上がらなかったのですが、カスタマイズなども簡単で、CSSなどに詳しくなくても使いやすいテーマでした。

これからはCocoonにお世話になっていこうと思います。

久しぶりに「PageSpeed Insights」でブログの速度スピードを調べてみました。

すると…。

じゅ、、、17点。おっふ。（笑）（いや笑い事じゃない）

前はもうちょっと点数高かったはずだけどな…。いつの間にこんなことになっちゃったんだろう。

このままではSEOにも悪影響が…と、慌ててWordPressブログの表示読度の高速化に取り組みました。

何をしたのか忘れそうなので、念のため自分用の備忘録がてらその記録を書いておきます。

元々行っていたWoedpressの高速化内容（Simplicity向け）

今まで私がこのブログに行っていた高速化はこちら。

・プラグイン「Autoptimize」の導入
・プラグイン「WP Fastest Cache」の導入
・プラグイン「EWWW Image Optimizer」の導入
・「Tiny PNG」又は「Compressor.io」での画像の圧縮
・「コピペ一発でSimplicityを高速化する方法」

（こちらURLを貼ろうとしたのですが、スマホではそのサイトを開けるのにパソコンと「サイトが表示できない」とエラーがでてしまったので止めておきます。リンクエラーのプラグインにひっかる可能性があるかなと。気になる方はググってみてください。）

これだけしてるのに、まだダメなのか…ということでプラグインやテーマ編集のスタイルシートとかをいじいじします。

WordPress、そしてSimplicityの表示速度高速化のためにやったこと

私のブログの表示速度が遅いことへの改善ポイントとしてPegeSpeed Insightsに言われたのは、

・レンダリングを妨げるリソースの除外
・CSSの最小化
・Javascriptの最小化
・オフスクリーン画像の遅延読み込み

でした。

その為プラグインの削除、導入、設定の見直しや、テーマ編集などを試しました。

結果はこちら。

「PageSpeed Insights」でのモバイル版の評価が17だったのが「58」に、パソコン版は80点台から「92」に。

「GTmetrix」での評価は、PageSpeedScoresが「B（85％）」、Yslow Scoreは「C（72％）」になりました。

いや頑張った。素人にしては十分だよ。満足満足。

今回は4つのことをWordpress、そしてSimplicityの表示速度の高速化為に行ったので1つずつ書いていきます。

１．不要なプラグインの削除

便利なプラグインも、多ければ多いほど重くなりWordpressブログの表示速度の妨げになるそう。

私は「Addquicktag」と「Pixbay images」を削除しました。

正直あまりPageSpeed Insightsの点数の変化は見られませんでしたが、あまり必要がなかったので消したままでいいかな。

結果的に今使っているプラグインの数は23個。

これって多いの？少ないの？分からん。

でもこれ以上は全部使っているし大事なプラグインだから消せないかな。

２．テーマ編集

「レンダリングを妨げるリソースの除外」とGoogle検索を行ったところ、ある記事がヒットしました。

WordPressの管理画面にログインし、Simplicityのテーマの編集から「テーマのための関数（functions.php）をクリック。

「以下にSimplicity子テーマ用の関数を書く」というところの下に追加のコードを記載するというものです。

似た記事を2つほど発見し、それぞれ試しましたが結果は大失敗。

Simplicityの高速化どころかブログは真っ白、Wordpressの管理画面にすら入れなくなったのです。

どうやらこの方法を試して同じ症状が起きた人げ結構いるみたいです。

そんな危険な方法書いて残しておくなよ、とブチギレました（笑）

結果的にエックスサーバーの方からfunctions.phpをいじってコードを消し元に戻せました。良かった…。

全く、ブログが消えてしまったと大変な目にあったよ。。。許さん。（おこ）

CSSが分からないこの前までティーンだったただの女子には、詳しい人が載せてくれてるやり方を見様見真似で試すしかないのに、その方法が間違ってるなんて…（涙）

片方の方は苦情が殺到し警告が記載されていたみたいだけど、最初の目次からやり方の方にとんだのでその警告も飛ばされたみたいなのよね。

いやちゃんと記事の一番最初とかやり方のところにも書いといてくれよ…。

もう一個似た方法が書かれていた所も同じ問題が起きましたが、それに関しては警告すらなかった。

戻せなかったらどうしてくれるんだ…。むー。

優しい方が写真付きで詳しく「エックスサーバー側でfunctions.phpを編集する方法」をのせていたので、それを参考になんとか復帰できました。

この人がいなかったら私のブログは無事天に召されてた。命の恩人だ…ありがとう。。。

３．Lazy Load等のプラグインの追加

あれ確か私「Lazy Load」は入れてたと思うのだけれど…。

何かの時に消しちゃったのかな？

ひとまずダウンロードして有効化をしてみました。

しかしなぜか多くの人がダウンロードしている、Wordpress高速化のため人気プラグインであるはずの「Lazy Load」が、私のブログでは全く効果を得られなかったんです。

調べてみると同じような方がいて、その方が紹介していたもう1つの画像遅延読み込みをしてくれるプラグイン「a3 Lazy Load」をダウンロード。

有効化してPageSpeed Insightsにかけてみたところ、こちらでは効果を得られました！

10ぐらい点数アップしたかな？

合格した監査の中に「オフスクリーン画像の遅延読み込み」が追加されましたよ！わーい！

もう1つ高速化プラグインを検索していた時に出てきた「Speed Up – JavaScript To Footer」というプラグインも追加してみました。

なんと「すぐにはいらないJavascriptをフッターに持っていき、サイトの読み込みをスムーズにしてくれる」のだとか！

うん、わからない！（笑）全く分からん！（白目）

PageSpeed Insightsの点数の変化は3ポイント程度でしたが、まあプラスにはなっているしこれを入れてブログの表示崩れなどの変化は見られないから残しとこうかな。

４．Autopmize設定の見直し

結果的にPageSpeed Insightsの評価を30ポイント以上あげ「レンダリングを妨げるリソースの除外」「CSSの最小化」「Javascriptの最小化」の3点をこれでクリアできました。

Autopmize最強（笑）すごい！

元々このプラグインはSimplicityを使っている方のブログで評価されていたので導入済みだったのですが、なぜか私のブログでは表示崩れが起きてしまっていたんですよね。

何度試してもダメで、理由も分からず…「Javascriptコードの最適化」と「CSSコードの最適化」のところのチェックを外して導入していました。

しかし今回、もう一度チェックを入れてみた所表示崩れを起こさずにちゃんと効果が得られたんです！まじか。

これだけ暗号のようなものを試行錯誤して、頭痛と闘いながら頑張ったのに「Autopmizeのプラグイン設定に2つチェックを入れる」だけで解決するのかい（笑）

何で前にダウンロードした時は表示崩れしたんだろう…？分からないけど解決したからまあいいか。

結果的に「Autopmize」と「a3 Lazy Load」がWordpressブログ（Simplicity）のサイト表示速度の高速化にかなり役立ってくれました。

PageSpeed Insightsの合格した監査の中の上位4つがこの2つのプラグインのお陰でクリアできました。

特に一番上は、これだけでプラス5秒ほどサイトを開く時の読み込み時間がかかってしまっていたようなので、解決できて良かったです。

モバイルの点数が58っていうのはどうなのかな、と思いましたが、モバイルは大体こんなものらしいのでよしということで。

自分でサイトを開く時の体感速度も速くなったのが嬉しいかな♪

あと残っている改善できる項目というのがこれ。

ひとまずは疲れたので放置…（笑）

また何かWordpress、そしてSimplicityの表示速度の高速化のために何かしたら追記で記載します。

2019/6/12　追記。

導入しているプラグイン「Wordpress Popular Posts」が重いとの噂なので、設定方法を見直してみました。これでさらに少しは高速化できたかな…？

設定方法も簡単で楽々でした♪

こちらも記事にしているので「Wordpress Popular Posts」の重さに悩んでいる方はよければ見てみてください～！

【Wordpress Popular Posts】重いと言われるプラグインを軽くしてみた！

人気の記事をランキング付きで表示してくれるプラグイン「Wordpress Popular Posts」。しかしこのプラグイン重いとのうわさが…。私自身これを入れて以降サイトが重くなったのを感じました。解決法を実施したので、備忘録がてらまとめておきます。

glamofgirls.com

2019.06.12