AMPページのカスタマイズ SNS,Analyticsコード,Adsenseなど

06/06

公開日：2017/06/06最終更新日：2017/07/27 000

iphone大好き主婦

amp-mobile

「AMP」に対応させると、モバイルでホームページを表示させた時に高速で表示できるということで、頑張って対応させたんだけど・・・
やはり簡易的なので、せっかく頑張ってカスタマイズしたテンプレート役に立たずって感じ

きちんと設定すれば、関連記事やSNSのアイコンも表示させられるのだけれど、なかなか勉強する時間がなくてそのままになってました

何とかいい方法はないものかと

通常版のモバイルページへ戻れるようにしました

プラグインのAMP

amp/templates/header-bar.php にコードを追加しました

</nav>の前に追加しました



<p>このページは高速表示用の簡易版ページなので表示が乱れる場合があります。</p>
<span class="amp-link"><a href="<?php echo get_permalink(); ?>">通常版モバイルページへ</a></span>
</nav>

ブログ名の下に追加されました

高速で表示させたいけど、通常のページも表示させたい
AMP対応で通常のページのようになるように頑張るよ！

日付も追加しました

プラグインのAMP

amp/templates/meta-time.php

コードを追加


<li>
<?php if (get_the_time('Ymd') < get_the_modified_time('Ymd')): ?>
公開日：<?php the_time('Y/m/d'); ?> → 更新：<time datetime="<?php the_modified_time('c'); ?>"><?php the_modified_time('Y/m/d'); ?></time>
<?php else: ?>
公開日：<time datetime="<?php the_time('c'); ?>"><?php the_time('Y/m/d'); ?></time>
<?php endif; ?>
</li>

SNSのアイコンも表示

プラグインのAMP

amp/templates/single.php

headに追加
<!-- share button -->
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<!-- share button end-->



表示させたいところに追加


<!-- share button -->

<div class="amp-sns">

<!-- Twitter -->
<amp-social-share type="twitter"
        width="60"
        height="44"></amp-social-share>　

<!-- Google+ -->
<amp-social-share type="gplus"
        width="60"
        height="44"></amp-social-share>　

<!-- Facebook -->
<amp-social-share type="facebook"
        width="60"
        height="44"
        data-param-app_id="〇〇〇〇〇〇"></amp-social-share>　

<!-- はてな -->
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
<amp-img src="〇〇〇〇〇〇" width="44" height="44" alt="このエントリーをはてなブックマークに追加" layout="fixed"></amp-img></a>　

<!--LINE -->
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><amp-img src="〇〇〇〇〇〇" width="44" height="44" alt="LINEで送る" layout="fixed"></amp-img></a>　


</div>

<!-- share button end-->



〇〇〇〇〇〇のところは変更してください

次の記事や前の記事

<hr />
 <div id="prev_next">  
<?php
$prevpost = get_adjacent_post(false, '', true); //前の記事
$nextpost = get_adjacent_post(false, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<?php
 if ( $prevpost ) { //前の記事が存在しているとき
  echo '<a href="' . get_permalink($prevpost->ID) . '/amp" title="' . get_the_title($prevpost->ID) . '" id="prev" class="clearfix">
        <div id="prev_title">前の記事</div>
       
        <p>' . get_the_title($prevpost->ID) . '</p></a>';
 } else { //前の記事が存在しないとき
 echo  '<div id="prev_no"><a href="' .home_url('/'). '"><div id="prev_next_home"></div></a>
  		</div>';
 }
 if ( $nextpost ) { //次の記事が存在しているとき
  echo '<a href="' . get_permalink($nextpost->ID) . '/amp" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix">  
        <div id="next_title">次の記事</div>
      
		<p>'. get_the_title($nextpost->ID) . '</p></a>';
 } else { //次の記事が存在しないとき
 echo '<div id="next_no"><a href="' .home_url('/'). '">
 		<div id="prev_next_home">ホームへ</div></a>
 	</div>';
 }
?>
<?php } ?>
	</div>
<hr />

Analyticsのコード

headに追加
<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>


bodyに追加
<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-〇〇〇-〇"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Adsenseを追加

headに追加
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>


表示させたいところに追加
<div id="single_free_space3">
<amp-ad
layout="responsive"
width=300
height=400
type="adsense"
data-ad-client="ca-pub-〇〇〇〇"
data-ad-slot="〇〇〇〇">
</amp-ad>
</div>

レスポンシブだけど
width=300
height=400と入れてます　
ちゃんとレスポンシブになります

プラグインのテンプレートを直接編集するのでアップデートすると消えてしまいます
うっかりアップデートしちゃってもう一度設定やり直しました

プラグインのアップデートには注意してくださいね