WordPress で video タグを AMP に対応

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

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所video タグ
カスタマイズ方法PHP
テンプレート変更なし
コピペの可否100% 可能

このサイトは、 WordPress テーマの Simplicity を利用しています。

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>

Simplicity の場合

Simplicity の場合には、もっと効率的に読み込めます。

親テーマ の amp-header.php を子テーマにコピペ。

子テーマに設置した amp-header.php から、下記のコードを探します。

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

上記コードの下に、下記のコードを追加します。

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

投稿本文内に amp-video タグがある時だけ、 amp-video スクリプトが読み込まれます。

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" の値は、サイトに合わせてご変更ください。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする