Speech bubbleがページ読み込み速度を遅くするので自作してみた

people-hukidashi
wordpressのプラグイン「Speech bubble」。
長年使ってきたのですがページ表示速度に影響するのでやめようと思いました。

でもすでに「Speech bubble」のショートコードを書いてある記事が大量にある。
仮にページ表示速度が遅くならない吹き出しプラグインがあったとしても「Speech bubble」のショートコードで書いた部分を全部修正しなければいけない。

それは大変なので「Speech bubble」のショートコードで書いてある部分はそのままにしてプラグインは使わずにfunctions.phpにショートコード設定を直書きをしようと思います。

functions.phpにスクリプトを書いていく

functions.phpに直で次のようなスクリプトを書いていきます。

関数hogeFuncを定義して最後の行で「speech_bubble」というショートコードで動くように設定しています。

これでプラグインspeech bubble用に書いたショートコードがこの直書きしたスクリプトで動くようになります。

引数のcolorは吹き出しの背景色。

icon、nameはプラグインspeech bubbleと同じ役割です。

iconの画像はプラグインspeech bubbleのものを使う

プラグインspeech bubble用に書いたショートコードをそのまま使うのでicon画像はプラグインspeech bubbleのフォルダーにアップした画像へリンクさせます。

つまりプラグインspeech bubbleは「停止」にするんですが、「削除」にはしないでそのままにしておきます。

とにかくプラグインspeech bubble用に書いたショートコードをひとつも書き換えなくてもいいようにしました。

cssを当てる

子テーマのcssファイルに以下を追加します。

一応これで出来ました。

大雑把にやったのでプラグインspeech bubble用のショートコード↓

この中の引数type、subtypeは無視します。
新たな引数colorで吹き出しの色が変えられるだけです。

ただしすでに書いたショートコードは全部そのままにするので引数colorは付け加えません。

新たにショートコードを書くときに付けるかもしれません。

↓こちらの記事を参考にさせていただきました。

脱プラグイン!吹き出しで会話するショートコードを自作しよう【Wordpressカスタマイズ】 | ナオユネット
吹き出しチャット風の機能を、プラグインを使わずにWordpressに追加する方法を紹介。ショートコードで記事内の好きな場所で使えます。アイコンの変更や吹き出しのカラーのカスタマイズにも対応。

まとめ

プラグインを使わずに吹き出しを付けてみた結果、結構ページ読み込み速度は早くなりました。

他の施策も色々やったので「pagespeedinsight」の点数が[モバイル=89][pc=98]になりました。

やってみるもんだ。


以上「Speech bubbleがページ読み込み速度を遅くするので自作してみた」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。