WordPress:authorページを一括リダイレクト
AMPの公式イメージ利用方法とガイドライン【画像ダウンロード】
【MAC】スクリーンショットの保存フォルダを変更・JPGファイルにする
MAMPでMySQLが起動しない時の解決方法
AMP化と一緒にHTTPSにすることにした:設定方法
@ 2016 fwary

AMPで各SNSの埋め込み画像を表示したい:WordPressクイックタグを使う

AMPで推奨されているソーシャルメディアの埋め込み設定をきれいに表示する方法です。WordPressでこれから新規投稿をすることを仮定し、テキストエディタにクイックボタンを設定します。インスタグラム、YouTube、ツイッターと、giphyというgifアニメ、フェイスブックなどにiframeを使用します。gettyimagesの参照についても書きました。

 

suponserd link


基本事項

AMPについては割愛します。
head内に、各SNSのAMPスクリプトを貼り付けます。


 
<script async src="https://cdn.ampproject.org/v0.js">
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
 

最初の一行でスクリプトを呼んでいます。AMPサイトを作っているなら既に書いてあると思います。
インスタ、YouTube、ツイッターと、gifアニメ用のamp-anim、フェイスブックなどにiframeを使っています。

 AMPの外部読み込み画像について

AMPサイトは参照する外部URLのimg画像(動画含む)の読み込み先がhttpsでないとエラーになります。
WordPressでアップロードしたimgファイルはhttpでもOKとなっていました。
 

WordPressのクイックボタンを使う

WordPressのテキストエディタで、タイトルと本文の間にあるボタンは追加することができます。これを使って埋め込み用のボタンを作ります。functions.phpに以下を追加します。

/////////////////////////////////////////////
//テキストエディタにクイックタグボタン追加
if ( !function_exists('add_quicktags_to_text_editor')):
function add_quicktags_to_text_editor(){
  if(wp_script_is('quicktags')){?>
    <script>
      QTags.addButton('qt-youtube','youtube','<amp-youtube width="480" height="270" layout="responsive" data-videoid="ショートコード"></amp-youtube>','</amp-youtube>');
      QTags.addButton('qt-insta','insta','<amp-instagram data-shortcode="ショートコード" width="1" height="1" layout="responsive"></amp-instagram>','</amp-instagram>');
      QTags.addButton('qt-giphy','giphy','<amp-iframe width="600" height="400" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://giphy.com/embed/ショートコード"></amp-iframe>','</amp-iframe>');
      QTags.addButton('qt-twitter','twitter','<amp-twitter width="375" height="472" layout="responsive" data-tweetid="ショートコード"></amp-twitter>','</amp-twitter>');
    </script>
  <?php
  }
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );
/////////////////////////////////////////////

投稿画面を更新するとボタンが増えていると思います。ボタンを1回押すと、閉じタグも一緒に挿入されるようにしてあります。それぞれ「ショートコード」の部分に「wl9atFDq2Dgk0」のようなショートコードを入れるとレスポンシブに埋め込み表示しれくれます。幅と高さは公式サンプルのままなので、うまく表示できなければ変更しても大丈夫だと思います。amp-iframeなどの中に、border=”0″などを入れるとエラーになり埋め込みが表示されないなど、これらの埋め込み用スクリプトは、AMP内での指定が厳しいので、公式のまま利用しています。
クイックボタンは<span class=”pink”></span>などを入れて、CSSでクラスを設定しておくと、毎回classと打たなくても、ピンクのマーカーで好きな場所に色をつけることができるので、便利です。

 

amp-animについて補足

Animation files should be loaded via HTTPS.
アニメーションファイルは、HTTPSじゃないとダメですよ。と公式に書いてありました。他にも、amp-iframeで参照するURLは、httpは使えないよとエラーになりました。
iframe関係の外部参照は、httpsでないといけないということのようです。
 
ただし、わたしが多用している「giphy」は以下の設定にすると表示できます。


< amp-iframe width="600"
  height="400"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  src="https://giphy.com/embed/ショートコード">
</amp-iframe>

幅、高さ、ショートコードの部分を参照したいgifに変更して使っています。giphyのサイトでURLをチェックするとgifのURLは、httpなのですが、上のコードでエラーにならずレスポンシブに表示してくれます。公式のサンプルに載っているものをそのまま利用しました。
  

gettyimagesはエラーになる

スポーツやニュースなどでgettyimagesの埋め込みをサイトに表示している場合、iframeを使っているので、amp-iframeを使えそうだと思ったのですが、gettyはhttpなので、エラーになりました。
 
Invalid <amp-iframe> src. Must start with https://. Found
gettyは、amp-iframeに入れるとhttpは使えないというエラーになり画像が表示されません。
 
iframeのままだと画像は表示されますが、AMPサイトエラーになってAMPページ扱いになりません。
なので、今のところgettyを表示するページはAMPを諦めるという選択にしています。gettyがhttps化するのを待つか、giphyのようにAMP対応するのを待つしかなさそうです。
gettyは、サッカーの試合のトップ記事などで使われるプロの現場写真が、埋め込みで利用できます。画像をダウンロードすることなく、ニュース記事の補足に写真を増やせるので便利です。英語サイトの方が使いやすいです。APIがあるのでうまく設定すればAMP表示できそうな気がしますが、調査中です。

sharing is caring