WordPressをAMPに対応させる方法
福田です。
日本語で書かれたAMPにGoogle AdSenseやGoogle Analyticsを対応させる方法が間違っていることが多かったので、ここではAMPプラグインのマニュアルにきちんと従って書いた対応方法をご紹介したいと思います。これを使えば、アップデートで書き直しになることがなく、楽です。
まずはAMPをインストールする
まずは、AMPをインストールします。
WordPressのプラグインディレクトリ(管理画面→プラグイン→新規追加)より、「AMP」と検索します。
すると、おそらく一番上に作者が「Automattic」のものになっているはずです。そしたらそれをインストールします。通常、インストールボタンを押せば一発でインストールできることが多いです。
AMPをカスタムするプラグインを作る
自作テーマであれば、functions.phpを操作するという手でもよかったのですが、今回はアップデートなどで元に戻されることを回避するために、また管理性の向上のためにも、あえてプラグインとして作ります。
方法は簡単です。まず、SFTPやSSHなどでフォルダや基本のファイルを作成し、またAMPプラグインのコンポーネントを一部コピーします。僕はSSHで作成しました。SSHで、なおかつドキュメントルートにいれば次のコマンドで作成できます。(sudoなどは必要に応じてつけてください)
mkdir -p wp-content/plugins/amp-custom
touch wp-content/plugins/amp-custom/amp-custom.php
cp wp-content/plugins/amp/templates/single.php wp-content/plugins/amp-custom/
わからない方向けに分かりやすく書きます。
まずはWordPressのディレクトリ(フォルダ)の中にwp-contentというフォルダがあると思います。
その中に、さらにpluginsというフォルダがあると思います。
pluginsの中に、amp-customというフォルダを作ってください。
その上で、amp-customフォルダの中に、amp-custom.phpというファイルを作成しておいてください。
また、その一つ上の階層にampというフォルダがあるので、その中のtemplatesフォルダからsingle.phpをコピーしておいてください。
そうしたら、今度はVimなり、テキストエディットなり、何らかしらの編集ソフトでプラグインを作っていきます。
メモ帳は推奨しません(wp-config.phpに書いてあります)。
プラグインを動作させるためには、まずはプラグインの名前が必要です。空っぽのamp-custom.phpに次の内容を先頭に書きます。
<?php
/*
Plugin Name: WP AMP Customizer
Plugin URI: https://otya.me/
Description: Just add Analytics and AdSense
Version: 1.0
Author: Fukuda Takuro
Author URI: https://otya.me/
*/
これで、WordPressのプラグイン画面から操作、編集ができるようになります。ですが、これはセキュリティ上お勧めしません。よってこのまま作っていきます。
アナリティクスを有効にしよう
アナリティクスをまずは有効にしてみましょう。
では、先ほどのファイルの下に
add_filter( 'amp_post_template_data', 'my_amp_post_template_data' );
function my_amp_post_template_data($data) {
if ( !current_user_can('manage_options') ) {
if ( !isset($data['amp_component_scripts']) ) {
$data['amp_component_scripts'] = array();
}
$data['amp_component_scripts']['amp-analytics']='https://cdn.ampproject.
org/v0/amp-analytics-0.1.js';
}
return $data;
}
add_action( 'amp_post_template_footer', 'my_amp_post_template_footer' );
function my_amp_post_template_footer($amp_template) {
if (!is_user_logged_in()) {
?>
<amp-analytics type="googleanalytics" id="ga">
<script type="application/json">
<?php
echo json_encode( array(
'vars' => array(
'account' => 'UA-XXXXXXXX-X',
),
'triggers' => array(
'trackPageview' => array(
'on' => 'visible',
'request' => 'pageview',
)
),
)
);
?>
</script>
</amp-analytics>
<?php } }
と追記します。UA-XXXXXXXX-XのXの部分は、置き換えてください。
これで、ログインユーザーのアクセスを除いたAMPへのアクセスがカウントできるようになります。
やっていることは簡単。ヘッダーにアナリティクスを有効にするためのスクリプトを追加し、フッターに設定を入れています。ですが、やたら長くなります。仕方ない。
AdSenseに対応させる
これは少し難しいです。プラグインのフォルダの中の、single.phpを開きます。
そして、次の内容をお好みの場所に挿入します。トップページに336×280広告を2つも突っ込むと鬱陶しいので、320×100の小さめのバナーをメインにしました。お好みで。
<div class="ads-adsense">
<p>スポンサード リンク</p>
<amp-ad width=320 height=100
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX">
</amp-ad>
</div>
<div class="clear">
</div>
data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX”と
data-ad-slot=”XXXXXXXXXX”はあなたのIDなどに書き換えてご利用ください。
これで広告は挿入できました。
ではこれを読み込むように設定しましょう。amp-custom.phpに次の内容を追記します。
add_filter( 'amp_post_template_file', 'set_my_amp_custom_template', 10, 3 );
function set_my_amp_custom_template( $file, $type, $post ) {
if ( 'single' === $type ) {
$file = dirname( __FILE__ ) . '/single.php';
}
return $file;
}
すると、カスタムしたsingle.phpが読み込まれます。アップデートがあった際は適宜反映してください。
CSSでさらにタイトルバーの色の設定もできます。タイトルバーを操作するには、amp-custom.phpに次の内容を追記します。background-color: の部分が要です。
add_action( 'amp_post_template_css', 'my_amp_my_additional_css_styles' );
function my_amp_my_additional_css_styles( $amp_template ) {
?>
body nav.amp-wp-title-bar {
background-color: #000;
}
<?php }
他は要素を見ればカスタマイズできます。
まとめ
カスタムした箇所をざっとリストアップしてみました。気に入った項目があれば使ってみてください。
この記事は最終編集から一年以上経過しております。この記事に書かれた内容をご利用・実践される際は十分ご注意ください。