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

Simplicityの特徴 フォーラム 不具合報告 mp3音声ファイルを添付したブログ記事でAMPページエラー

このトピックには8件の返信が含まれ、2人の参加者がいます。4 日前 バラモス さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59704

    バラモス

    初めまして、バラモスと申します。お世話になります。

    現在Simplicity2子テーマ(ver.20161002)を使用させて頂いているのですが、タイトルの通りブログの記事にAMPページにエラーがあるとのことでGoogle Search Console Teamからメールが届きました。

    エラーメッセージは、
    ・有効なAMPページではありません
    ・無効なAMPページは、Google検索結果にAMP固有の機能が表示されません
    ・タグ「audio」はタグ「noscript」の子孫としてのみ使用できます。「amp-audio」ではありませんか?
    となっています。

    下書きの際はwordpressの「メディアを追加」ボタンからmp3ファイルを追加しています。

    また、AMP表示に関するプラグインは一切使用しておらず、テーマ側でAMP機能をオンにしています。

    ソースコードはこちらになります。
    <audio class="wp-audio-shortcode" id="audio-126-5" preload="none" controls="controls"><source type="audio/mpeg" src="https://gangun.net/wp-content/uploads/destroy1.mp3?_=5" /><a href="https://gangun.net/wp-content/uploads/destroy1.mp3">https://gangun.net/wp-content/uploads/destroy1.mp3</a></audio>

    使用環境は
    MacOS Sierra(ver.10.12.6)
    wordpress(ver.4.9)
    Simplicity2子テーマ(ver.20161002)
    Google Chrome(ver.65.0.3325.181)64bit
    です。

    色々調べたものの解決策がわからず困っております。

    お時間のある時で構いませんので、どうかよろしくお願い致します。

  • #59713

    Akira

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

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

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

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

  • #59714

    バラモス

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

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

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

  • #59715

    Akira

    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 です。

  • #59716

    バラモス

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

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

  • #59717

    バラモス

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

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

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

  • #59718

    Akira

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

    子テーマの 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 );

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

  • #59722
    わいひら
    わいひら
    キーマスター

    Akiraさんありがとうございます!

    Simplicityの方を、まだamp-audio に対応させていませんでした^^;

    修正したものを、以下にアップしておきました。
    https://wp-simplicity.com/wp-content/uploads/2018/04/simplicity2-1.zip

  • #59731

    バラモス

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

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

トピック「mp3音声ファイルを添付したブログ記事でAMPページエラー」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)