WordPress5.5や5.6にアップデートした場合、今まで動いていたjavascript,jQueryプラグインのスライダーが、うまく動かない場合があります。
Flexslider,bxSliderなどのフォーラムで、報告されています。
症状としてはローディングが終わらない、ページ送りをクリックしても反応しないなど。
数多くのsliderがプラグインなどで提供されているため、全部はあげませんが。問題がないものもあると思います。
Lazy-loadが原因？
いくつかの原因が考えられますが、一つに5.5から採用されたネイティブLazy-loadが原因の可能性があります。
このLazy-loadとは、ページ全体の画像を先に読むのでなくページの表示を先に行い、下の画像を遅延して順番に読み込むためユーザーがアクセスした際にファーストビューの表示が速くなりユーザービリティが向上するすぐれものです。
5.5からWordPress5はデフォルトでwidth 属性と height 属性があるimgタグに自動でloading="lazy"が追加されます。
などで、width 属性と height 属性がある画像にタグを追加します。
さて、ここで問題がおきます。
スライダーなどは、幅を設定したりするためにwidth 属性と height 属性を入れる場合があり、そこにもloading="lazy"が追加されてしまいます。
そして表示はされていないが、先にプリロードして幅はoverfloatのはみ出す部分を計算しようとしたりします。
ですが、読まれていないためスライドが動かなかったり、画像が読み込まれなかったりします。
上記のFlexslider,bxSliderなどの話がフォーラムで話されています。
Lazy-loadをオフに
もっとも簡単な解決方は、自動でloading="lazy"を追加するフィルターをオフにすることです。
以下の1行をfunctions.phpに追加します。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
コードを追加するのがスキルとして心配な方は以下のプラグインで、同じ機能です。
https://wordpress.org/plugins/disable-lazy-loading/
ただLazy Loadは有用な機能なので、スライドの問題をおこさずに使いたい場合は自動でタグをつけるものでなく、明示的にクラスやタグが付いたものをLazy Loadにするプラグインがありますので、そういうものを使うのもいいかもしれません。
