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

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

新規登録して質問してみよう
ただいま回答率
85.50%
AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

1回答

3008閲覧

wordpressテーマ「lionmedia」での自サイトブログ埋め込みのampエラーについて

satomi119

総合スコア6

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2018/02/10 18:16

前提・実現したいこと

現在lionmedia(amp対応)というテーマを使用してwordpressにてブログを運営しています。
自分のブログにある記事のURLを別記事に貼ると(iframeで埋め込まれます)
googlesearchconsole上のAMP欄にて
「security」「marginheight」「marginwidth」のエラーが出ます。
amp対応のテーマであるのに、自身のブログ記事の埋め込みでエラー表示が出る点が謎です。
当該ソースのエラー箇所を削除してしまうのは私でも可能ですが、
今後全ての記事にその作業をするのも手間ですし、そもそも削除していい項目なのかどうか分かりません。
もし、削除してもいいものならば、今後自動的に削除する方法を教えていただきたいです。

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

エラーメッセージ 属性「marginheight」はタグ「amp-iframe」で使用できません。 属性「marginwidth」はタグ「amp-iframe」で使用できません。 タグ「amp-iframe」には拡張機能 JavaScript の「amp-iframe」が含まれている必要があります。 属性「security」はタグ「amp-iframe」で使用できません。 ### 該当のソースコード <amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://○○○/embed/#?secret=tYwsvjVVB6" data-secret="tYwsvjVVB6" width="600" height="338" title="&#8220;記事タイトル&#8221; &#8212; ブログタイトル" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></amp-iframe> ### 試したこと wordpressの投稿ページにある「ampページ用scriptの選択」にてiframeを選択 ### 補足情報(FW/ツールのバージョンなど) wordpressは最新です。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

原因は、security属性がIE専用なのと、marginwidth/heightはHTML5で廃止となっているからだと思います。AMP Validator で確認するのが良いと思います。
自動で削除したければ、fuction.phpにフィルターを書くのが手っ取り早いです。
そもそもその埋め込み方法をやめてしまうというのも手だと思いますが。

投稿2018/02/10 18:38

編集2018/02/10 18:42
Artz

総合スコア158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satomi119

2018/02/10 19:24

早速のご回答ありがとうございます。 なるほど、そういうことだったんですね・・・。自動削除のフィルターですが 他テーマで同じ不具合の対応をしているサイトを見て、見よう見まねで作ってみたんですが 実際にfunction.phpに書き込むとエラーが出てしまいます。 下記のような内容なんですが、どこが間違っているのでしょうか。 大変恐縮ですが、教えていただけると助かりますm(_ _)m ////////////////////////////////////////////////// //投稿本文をAMP用にコンテンツを変換する ////////////////////////////////////////////////// function my_amp(){ //AMPチェック $my_amp = false; if ( empty($_GET['amp']) ) { return false; } // ampパラメータ=1 & シングルページの時 if(is_single() && $_GET['amp'] === '1'){ $my_amp = true; } return $my_amp; } function convert_content_amp($the_content){ // 通常ページではコンテンツを置換しない if ( !my_amp() ) { return $the_content; }else { // Twitterをamp-twitterに置換する $pattern = '/<blockquote class="twitter-tweet".*?>.+?<a href="https://twitter.com/.*?/status/(.*?)">.+?</blockquote>/is'; $append = '<p><amp-twitter width=486 height=657 layout="responsive" data-tweetid="$1"></amp-twitter></p>'; $the_content = preg_replace($pattern, $append, $the_content); // Instagramをamp-instagramに置換する $pattern = '/<blockquote class="instagram-media".+?"https://www.instagram.com/p/(.+?)/".+?</blockquote>/is'; $append = '<amp-instagram layout="responsive" data-shortcode="$1" width="400" height="400" ></amp-instagram>'; $the_content = preg_replace($pattern, $append, $the_content); // YouTubeをamp-youtubeに置換する $pattern = '/<iframe[^>]+?src="https://www.youtube.com/embed/(.+?)(?feature=oembed)?".*?></iframe>/is'; $append = '<amp-youtube layout="responsive" data-videoid="$1" width="480" height="270"></amp-youtube>'; $the_content = preg_replace($pattern, $append, $the_content); // iframeをamp-iframeに置換する $pattern = '/<iframe/i'; $append = '<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"'; $the_content = preg_replace($pattern, $append, $the_content); $pattern = '/security="restricted"/'; $append = ''; $content = preg_replace($pattern, $append, $content); $pattern = '/marginwidth="0"/'; $append = ''; $content = preg_replace($pattern, $append, $content); $pattern = '/marginheight="0"/'; $append = ''; $content = preg_replace($pattern, $append, $content); $pattern = '/</iframe>/i'; $append = '</amp-iframe>'; $the_content = preg_replace($pattern, $append, $the_content); //C2A0文字コード(半角スペース)を通常の半角スペースに置換 $the_content = str_replace('\xc2\xa0', ' ', $the_content); //style属性を取り除く $the_content = preg_replace('/ +style=["][^"]*?["]/i', '', $the_content); $the_content = preg_replace('/ +style=[\'][^\']*?[\']/i', '', $the_content); //onclick属性を取り除く $the_content = preg_replace('/ +onclick=["][^"]*?["]/i', '', $the_content); $the_content = preg_replace('/ +onclick=[\'][^\']*?[\']/i', '', $the_content); //fontタグを取り除く $the_content = preg_replace('/<font[^>]+?>/i', '', $the_content); $the_content = preg_replace('/</font>/i', '', $the_content); //画像タグをAMP用に置換 $the_content = preg_replace('/<img/i', '<amp-img layout="responsive"', $the_content); //スクリプトを除去する $pattern = '/<script.+?</script>/is'; $append = ''; $the_content = preg_replace($pattern, $append, $the_content); return $the_content; } } add_filter('the_content','convert_content_amp', 999999999);
satomi119

2018/02/10 19:26

このコードの「// iframeをamp-iframeに置換する」の部分を自分なりに作ってみました・・・。 おそらくひどいコードだとは思いますが、よろしくお願いします・・・。
Artz

2018/02/11 02:35

$content = preg_replace($pattern, $append, $content); ↑この行で渡してる$contentってどこにも無くないですか? ※今後どんなエラーが出てるのか載せた方がいいと思います。 preg_replace()で属性削除する方法については結構質問が上がっているので探してみてください。(これとか↓) https://teratail.com/questions/101498 ここで動くコードをお伝えしても力が付かないので、既存の質問を参考に、もっと簡単な文字列の置換から練習してみるのをおすすめします。("hoge foo bar hoge"を"hoge bar hoge"にするなど) 加えて、$the_contentが何なのか、add_filterが何をしているかが分かればこの辺の処理は完全に理解できると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問