メルカリ招待コード：
今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。
その後もHTTPS everywhere（SSL化）などもありますが…。
はじめはニュースサイトなどでなければ特にAMP化（AMP対応）しなくてもいいのではないか？
なんて思ってもいました。
ですが、なんとなくしてみた方がいいのかもと思い始めてきました。ENJIさんが作成されているテーマのAFFINGER4が正式にAMP対応されたのもきっかけかもしれません。
WordPressであれなプラグインなどでAMP対応はできると思われますが、私個人的にできる限りプラグインは使いたくないのです。干渉してしまったりサイトが重くなったりしてしまうからです。
人気記事一覧
車のキーナンバー確認方法。キーレス紛失や壊れた時
148,470件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
105,311件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,469件の PV
Windows10でエラーコード0x800705b4の対処方法
67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
41,030件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
40,206件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
36,211件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
31,269件の PV
- 車のキーナンバー確認方法。キーレス紛失や壊れた時
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
- Windows10,Windows8.1プロダクトキー確認方法
- Windows10でエラーコード0x800705b4の対処方法
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
- スロットルポジションセンサー調整で不安定なアイドリング調整
- 車から異音の原因。カラカラ、カタカタ、コトコトなど…。
- Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
- ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
- カーメイトのエンジンスターターでエラー15表示と対処方法
具体的なプラグインを使用しないでAMP化する方法です。
ヘッダーに以下のコードを記載します。
<?php
//AMPチェック
$myAmp = false;
$string = $post->post_content;
// ampのパラメーターが1かつ記事の中に<script>タグが入っていない
// かつsingleページのみ$myAmpをtrueにする
if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
$myAmp = true;
}
?>
<?php if($myAmp): // AMP対応ページの場合 ?>
<html ?>
<head>
<?php else: // 通常ページの場合 ?>
<html lang="ja">
<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
<?php endif; // AMP分岐終了 ?>
<meta charset="utf-8">
<?php if($myAmp): // AMP対応ページの場合 ?>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<?php $canonical_url = get_permalink(); ?>
<link rel="canonical" href="<?php echo $canonical_url; ?>" />
<link rel="amphtml" href="<?php echo $canonical_url.'?amp=1'; ?>">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"<?php the_permalink(); ?>" // パーマリンクを取得
},
"headline": "<?php the_title();?>", // ページタイトルを取得
"image": {
"@type": "ImageObject",
"url": "<?php // アイキャッチ画像URLを取得
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
echo $image_url[0];
?>",
"height": 800,
"width": 800
},
"datePublished": "<?php the_time('Y/m/d') ?>", // 記事投稿時間
"dateModified": "<?php the_modified_date('Y/m/d') ?>", // 記事更新時間
"author": {
"@type": "Person",
"name": "<?php the_author_meta('nickname'); ?>" // 投稿者ニックネーム
},
"publisher": {
"@type": "Organization",
"name": "<?php bloginfo('name'); ?>", // サイト名
"logo": {
"@type": "ImageObject",
"url": "<?php bloginfo('template_url'); ?>/img/logo.png", // ロゴ画像
"width": 130,
"height": 53
}
},
"description": "<?php echo mb_substr(strip_tags($post-> post_content), 0, 60); ?>…" // 抜粋
}
</script>
<?php else: // 通常ページの場合 ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php endif; // AMP分岐終了 ?>
</head>
この時に注意なのが、元々あるheader.php内の<head>タグと重ならないようにどちらかを削除します。
あとは、以下のコードをfunction.phpに記述して変換します。
//AMP判別関数
//今回は、?amp=1パラメーターを使用（環境によっては変更する必要があるかも）
function is_amp(){
//AMPチェック
$is_amp = false;
if ( empty($_GET['amp']) ) {
return false;
}
//ampのパラメーターが1かつ投稿ページの
//かつsingleページのみ$is_ampをtrueにする
if(is_single() &&
$_GET['amp'] === '1'
){
$is_amp = true;
}
return $is_amp;
}
//AMP用にコンテンツを変換する
function convert_content_to_amp_sample($the_content){
if ( !is_amp() ) {
return $the_content;
}
//C2A0文字コード（UTF-8の半角スペース）を通常の半角スペースに置換
$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);
//target属性を取り除く
$the_content = preg_replace('/ +target=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ +target=[\'][^\']*?[\']/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);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
$the_content = preg_replace('/ src="https:\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 75vw, 75px" src="https://images-fe.ssl-images-amazon.com', $the_content);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する（SSL用）
$the_content = preg_replace('/ src="https:\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 75vw, 75px" src="https://images-fe.ssl-images-amazon.com', $the_content);
//カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
$the_content = preg_replace('/ src="https:\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 75vw, 75px" src="//thumbnail.image.rakuten.co.jp', $the_content);
//カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
$the_content = preg_replace('/ src="https:\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 75vw, 75px" src="https://item.shopping.c.yimg.jp', $the_content);
//画像タグをAMP用に置換
$the_content = preg_replace('/<img/i', '<amp-img', $the_content);
// Twitterをamp-twitterに置換する（埋め込みコード）
$pattern = '/<blockquote class="twitter-tweet".*?>.+?<a href="https:\/\/twitter.com\/.*?\/status\/(.*?)">.+?<\/blockquote>.*?<script async src="\/\/platform.twitter.com\/widgets.js" charset="utf-8"><\/script>/is';
$append = '<p><amp-twitter width=592 height=472 layout="responsive" data-tweetid="$1"></amp-twitter></p>';
$the_content = preg_replace($pattern, $append, $the_content);
// vineをamp-vineに置換する
$pattern = '/<iframe[^>]+?src="https:\/\/vine.co\/v\/(.+?)\/embed\/simple".+?><\/iframe>/is';
$append = '<p><amp-vine data-vineid="$1" width="592" height="592" layout="responsive"></amp-vine></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 = '<p><amp-instagram layout="responsive" data-shortcode="$1" width="592" height="592" ></amp-instagram></p>';
$the_content = preg_replace($pattern, $append, $the_content);
// YouTubeを置換する（埋め込みコード）
$pattern = '/<iframe.+?src="https:\/\/www.youtube.com\/embed\/(.+?)(\?feature=oembed)?".*?><\/iframe>/is';
$append = '<amp-youtube layout="responsive" data-videoid="$1" width="800" height="450"></amp-youtube>';
$the_content = preg_replace($pattern, $append, $the_content);
// iframeをamp-iframeに置換する
$pattern = '/<iframe/i';
$append = '<amp-iframe layout="responsive"';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/<\/iframe>/i';
$append = '</amp-iframe>';
$the_content = preg_replace($pattern, $append, $the_content);
//スクリプトを除去する
$pattern = '/<script.+?<\/script>/is';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
return $the_content;
}
add_filter('the_content','convert_content_to_amp_sample', 999999999);//なるべく後で行う
single.php内にもampか否かの判別するコードとwphead();から出力されるjsファイルなどを無効化しなればなりません。
ですが、
今のところfunction.phpに上記コードを記載してあるのでAMP用のスタイル.css（50KB以下）など作成しなくても、
とりあえずURLの末尾に/?amp=1を付けてEnterを押すかページの更新をするとエラーはあるもののなんちゃってAMP化できています。；
アドセンスは置換が難しいのでAMPと通常のページの条件分岐で対応してみています。
AMPの分岐条件コード
<?php if($myAmp): // AMP対応ページの場合 ?>
<amp-ad width="300" height="250" type="adsense"
data-ad-client="ca-pub-○○○○○○○○○○○○○○○○"
data-ad-slot="○○○○○○○○○○">
</amp-ad>
<?php else: // 通常ページの場合 ?>
（ここに通常のコードを記述）
<?php endif; // AMP分岐終了 ?>
あとは、TwitterやFacebookやYouTubeインスタグラムやなどのSNSの為に以下のコードを（も）ヘッダー内に書きます。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-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-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
<script custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async></script>
<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>
<?php endif; // AMP分岐終了 ?>上記は、
- Google Analytics。
- Facebook。
- YouTube。
- vine。
- Twitter。
- インスタグラム。
の共有ボタンなどを使用している場合です。
もっと少ない方は以下のコードのみでも良いかもしれません。
<script custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async></script>
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
TwitterとvineとインスタグラムとYouTubeのみのコードになります。
AMP対応の分岐条件分けのコードは以下になります。
<?php if($myAmp): // AMP対応ページの場合 ?>
AMP対応時のコード
<?php endif; // AMP分岐終了 ?>
<?php if(!$myAmp): // 通常ページの場合 ?>
通常のコード
<?php endif; // AMP分岐終了 ?>
<?php if($myAmp): // AMP対応ページの場合 ?>
AMP対応時のコード
<?php else: // 通常ページの場合 ?>
通常のコード
<?php endif; // AMP分岐終了 ?>
それぞれAMPファースト通常表示ファースト、最後のは以前からあるスマホ表示とPC表示の条件分岐条件コードと同じように、AMP対応の時の場合と通常表示の時の場合の２つの分岐条件を混ぜてひとつにしたものです。
それぞれを使用する場所などによって使い分けましょう。
自分が忘れないためのメモでもあります。
AMP対応できているかどうかの確認方法は、URLの末尾に?amp=1#development=1を付けてデバックモードでエラーの有無を確認してみます。
?amp=1#development=1
エラーがでた場合にはひとつひとつエラーを修正していくことになります。
ものすごく大変だしめんどくさいです。
そういった場合には最悪？（しょうがなく）プラグインに頼る方が楽ですし懸命かもしれません。
AMP対応プラグインには以下の２つがあります。
それぞれでCSSが異なるのかAMP対応後のページの表示のされ方が異なるようです。以上、プラグインを使わないでAMP対応する方法でした。
おそらく、まだまだ足りない不足していることもあると思います。
今後、自分が対応次第完全対応版に進化させていきたいと思っています。
※最後に言い忘れていましたが、ページのみをAMP対応する方法になります。
追記です。）
この記事を作成してからも完全にAMP化する対応方法を試行錯誤した結果・・・・。
以下に追加で新たに記事として作成していますので、 この長文の後できついかもしれませんが・・・・。
良かったら、是非、参考にして頂けましたら幸いです。
こちらの記事になります。
おすすめの記事一部広告
- 車のキーナンバー確認方法。キーレス紛失や壊れた時32
- カーメイトのエンジンスターターでエラー15表示と対処方法29
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法23
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ11
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく8
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)6
- 年賀状ソフトおすすめ筆王、筆まめ、筆ぐるめ最新版で年賀状作成6
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）5
- エクストレイル純正スピーカー交換方法とおすすめ社外スピーカー5
- 車のハンドルが重い時にできる対処方法4
おすすめ！！
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！
あなたにおすすめ
-
帯状疱疹かと思ったけれど蕁麻疹で治らない時にデルマクリン軟膏とアンテベート軟膏
以前に帯状疱疹かと思い皮膚科を受診しました。 そしたら、ちょっと診断まではつかないなぁ。ということでステロイド軟膏と神経障害性疼痛に処方されるリリカという薬が処方されました。 それから1ヶ月弱・・・・…
-
Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録
ページ表示速度高速化レンダリングブロックを非同期にしてみる。
ここ最近…。本当にサイトの高速化、サイトのページ表示速度を速くしなければ！！なんて思い過ぎている私です。 ない知識をフルに活用してみてはいるものの、うまくいったりいかなったり、トライ・アンド・エラーそ…
-
AFFINGER4Pro WordPress カスタマイズ 伝えたいこと 備忘録
AFFINGER4で初投稿とその機能豊富さを紹介しきれない…。
ふうε=(・ρ・*) フゥ、この度、やっとこさ～の思いでテーマをAFFINGER4に変更しました。 以前のSTINGER6で結構な割り合いでカスタマイズしまくっていたので、簡単にテーマの変更がなかなか…
「SNS, WordPress, インターネット, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
Total141
アクセスランキング
よろしかったらシェアよろしくお願いします。
コメントを閉じる
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
comment