wordpressのプラグイン「Speech bubble」。
長年使ってきたのですがページ表示速度に影響するのでやめようと思いました。
でもすでに「Speech bubble」のショートコードを書いてある記事が大量にある。
仮にページ表示速度が遅くならない吹き出しプラグインがあったとしても「Speech bubble」のショートコードで書いた部分を全部修正しなければいけない。
それは大変なので「Speech bubble」のショートコードで書いてある部分はそのままにしてプラグインは使わずにfunctions.phpにショートコード設定を直書きをしようと思います。
functions.phpにスクリプトを書いていく
functions.phpに直で次のようなスクリプトを書いていきます。
function hogeFunc( $atts, $content = null ) {
extract( shortcode_atts( array(
'color' => '#eeeeee',
'icon' => '/1.jpg',
'name' => '名前'
), $atts ) );
return '<div class="fukidashi">
<div class="icon">
<img src="' . content_url(). '/plugins/speech-bubble/img/'.$icon . '" alt="' . $name. '" />
<span>' . $name. '</span>
</div>
<div style="border-color:' . $color. ';background-color: ' . $color. ';" class="ball">
<p>' . $content . '</p>
</div>
</div>';
}
add_shortcode('speech_bubble', 'hogeFunc');
関数hogeFuncを定義して最後の行で「speech_bubble」というショートコードで動くように設定しています。
これでプラグインspeech bubble用に書いたショートコードがこの直書きしたスクリプトで動くようになります。
引数のcolorは吹き出しの背景色。
icon、nameはプラグインspeech bubbleと同じ役割です。
iconの画像はプラグインspeech bubbleのものを使う
プラグインspeech bubble用に書いたショートコードをそのまま使うのでicon画像はプラグインspeech bubbleのフォルダーにアップした画像へリンクさせます。
つまりプラグインspeech bubbleは「停止」にするんですが、「削除」にはしないでそのままにしておきます。
とにかくプラグインspeech bubble用に書いたショートコードをひとつも書き換えなくてもいいようにしました。
cssを当てる
子テーマのcssファイルに以下を追加します。
.fukidashi::after {
display: table;
clear: both;
content: '';
}
.fukidashi {
margin: 2em 0;
}
.fukidashi .ball {
display: inline-block;
position: relative;
padding: 15px;
margin-left: 1rem;
max-width: calc(100% - 6rem);
background-color: #eee;
border-color: #eee;
border-radius: 10px;
}
.fukidashi .ball::after {
right: 100%;
top: 30px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-right-color: inherit;
border-width: 10px 15px;
margin-top: -10px;
}
.fukidashi .icon {
float: left;
width: 5rem;
}
.fukidashi .icon > img {
max-width: 100%;
}
.fukidashi .icon > span {
display: block;
margin-top: 0.5rem;
text-align: center;
font-size: 0.9rem;
}
.fukidashi .ball > p{margin:0}
@media screen and (min-width: 769px) {
.fukidashi .ball {
margin-left: 10px;
max-width: calc(100% - 90px);
}
.fukidashi .icon {
width: 80px;
}
.fukidashi .icon > span {
font-size: 12px;
}
}
一応これで出来ました。
大雑把にやったのでプラグインspeech bubble用のショートコード↓
この中の引数type、subtypeは無視します。
新たな引数colorで吹き出しの色が変えられるだけです。
ただしすでに書いたショートコードは全部そのままにするので引数colorは付け加えません。
新たにショートコードを書くときに付けるかもしれません。
↓こちらの記事を参考にさせていただきました。
https://naoyu.net/not-speech-bubble-plugin/
まとめ
プラグインを使わずに吹き出しを付けてみた結果、結構ページ読み込み速度は早くなりました。
他の施策も色々やったので「pagespeedinsight」の点数が[モバイル=89][pc=98]になりました。
やってみるもんだ。
以上「Speech bubbleがページ読み込み速度を遅くするので自作してみた」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。