WordPressのテーマCocoonで「コメントを書き込む」ボタンをクリックしてもコメント欄が表示されなくなってしまいました。
色々調べて解決できたので、その方法を紹介します。
設定状況
まず、ソフィーのコメント欄設定状況を説明します。
１．Cocoon設定
左側メニューの「Cocoon設定」をクリック
コメントタブをクリック
コメント入力欄表示「ボタンで表示切り替え」を選択
そうすると、ブログサイトでは下のように「コメントを書き込む」のボタンが表示されます。
これをクリックすると、下のようなコメント欄が出て来て書き込めるようになります。
以前はできていたのですが、突然、ボタンは表示されるもののクリックしても何も出てこなくなってしまったのです。
念のため、Cocoon設定の「投稿」タブも確認します。
下の方にスクロールすると「コメント設定」項目があり、「コメントを表示する」にチェックが入っています。
たぶんここは投稿されたあとのコメントのことだと思いますので、それ以前の状態にあっては、あまり関係ないかもしれません。
２．WordPressの設定 ディスカッション
次はWordPressの設定です。コメントは「ディスカッション」で設定します。
「新しい投稿へのコメントを許可」にチェックを入れています。
コメント欄が表示できなくなるまで
ソフィーは、サイト表示の高速化を目指しプラグインを使って作業を行いました。
どういうことを行ったかを説明します。
Pagespeed Insightsでページ読み込み分析を行う
Googleが提供しているPagespeed Insightsで分析したところ、モバイル25点、PC49点という、好ましくない点数でした。
何を改善すればよいかが提示されていたので、確認すると、画像の圧縮、レンダリングを妨げるリソースの除外、使用していないJavaScriptの削除が必要ということがわかりました。
これらの対処を自力で考えるのは不可能なので、様々なブロガーの皆さんのお知恵を拝借しました。
ですので、以下の対応については私が説明するより、参考にさせていただいたブログページをご覧いただきたいたほうがよいと思います。リンクをつけておきますので、ご参照ください。
画像の圧縮
最初、画像をブログにアップロードすることに気を取られ、圧縮することまでは気が回りませんでした。なので、ひとつの画像が1メガを超えるということもざらにある状態で10記事程度アップしました。それがPagespeed Insights低得点の大きな要因でした。
圧縮には色々なアプリを試しましたが、ソフィーはこちらが使いやすかったです。
Caesium
圧縮した写真画像は、WordPressのメディアに取り込み、1記事ずつ貼り付け直す作業が必要でしたが、まだ10記事程度だったので、大きな手間ではありませんでした。
それでも、元の画像を探し、圧縮、PCに保存、WordPressにアップロード、記事に張り付けという一連の作業に1時間以上はかかりました。
これからブログを作成する方には、ぜひとも同じ轍を踏まないよう注意いただければと思います。
ちなみに画像はUnsplashという著作権フリーの写真サイトを使わせていただいています。
海外のサイトなので、検索には英語のキーワードを使わなくてはいけませんが、美しい写真が多くとても気に入っています。
レンダリングを妨げるリソースの除外
これには、「ランドゥブログ」さんの『レンダリングを妨げるリソースの除外』が出来るプラグインを紹介で紹介されている、AutoptimizeとWP Fastest Cacheを導入しました。
これを導入することで、モバイル52点、PC75点 まで上がりました。
使用していないJavaScriptの削除
これには、「アフィリエイトのある暮らし」さんの「使用していない JavaScript の削除」をプラグインでなんとかするを参考にさせていただき、Flying Scripts by WP Speed Mattersを導入しました。
手順が詳しく解説されているので、その通りにやりました。
すると、モバイル99点、PC100点にまで改善することができました！
これで、速度の改善作業は完了です。
ちなみにソフィーが設定したのは以下のおとりで、100点の高得点は一番下の tFhBvPrftを追加して獲得できました。
recaptcha_en.js
show_ads_impl_fy2019.js
adsbygoogle.js
MLTF0EDRRT&l=dataLayer&cx
jquery.min.js?ver
gtag/js?id=UA-201
css/autoptimize
jquery-migrate.min.js?ver=1.4.1
ts307f.js?fadein
tFhBvPrft
ここでコメント欄がうまく作動しなくなった
上記の改善に満足し、サイトを確認していたら、コメント欄の書き込みができなくなっていることに気づきました。
ネットで検索しても、この解決方法については見つけることができませんでした。
コメント欄不具合の解決のためにやったこと
プラグインの無効化
Cocoonのフォーラムで質問しようとしたのですが、質問する前に以下のことを確認するようにとの記載がありました。
・プラグインをすべて停止してみましたか？
・ブラウザーのキャッシュ・Cookie を削除してみましたか？
・関連する WordPress の設定画面は確認しましたか？
これを読み、コメント欄の不具合が出る前には入れていなかったプラグインが原因かもしれないと思い至りました。
そこで、上記で導入したプラグインをひとつづつ無効にしてコメントの動作を確認することにしました。
最初、無効化には躊躇しました。なぜかというと、コメントの動作には関係ないことが確認できた後、再度有効化するときに、それまでに苦労して設定した項目を一からやり直す必要があると思ったからです。
でもそれは杞憂でした。一度無効化したプラグインの設定はそのまま残っていました。
Flying Scripts by WP Speed Matters が原因だった
・Autoptimize
・WP Fastest Cache
このふたつは無効化してもコメント欄の不具合は解消されなかったので、無関係と判断できました。
残るFlying Scripts by WP Speed Mattersを無効可したら、コメント欄が表示されるようになりました。
ただ、これは上記で説明したとおり、高速化のキーとなるプラグインなので、使わないわけにはいきません。
そこで、JavaScript読み飛ばし対象として設定したキーワードをひとつづつ除外して試してみました。
ソフィーは以下の設定をしていましたが、赤文字のjquery.min.js?verが不具合の原因と判明しましたので、それを除外することにしました。
除外してもページスピードは90点台が維持できているので、よしとしました。
recaptcha_en.js
show_ads_impl_fy2019.js
adsbygoogle.js
MLTF0EDRRT&l=dataLayer&cx
jquery.min.js?ver
gtag/js?id=UA-201
css/autoptimize
jquery-migrate.min.js?ver=1.4.1
ts307f.js?fadein
tFhBvPrft