【THE　THOR】AMPでvideoタグを最適化する方法

AMPでのエラー【タグ「video」を同等の「amp-video」タグに置き換えてください。】の解決方法を紹介します。

今回の記事内容は「THE　THOR」のテーマを使っている人向けの記事になっています。

他のテーマでも応用はできると思いますが、参考程度にしてもらえば、という感じです。

動画を記事に挿入するときに、ブロックタイプ「動画」を選ぶとvideoタグが付きます。

Gutenberg（ブロックエディタ ）を使う必要性は、クラシックエディタからブロックエディタへ移行するとデザインが崩れる対策で触れています。

関連記事

【グーテンベルク】クラシックエディタからブロックエディタへ移行するとデザインが崩れる対策【wordpress】

クラシックエディタの公式サポートは2021年12月31日までの予定なんだけど、なにか対策してる？ 旧エディタの人 そうなの！？対策というか、その情報さえしらなかったわ！ oh・[…]

しかし、このvideoタグはAMPページに対応させようとするとエラーが発生しちゃうんです。

おそらくこの記事にたどり着いたという事は、AMPエラーで困っているのではないでしょうか。

それではさっそく本題に入っていきましょう。

THE THORでスクリプトを読み込ませてamp-videoを使える様にする方法

amp-videoタグを使える様にするには、amp-video様の「javascript」というものを読み込ませる必要があります。

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

このコードをsingle-amp.phpにコピペすればOK。

それではsingle-amp.phpへのアクセス方法を紹介します。

wordpress管理画面から編集する方法

「外観」→「テーマエディター」→「THE THORを選ぶ^※１」→「single-amp.php」

このページの
「script async custom-template=”amp-mustache” src=”https://cdn.ampproject.org/v0/amp-mustache-0.2.js”」の下にコピペします。（3584行目くらいです）

FTPやサーバの機能を使って編集する方法

「public_html」→「あなたのドメイン^※２」→「wp-content」→「themes」→「the-thor」→「single-amp.php」

このパターンも同じで
このページの
「script async custom-template=”amp-mustache” src=”https://cdn.ampproject.org/v0/amp-mustache-0.2.js”」の下にコピペします。（3584行目くらいです）

これでスクリプトを読み込ませる作業は完了です。

THE THORでAMP用のamp-videoタグに置換する方法

サクッと解決方法を説明していきます。

$the_content = preg_replace('/<video(.*?)>/i', '<amp-video layout="responsive" $1></amp-video>', $the_content);
$the_content = preg_replace('/<video(.*?) \/>/i', '<amp-video layout="responsive" $1></amp-video>', $the_content);

このコードをconvert.phpにコピペするだけでOK。

それではconvert.phpへのアクセス方法を紹介していきます。

wordpress管理画面から編集する方法

「外観」→「テーマエディター」→「THE THORを選ぶ^※１」→「inc」→「amp」→「convert.php」

このページにコピペすればvideoタグをAMP用のamp-videoタグに置換してくれます。

※１：初期は子テーマの「THE THOR CHILD」が選択されているので、親テーマの「THE THOR」を選ぶ。

FTPやサーバの機能を使って編集する方法

「public_html」→「あなたのドメイン^※２」→「wp-content」→「themes」→「the-thor」→「inc」→「amp」→「convert.php」

このページにコピペすればvideoタグをAMP用のamp-videoタグに置換してくれます。

convert.phpを直接編集する。もしくは、1度ダウンロードしてから編集する。どちらでもOKです。

この作業でAMPページでは、「video」タグを「amp-video」に置き換える事が可能になりました。

amp-videoに置換できているか確認する方法

amp-videoへの置換作業がうまくいったかどうか確認しておきましょう。

>>AMP テストのページで、【確認したいページのURL + ?type=AMP】を付けて検索すると、AMPとして表示が可能かどうかを調べてくれます。

「?type=AMP」を付け加えずに検索しても、AMPページの結果へと誘導してくれます。

めんどくさければコピペで元のURLを貼り付けてしまいましょう。

ampvideo対策完了

AMPエラーは対処に時間がかかったりするし、５Gの通信が標準になってくると、『通常のページでも高速表示できるんじゃないの？』って疑問に感じる時もあるんです。

しかし、Googleが「AMPは重要だよ」と明言している以上、対応しておかない手はありません。

今回は以上になります。