テーマはTwenty Nineteenで動作確認。
今回は、AMPページにだけタグマネージャーを導入したい
プラグインについては以下を参照
WordPressをAMP対応するプラグインの正式版 v1.0 が公開。統一されたデザインと機能のAMPページを実現(海外SEO情報ブログ)
以下のページが参考になりました。
Custom Shortcodes and Widgets
You can also use is_amp_endpoint() to output different markup for AMP and non-AMP pages, such as when you are using the paired mode. For example, a social sharing widget or shortcode might output the amp-social-share component on the AMP page:
Google翻訳:is_amp_endpoint()を使用して、ペアモードを使用している場合など、AMPページとそれ以外のページで異なるマークアップを出力することもできます。たとえば、ソーシャル共有ウィジェットまたはショートコードは、AMPページにamp-social-shareコンポーネントを出力します。
1.いつも通り表示したい箇所にfunctions.php
でwp_head
とwp_footer
のフックポイントを使用して、スクリプトを挿入。
function amp_add_script_head(){
?>
<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php
}
add_action('wp_head', 'amp_add_script_head');
function amp_add_script_footer() {
?>
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-●●●●●>m.url=SOURCE_URL" data-credentials="include"></amp-analytics>
<?php
}
add_action('wp_footer', 'amp_add_script_footer');
2.このままだと、AMPじゃない通常ページでも表示されてしまうので、is_amp_endpoint
の条件分岐で挟む。
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
function amp_add_script_head(){
?>
<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php
}
add_action('wp_head', 'amp_add_script_head');
function amp_add_script_footer() {
?>
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-●●●●●>m.url=SOURCE_URL" data-credentials="include"></amp-analytics>
<?php
}
add_action('wp_footer', 'amp_add_script_footer');
}
以上。