mp3音声ファイルを添付したブログ記事でAMPページエラー

現在の Simplicity では、 audio タグが AMP に対応していないのが原因です。

わいひらさんがお作りになった Cocoon でも同様のお問い合わせがあり、 Cocoon の方では audio タグが AMP に対応しています。

なので、 Simplicity でも対応されるかもしれません。ちょっとお待ちになるといい気がします。

もし、今すぐにでも対応されたい場合には、親テーマの PHP ファイルを変更する必要があります。バラモスさんご自身で対応されるでしょうか？一応その対応方法はご説明できます。

Akiraさん、ご回答ありがとうございます。

なるほど、まだaudioタグは未対応なのですね。対応していると勘違いしておりました。（汗）

親テーマのPHPファイルの変更に関してですが、最近ブログを始めたばかりでそういった知識に関して未熟であるため、是非ともご教授願いたいと思います。よろしくお願いいたします。

audio タグを AMP に対応するためには、下記の 2 ステップのカスタマイズを行います。

●ステップ 1 ： amp-header.php を変更●

FTP ソフトやサーバーのファイルマネージャー機能などを使い、親テーマフォルダにある amp-header.php ファイルを子テーマにコピペをします。

子テーマに設置した amp-header.php ファイルを開き、 35 行目の下記のコードを探します。

'amp-iframe' => 'amp-iframe-0.1.js',

上記コードの下に改行を入れ、新たな 36 行目に下記のコードを追加します。

'amp-audio' => 'amp-audio-0.1.js',

●ステップ 2 ： function.php にコードを追加●

次に子テーマの function.php に、下記のコードを追加します。

add_filter( 'the_content', function( $the_content ) {
    // audioをamp-amp-audioに置換する
    $pattern     = '/<audio .+?src="([^"]+?)".+?<\/audio>/is';
    $append      = '<p><amp-audio src="$1"></amp-audio></p>';
    $the_content = preg_replace( $pattern, $append, $the_content );
  
    return $the_content;
    
}, 999999999 );

これでカスタマイズは終了です。

●注意事項●

通常ページと AMP ページとでは、音声プレイヤーの見た目が異なります。

通常ページでは、 WordPress 独自のプレイヤーが表示されます。それに対し AMP のプレイヤーは、ブラウザのスタイルです。

この違いは、どうしようもありません。

●親テーマが AMP で audio に対応した場合●

今後 Simplicity が、 AMP で audio に対応するかもしれません。

もし Simplicity が対応した時は、子テーマに設置した amp-header.php ファイルを削除、子テーマの function.php に追加したコードを削除すれば OK です。

カスタマイズを実行しGoogle Search Consoleでテストをしたところ、「有効なAMPページです」と表示され無事解決できました！

迅速かつ丁寧な回答に感謝いたします。また、注意事項やテーマがAMP-audioに対応した際の対処法についても大変参考になりました。
Akiraさん、本当にありがとうございました！

連続ですみません。どうやら早とちりをしてしまったようです。

解決したと思い問題となっていたページを開いてみると、PC版モバイル版共に音声プレイヤーが表示されないという不具合（？）が発生してしまいました。

正常に表示・再生させるためにはどういった対処をすればよろしいでしょうか？

申し訳ないです。音声プレイヤーが表示されないのは、通常ページですか？

子テーマの function.php に追加したコードを全て下記のコードに変更すると、通常ページでも AMP ページでも表示されます。

add_filter( 'the_content', function( $the_content ) {
    if( !is_amp() ) {
        return $the_content;
    }
    // audioをamp-audioに置換する
    $pattern     = '/<audio .+?src="([^"]+?)".+?<\/audio>/is';
    $append      = '<p><amp-audio src="$1"></amp-audio></p>';
    $the_content = preg_replace( $pattern, $append, $the_content );
  
    return $the_content;
    
}, 999999999 );

肝心なコードが抜けていました。

修正版の親テーマをインストールし、子テーマのamp-header.phpとfunction.phpに追加したコードを削除してテストをしたところ、今度こそAMPエラーも出ずmp3プレイヤーも正しく表示・再生ができるようになりました。

Akiraさん、わいひらさん、お付き合いいただき誠にありがとうございました！