slickスライダーが表示されない原因
Cocoonのカルーセルをカスタマイズしてスマートフォンのトップページにだけ表示させていますが、たまたまWordPressにログインしない状態でサイトを見たらスライダーが表示されていませんでした。
いつからか、私にしかスライダーが表示されていなかったという事実。頑張ってカスタマイズしたスライダーなので、どうにか表示を復活させたいところです。
ブラウザの仕様変更
ChromeやSafariなどブラウザ側の仕様変更という情報がありましたが、私の場合はWordpressに管理者ログインしていれば表示されるので、直接的な因果関係は無さそうです。
Safariの上部に「このページが想定通りに表示されない場合、高度なプライバシー保護を緩和すると問題が解決する場合があります」と表示されることがありましたが、「保護を緩和」をクリックしてもスライダーは表示されませんでした。
テーマの仕様とコードの見直し
Cocoonのフォーラムでslick・カルーセル・スライダー関連の質問と回答をひと通りチェックしました。javascriptやPHPのコードを見直したり追加や削除をしたり、色々なパターンを試してみましたが改善しませんでした。
試行錯誤を繰り返しながらカスタマイズを続けてきたので、重複や無駄なコードもあるでしょうし、そういった完成度の低さが影響している可能性はあるかも知れません。
プラグインの影響
この「プラグインかもしれない」という思考に辿り着くまで3週間くらいかかっています。諦めてスライダーを削除しようとも考えていたところでした。
インストール済みプラグインの中でAutoptimizeを無効化した時にスライダーの表示が復活。更に切り分けをしところ、Autoptimizeが有効化の状態でも「(Javascriptを)連結しないで遅延」のチェックを外すとスライダーが表示されました。
上記の対応で改善したのは私のスキル不足か当サイトとの相性なので、殆どの方は参考にはならないと思いますが、まだプラグインを疑っていないのであればチェックする価値はあると思います。
除外設定
以下はAutoptimizeで除外設定したスクリプトやCSSですが、これらが初期設定なのか私が追加したのか覚えていません。自分用のメモというか見直しのために残しておきます。
◾️除外したスクリプト
wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js, js/jquery/jquery.min.js
◾️除外したCSS
wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css, admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/◾️遅延読み込みから除外
.eye-catch-image, .wp-post-image,title-logo-image,