ギャラリーをampで表示する方法

ギャラリーとは、投稿ページや固定ページの編集の「メディアを追加」にある「ギャラリーを作成」でしょうか？それとも、ギャラリーウィジェットのことでしょうか？

ampページでギャラリーを挿入したはずの部分

どのように挿入されましたか？

ギャラリーをampページで表示できるようにしたいのですが、可能でしょうか。

AMP エラーを出さないようにしなければなりません。現状の Simplicity では、間違いなく AMP エラーが出ます。

「メディアを追加」にある「ギャラリーを作成」であれば、エラーは回避できます。一方、ギャラリーウィジェットは、調べても私には方法が分かりませんでした。

テスト環境で試してみたら、ギャラリーウィジェットでも AMP エラーを回避する方法は見つけました。

ギャラリーとは、投稿ページや固定ページの編集の「メディアを追加」にある「ギャラリーを作成」でしょうか？それとも、ギャラリーウィジェットのことでしょうか？

紛らわしい書き方になっていてすみません。
投稿、固定ページの編集→メディアを追加→ギャラリーを作成の項目です。

どのように挿入されましたか？

挿入形式はスライドショーです。

挿入形式はスライドショーです。

スライドショーとは何でしょうか？

WordPress デフォルトでは、そのような機能はないように思えます。プラグインをお使いではありませんか？

スライドショーとの名前からして、おそらくスクリプトが使われています。 AMP では、 AMP 専用のスクリプト以外は一切使えません。

そのため、 Simplicity では、本文にスクリプトが使わている場合には全てまるごと削除します。なのでギャラリーが表示されていないと思います。

もしプラグインをお使いであれば、プラグインの AMP 対応まではアドバイスできません。

横から失礼します。

「メディアを追加」にある「ギャラリーを作成」であれば、エラーは回避できます。

とのことですが、
「タグ「style amp-custom」の親タグは「div」ですが、「head」のみ使用できます。」
となり
『有効なAMPページではありません』
となるんですが、なにかする必要があるんですか？

> あらくまさん

「ギャラリーを作成」を使うと、 style タグが挿入されます。これが AMP エラーの原因です。

エラーを取り除くためには、以下の 2 ステップのカスタマイズが必要です。

ステップ 1 ： amp.css に CSS を追加

まずは子テーマの amp.css に、 style タグで挿入される CSS を追加します。

ただし、 id で指定されているセレクタを、 class に変更する必要があります。 3 カラムだと gallery-columns-3 、 4 カラムだと gallery-columns-4 の class で指定します。

ステップ 2 ： style タグを削除

次に以下のコードを子テーマの function.php に追加し、 style タグを削除します。

function delete_style_tag( $the_content ) {
    if( is_amp() === false ) {
        return $the_content;
    }
    // styleタグを削除する
    $pattern     = '/<style.+?<\/style>/is';
    $append      = '';
    $the_content = preg_replace( $pattern, $append, $the_content );
  
    return $the_content;
    
}
add_filter( 'the_content', 'delete_style_tag', 999999999 );

私の環境では、これで「ギャラリーを作成」を AMP に対応できます。

>Akiraさん

スライドショーとは何でしょうか？

すみません。WordPressデフォルトの機能だと思っておりましたが、JetPackの機能のようです。

>Akiraさん

ありがとうございます！

さっそくカスタマイズしてみます！！

> 武田雄太さん

AMP でスライドショーを設置するには、 amp-lightbox-gallery か amp-carousel を使います。

ただ、私が JetPack を全く使っていないため、 JetPack のスライドショーを AMP に対応する方法が分かりません。

プラグインの仕様から把握しないといけないので、大変申し訳ないですが私ではお役に立てません。

> あらくまさん

「ギャラリーを作成」の CSS は、 float を使っています。

ギャラリーより下の部分のレイアウトが崩れてしまうので、以下の CSS も子テーマの amp.css に追加されてください。

.gallery:after {
  clear: both;
  content: '';
  display: block;
  height: 0;
  width: 0;
}

>Akiraさん

プラグインの仕様から把握しないといけないので、大変申し訳ないですが私ではお役に立てません。

いえ、とんでもないです。有り難うございました。