LoginSignup
1
0

More than 5 years have passed since last update.

AMP for WordPress プラグインで Paired (ペア)モードにした時、AMPページだけにソースコードを入れたい場合

Posted at

テーマは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.phpwp_headwp_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-●●●●●&gtm.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-●●●●●&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>
    <?php
    }
    add_action('wp_footer', 'amp_add_script_footer');
}

以上。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0