モバイルページでスライドショーが表示されないエラーを修正

モバイルページのスライドショーWP プラグイン
モバイルページのスライドショー

モバイルページとAMPページとPCのページのスライドショー

PC(Chrome)のページ

PCのスライドショー
PCのスライドショー

スライドショーは表示されています。

AMPページ

AMPページのスライドショー
AMPページのスライドショー

スライドショーは表示されています。

モバイルページ

モバイルページのスライドショー
モバイルページのスライドショー 表示されない
Advertisements

スライドショーは表示されていません。

デロッパーツールでエラーは出ていません。ただ、モバイルページでスライドショーが表示されていないだけです。

モバイルページはスライドショーやスライダーはNGなのか?

モバイルページのスライダー(Smart sliderで設置)

モバイルページのスライダー
モバイルページのスライダー

プラグインで設定しているスライダーは表示されています。

Advertisements

ブロックのスライダーはJetpack by WordPressによるもの

Jetpack by WordPress は様々な機能を追加してくれるプラグインです。実は Jetpack by WordPress を多用しています。

Jetpack by WordPress
Jetpack by WordPress

様々なウィジェットが利用できるようになります。

Jetpack by WordPress
Jetpack by WordPress

Async JavaScript と JetPack

  • Async JavaScript(非同期JavaScript)
  • JetPack

Async JavaScriptを停止することでモバイルページもスライドショーが表示されました。

「Async JavaScript」の「除外するプラグイン」にJetPackを入れても、エラーはなくなりませんでした。

cocoonの高速化→JavaScriptを縮小化するの設定

「JavaScriptを縮小化する」にチェックを入れ、「縮小化しない」に次の2つを入れます。

/wp-includes/js/dist
/wp-content/plugins/jetpack/

モバイルページでスライドショーが表示される

モバイルページのスライドショー
モバイルページのスライドショー

Async JavaScript 非同期とは?

ウェブページを快適に閲覧してもらうためには、Async JavaScriptを利用し高速化も重要ですが、非同期とはどういうことでしょうか?下のリンクに簡単に説明しています。

非同期処理と同期処理 Async JavaScriptとAutoptimizeの利用
Async JavaScriptとAut...
新しいタブで開く)
Advertisements
タイトルとURLをコピーしました