WING(Affinger5)でスライドショーのCSSとJavaScriptを削除する方法

アフィリエイト広告を利用しています

WING(Affinger5)でスライドショーのCSSとJavaScriptを削除する方法のアイキャッチ画像

WING(Affinger5)には、トップページにスライドショーを表示させる機能があります。

しかし、この機能を使っていなくても、スライドショー用のCSSとJavaScriptファイルが読み込まれてしまいます。

もしスライドショーを使っていないのであれば、このCSSとJavaScriptを読み込まないように設定するのがおすすめです。

バージョン・注意事項

WING(Affinger5)のバージョン: 20181120

テストは行なっていますが、何か問題が起きても責任は負いかねます。

自己責任でお願いいたします。

読み込まれているファイル

Affinger5では、スライドショー機能を実装するためにjQueryのプラグイン「slick.js」が使用されています。

slick.jsを利用するには、「slick.css」も一緒に使う必要があるので2つのファイルが読み込まれていることになります。

トップページに読み込まれているならまだしも、スライドショーがない記事ページにも読み込まれているのがちょっとアレですね…。

設定を確認する

「AFFINGER 5管理」→「ヘッダー」で設定を見てください。

上の画像のように、スライドショー機能を使っていない人はこのカスタマイズが有効です。

スライドショーを表示させている人は、このカスタマイズを行わないでください

functions.phpにコードを追加

子テーマの「functions.php」に以下のコードを追加します。

念のために、functions.phpのバックアップは取っておきましょう。

// スライダーのCSSを読み込まない設定
function deregister_styles_slick() {
  wp_deregister_style( 'slick' );
  wp_register_style( 'slick', '' );

  wp_deregister_style( 'slick-theme' );
  wp_register_style( 'slick-theme', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_slick' );

// スライダーのJavaScriptを読み込まない設定
function deregister_script_slick() {
  wp_deregister_script( 'slick' );
  wp_register_script( 'slick', '' );
}
add_action( 'wp_print_scripts', 'deregister_script_slick' );

PageSpeed Insightsの点数

PageSpeed Insightsの点数はどれくらい改善されたのかを確認してみましょう。

こちらがBefore

お次がAfter

お、4点も上がりました。

逆に言うと、スライドショーを表示させるために4点犠牲にするということです。

それが多いのか少ないのかは、ご自身で判断してください。

 

他にもこんなカスタマイズ記事があります。

WING(Affinger5)で不要なWEBフォントを読み込ませないようにする方法 | SHIROMAG

WING(Affinger5)でFont Awesomeアイコンを遅延読み込みさせて高速化 | SHIROMAG