質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.65%

AMPプラグインを使用して、YouTube(ショートコード適用中)の埋め込みを実現したい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 421

chokkanteki

score 6

前提・実現したいこと

Wordpress(5.1.1)にてSANGOテーマ(https://saruwakakun.design/)を使用しています。
記事ページをAMPへ適用したく、AMPプラグイン(https://github.com/ampproject/amp-wp)を使用し、AMP化させましたが、ショートコードを使用しているYouTubeが表示されない状態となっています。

実現したいこと
ショートコードを使用時のYouTubeであっても、AMP-YouTubeに置き換えたい。

発生している問題・エラーメッセージ

正常にAMP-YouTubeに置き換わらない箇所

<div class="youtube">
<p><iframe width="680" height="383" src="https://www.youtube.com/embed/psuRGfAaju4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</div>

正常にAMP-YouTubeに置き換わる箇所

<p><iframe width="680" height="383" src="https://www.youtube.com/embed/psuRGfAaju4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>

試したこと

以下のサイトを参考に子テーマのfunctions.phpに以下の記述を加えましたが、変化はありませんでした。
https://qox.jp/blog/wordpress-amp/ https://ikisakianco.com/wordpress-amp

add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );

function xyz_amp_add_custom_actions() {
  add_filter( 'the_content', 'my_amp_custom_main_content' );
}

function my_amp_custom_main_content ( $content ) {
  // いろいろ削除
  $content = preg_replace(array(
  '/<script[^<]*?<\/script>/iu', // scriptを削除
  '/style="[^"]*?"/iu', // styleを削除
  '/border="[^"]*?"/iu', // borderを削除
  '/target="[^"]*?"/iu', // targetを削除
  '/onclick="[^"]*?"/iu', // onclickを削除
  '/scale="[^"]*?"/iu' // scaleを削除
  ), '', $content);

  // YouTubeをamp-youtubeに置換する(埋め込みコード)
  $pattern = '/<div class="youtube">\s<p><iframe[^>]+?youtube\.com\/embed\/(.+?)(\?[^>]+?)?"[^<]+?<\/iframe><\/p>\s<\/div>/iu';
  $replacement = '<amp-youtube layout="responsive" data-videoid="$1" width="560" height="315"></amp-youtube>';
  $content = preg_replace($pattern, $replacement, $content);

  return $content;
}

// AMPのscriptを制御
add_action( 'amp_post_template_data', 'my_amp_post_custom_add_script');
function my_amp_post_custom_add_script($data) {
$content = $data['post_amp_content'];
// YouTube
if (preg_match('/<amp-youtube[^<]*?<\/amp-youtube>/iu', $content)) {
$data['amp_component_scripts']['amp-youtube'] = 'https://cdn.ampproject.org/v0/amp-youtube-0.1.js';
}
// 全てのページで使うことが分かっている
$data['amp_component_scripts']['amp-carousel'] = 'https://cdn.ampproject.org/v0/amp-carousel-0.1.js';
$data['amp_component_scripts']['amp-ad'] = 'https://cdn.ampproject.org/v0/amp-ad-0.1.js';
return $data;
}

補足情報(FW/ツールのバージョンなど)

YouTubeのショートコードはレスポンシブ対応のために使用しています。
参考:https://kuni-o-niku.com/sango-youtube

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • m.ts10806

    2019/05/03 16:48

    >【Wordpress】
    タグにつけられるのでタイトルには不要と思います。

    キャンセル

  • chokkanteki

    2019/05/03 17:45

    こちら修正いたしました。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる