間違った＾＾；

添付ファイルは、サイドバーを開いて画像が表示されてない様子です。

確かに…。
上の方は表示されるのですが、ファーストビューに表示されない部分には、Lazy Loadが働いていない感じですね。
Chrome、Firefoxでも再現するようです。
けどこれは…、どうやって対応すればいいんだろう…。

というか、この返信を書いたあと、ちょっと動かしたら表示されました…。
でも、表示が遅すぎて、意味がない…。どうすればいいんだろう…。

しばらく待って動かしたら、表示された状態。

この状態は私もハマったことがあります。私と同じ状況なら、画像の AMP キャッシュが生成されていない状態のはずです。

たぶん amp-sidebar を使わないとダメな気がします。 amp-sidebar は amp-img  をサポートしているので、隠れている画像でも AMP キャッシュが生成されます。

私の記事で申し訳ないですが、 amp-sidebar で WordPress の AMP ページにスライドモバイルメニューを設置で amp-sidebar の簡単な説明をしています。

記事ではナビを設置していますが、これをサイドバーに変更すればいける気がします。 amp-sidebar は、左から右、右から左のどちらからでもスライドインが可能です。

ありがとうございます！

ちょっと明日じっくり読んでみます。

Akiraさん、わいひらさん、ありがとうございます！body直下にamp-sidebar入れる縛りみたいですね…。すんなり出来そうなら良いですが…

宜しくお願いします。

amp-sidebar を試してみても、画像が完全に表示されませんでした。

途中まではきちんと表示されるのですが、途中から img タグがなくなっています。原因が分からないです。

一応やったことを書いておきます。とりあえずの試しなので、内容はかなりぐちゃぐちゃです。

まず、 amp-header.php で amp-sidebar スクリプトを読み込み。

次に amp-sidebar.php ファイルを新規作成し、下記のコードを追加。

<amp-sidebar id="sidebar-right" layout="nodisplay" side="right">
 

 
 

 

  ob_start();
 get_template_part('sidebar');
 $sidebar = ob_get_clean();
 //ドロワーメニュー用のサイドバーからIDを削除（IDの重複HTML5エラー対応）
 $sidebar = preg_replace('/ id="[^"]+?"/i', '', $sidebar);
 echo $sidebar;
 ?>
 

</amp-sidebar>

次に、 footer.php の 68 行目（//モバイルメニューボタンの上）に下記のコードを追加。

<?php if( is_amp() ) get_template_part( 'tmp/amp-sidebar' ); ?>

次に、 mobile-menu-buttons.php の 85 行目から 104 行目を下記のものに変更。

サイドバー全体が画面外に飛び出していたので、 CSS を若干変更。

で、ダメでした。

表示されていないコードは、 notepad.pw に貼り付けました。

https://notepad.pw/share/82jjql9hn

amp-sidebarのデモを見ても、画像を使用したものはないですね…。
https://ampbyexample.com/components/amp-sidebar/preview/

amp-sidebarを利用してもダメなら、サイドバーは利用できなくしたほうが良いのだろうか…。
何とかして、スクロールした時にAMPのLazy Loadが動作するようにしたいのですが、解析するにしても難易度が高そう。

amp-sidebar にすると、現在の Cocoon とは 1 つ違うところがあるんです。それが表示されていない画像に対して何かをすると、一気に画像が表示されること。

スマホの実機の場合には、表示されていない画像の部分をタップ長押しをすると、その画像も他の画像も表示されます。

デベロッパーツールの場合には、右クリックをすると画像が一気に出てきます。

こんな動作を見たことがなくて、混乱しています。

そんなおかしな動作をするんですね。

それにしても、amp-sidebarを使用しなくても、画面内にあれば隠れている所も表示されるのが謎。
それなら、サイドバーもスクロールしたら出して欲しい。

というか、今試したらサイドバーじゃなくて、背景側をスクロールさせたら、画像が出た。
スクロールイベントを、サイドバーにも欲しい。

https://wp-cocoon.com/0-7-2/?amp=1

このページのサイドバーは画像が小さいからか？私の環境ではAMPでもすべて読み込まれますね。

https://bibabosi-rizumu.com/cocoon-amp-twitter-iconfont/?amp=1

私のページではサイドバーに大きな画像がたくさんあるのも関係しているのか？、読み込みしきれないような印象などと思ったり？

本文・関連記事下にデフォルトでサイドバー非表示になったので久々にチェックしてみたんですが、読み込みに時間がかかり表示されない環境は必ずありそうですね。。

• Cocoon設定－モバイルタブで『スライドインボタン時コンテンツ下のサイドバーを表示』を選択して下のほうで見てもらう的な

ですが完全に読み込みが早くなった気がするんですが。気のせいでもないような…？分かりませんが？？

以前から、スライドインスサイドバーでも画面内に入りそうな部分は、表示されていたと思います。
ただ、スライドインサイドバーだけ、スクロールインした時に画像呼び出しトリガーが働かないのは相変わらずのようですね。
いまだに、ちょっと対処方法も分からないです。

例えば、添付画像のような縦長の環境だと、結構画像が画面近くに来るので、結構下のもの画像まで読み込まれます。

以前から、スライドインスサイドバーでも画面内に入りそうな部分は、表示されていたと思います。

ですね。それが昨日確認したとき、わいひらさんのCocoon（デフォルト：サイド：小さな画像の場合）ではほぼ全部表示され、私の大きな画像でも結構読み込まれて。※下までは読み込まなかった。

今確認すれば、そうでもないですね＾＾；

運よく爆速読み込めたのかもです。2か月のあいだに『何かが変わった』から？？？と思ったんですが。

完全に読み込みが早くなった気がするんですが。気のせいでもないような…？分かりませんが？？

残念ながら…気のせいだったのかも知れません。

私の環境でも（おそらく多くの環境で真っ白ではなく）aタグやテキストも表示されるので、（念のため）下に関連記事下にサイドを付けたまま、そっとしておきます＾＾

僕もまだ、AMPは不明な事だらけです^^;
対症療法、対症療法でここまでやっている感じ。