WordPress で video タグを AMP に対応

WordPressでvideoタグをamp-videoに変換

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

WordPress テーマの Simplicity は、テーマ側で AMP に対応しています。

対応内容がかなりの充実ぶりで、利用者は簡単に AMP ページを生成できます。

ただ、 amp-video に対応していなかった…(現在はアップデートで対応済みです)。

このサイトでは、たまに下の動画のように video タグを使います。

「モバイルファーストのサムネイル画像ホバーエフェクト」より

このままでは AMP エラーが出るため、 amp-video に対応しました。

その方法をご紹介します。 WordPress であれば、テーマに関わらず対応可能です。

WordPress での動画の埋め込み方法

WordPress で動画を使うには、画像と同じくメディアに MP4 形式などの動画をアップロードします。

ただ、「メディアを追加」で動画を埋め込むと、 WordPress のショートコードが使われます。

このショートコードで埋め込んだ動画は、コントロール(再生・一時停止・音声の制御など)が下記の画像のように WordPress 独自のものに。

WordPress独自の動画コントロール

これは「 embed 機能」で埋め込んだ場合でも同様です。

WordPress 独自のコントロールは javascript と CSS で表現されています。一方、 AMP 対応の動画のコントロールは、ブラウザが自動的に表示するもの。

そのため、通常ページと AMP ページで、異なるコントロールになってしまいます。

サイトデザインでは、 1つのサイトに 1つのデザインが原則。

原則に従うために、 WordPress のショートコードや embed 機能は使わず、一般的な video タグで動画を埋め込みます。

<video controls preload="metadata">
    <source src="動画のURL">
</video>

controls 属性で、自動的にブラウザがコントロールを表示します。

また、 metadata を指定した preload 属性を使用することで、利便性とサイト速度を両立できます。

amp-video スクリプトの読み込み

一般的な video タグを AMP に対応させるために、まずは amp-video スクリプトを読み込みます。

AMP を生成するテンプレートの <head> 内に、以下のコードを追加します。

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

functions.php にコードを追加

あとは、 video タグを amp-video タグに置き換えると終わりです。

下記のコードを、 functions.php に追加します。

add_filter( 'the_content', function( $the_content ) {
    if( is_amp() === false ) {
        return $the_content;
    }
  
    $pattern     = '/<video/i';
    $append      = '<amp-video controls layout="responsive" width="640" height="360"';
    $the_content = preg_replace( $pattern, $append, $the_content );
    $pattern     = '/<\/video>/i';
    $append      = '</amp-video>';
    $the_content = preg_replace( $pattern, $append, $the_content );  
  
    return $the_content;
    
}, 999999999 );

AMP ページの投稿本文に video タグがあれば、 amp-video タグに置き換えます。

AMP であるかの判別には、 is_amp() を使っています。判別関数が異なる場合には、ご変更ください。

また、 width="640" height="360" のそれぞれの値は、サイトに合わせて変更します。

コードは「 WordPress の投稿本文を AMP 化する方法」の「 iframe を amp-iframe に置換する」部分を参考にしました。

ウィジェットを使う場合

投稿本文以外で video タグを使う場合には、上記のコードでは amp-video タグに置き換えされません。

サイドバーなどにウィジェットで video タグを使う場合には、下記のコードを functions.php に追加します。

add_filter( 'widget_text', function( $widget_text ) {
    if( is_amp() === false ) {
        return $widget_text;
    }
  
    $pattern     = '/<video/i';
    $append      = '<amp-video controls layout="responsive" width="640" height="360"';
    $widget_text = preg_replace( $pattern, $append, $widget_text );
    $pattern     = '/<\/video>/i';
    $append      = '</amp-video>';
    $widget_text = preg_replace( $pattern, $append, $widget_text );
  
    return $widget_text;
    
}, 999999999 );

ウィジェットにある video タグを、 amp-video タグに置き換えます。

width="640" height="360" の値は、サイトに合わせてご変更ください。