We use cookies to ensure that we give you the best experience on our website.

如何自定义WordPress AMP主题，添加Google Analytics（分析）和ADSENSE

Google AMP AKA加速移动页面HTML实施到网站非常重要，这是由于其SEO的好处。移动搜索结果中的AMP Ready HTML页面的负载速度比普通页面快得多。互联网已经充满了AMP：加速移动页面项目的文章和教程。 AMP是针对基于HTML的网站开发的，但是如果您是WordPress用户，请不要悲伤，因为WordPress插件目录中已经有大量的AMP插件。不同的开发人员为WordPress开发了AMP插件，以启用AMP Ready WordPress页面。要激活WordPress Bog的AMP主题，只需安装AMP：工具箱插件或AMP插件。

AMP插件为您的WordPress创建了一个简单或基本的页面，并删除了包括Google Adsense在内的所有精美主题功能。因此，今天在本教程中，我们将如何自定义AMP页面以启用Google Adsense功能。

笔记：如果您不想弄乱编码，只需要一个可以在AMP Ready WordPress博客中启用Google Adsense，Notification和其他主题功能的插件，请参阅本文：

在上述链接中，我们介绍了一个称为AMP工具箱WordPress插件的免费AMP插件，使您的AMP主题可以定制一个触摸自定义。

自定义WordPress AMP主题以启用Google Adsense和Google Analytics（分析）的步骤

在启动本教程之前，这里是我们要在此处更改的摘要：

  1. AMP页面标头背景颜色自定义
  2. 使用徽标更改或替换WordPress徽标
  3. 将自定义IPHP PHP模板文件添加到AMP的子文件夹
  4. 自定义站点标题
  5. 将页脚添加到AMP主题中
  6. 从AMP主题中删除页脚
  7. 从AMP主题中造型页脚
  8. 将Adsense代码添加到加速移动页面
  9. 将Google Analytic代码添加到WordPress AMP页面

现在，我们将启动本教程。请使用儿童主题作为您的主要主题。您可以将本教程直接实现到您的主要主题，但请确保在更新主题时，您将在本教程中创建和自定义的AMP文件夹。如果您使用的是子主题，则没有问题，因为您对主题的更新不会影响子主题文件夹。

步骤1：在WordPress中安装AMP插件，并在主题文件夹中创建一个称为AMP的文件夹。

步骤2：现在将style.php文件从AMP插件文件夹复制到您的主题或子主题文件夹。您将在插件 - > amp->模板文件夹下找到此文件。

步骤3：打开孩子主题的functions.php并在最后粘贴此代码。我要求在最后粘贴此代码，因为您可以轻松地记住您在哪里粘贴了代码。

add_filter( 'amp_post_template_file', 'amp_set_cutome_style_path', 10, 3 );  // Setting custom stylesheet 

function amp_set_cutome_style_path( $file, $type, $post ) {

if ( 'style' === $type ) {

    $file = dirname( __FILE__ ) . '/amp/style.php';

}
  return $file;
}

步骤4。转到儿童主题AMP文件夹 - > style.php->查找'nav.title-bar'属性，然后更改标头的背景颜色。保存。

步骤5。要使用徽标自定义默认的WordPress图标，在您的子主题的图像文件夹中，您会在WordPress-> wpcontent-> themes-> themes-> themes-> themes-> Themes->中找到您的主题文件夹并创建'images'文件夹下面。现在，将您的图标或徽标图像上传到该文件夹​​。然后，复制此过滤器并将其粘贴到您的子主题function.php文件中。

add_filter( 'amp_post_template_data', 'xyz_amp_set_custom_site_icon_url' ); //Changes site icon

function xyz_amp_set_custom_site_icon_url( $data ) {

    $data[ 'site_icon_url' ] = get_stylesheet_directory_uri().'/images/YOUR_FILE_NAME.jpg';

return $data;

}

步骤6：将自定义的PHP模板文件添加到“ AMP”文件夹中。

创建一个名为“ my-single.php”的新文件，然后将其添加到子主题“ amp'文件夹中将其粘贴到您创建的“ my-single.php”中。然后，将此过滤器复制到您的孩子主题的functions.php文件中。

add_filter( 'amp_post_template_file', 'set_my_amp_custom_template', 10, 3 ); //Setting custom template for amp page

function set_my_amp_custom_template( $file, $type, $post ) {

if ( 'single' === $type ) {

    $file = dirname( __FILE__ ) . '/amp/my-single.php';
}
  return $file;
}

如果您使用的是0.2并更新为amp 0.3，则替换以下行

   <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
   <?php $this->load_parts( array( 'style' ) ); ?>

使用这些代码，来自amp 0.3 single.php文件中的代码线。

       <style amp-custom>
               <?php $this->load_parts( array( 'style' ) ); ?>
               <?php do_action( 'amp_post_template_css', $this ); ?>
        </style>

步骤7：使用您的站点名称或徽标自定义站点标头，转到“ my -single.php” - >搜索<nav></nav>在这些标签之间的标签位于<body>标签，您将在这些标签之间看到此代码。

    <?php echo esc_html( $this->get( 'blog_name' ) ); ?>
用此代码替换代码：
  <?php if($this->get( 'blog_name' ) ) : ?>

       <amp-img src="<?php echo get_stylesheet_directory_uri().'/images/YOUR_IMAGE_FILE_NAME.png ';?>"  width="187" height="60" ></amp-img>

  <?php else: ?>

       <?php echo esc_html( $this->get( 'blog_name' ) ); ?>

  <?php endif;?>

步骤8：添加页脚

粘贴这件代码之间<nav></nav>在amp-> my-single.php中标记并将其用作页脚，根据您的要求进行更改。

<footer class="title-bar" >
<div>
  <a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
   <?php if($this->get( 'blog_name' ) ) : ?>
       <amp-img src="<?php echo get_stylesheet_directory_uri().'/images/YOUR_IMAGE_NAME.png";?>"  width="187" height="60" ></amp-img>
   <?php else: ?>
       <?php echo esc_html( $this->get( 'blog_name' ) ); ?>
   <?php endif;?>
  </a>
</div>
</footer>

将此代码粘贴在my-single.php中的这条PHP代码之上。

   <?php do_action( 'amp_post_template_footer', $this ); ?>

转到您的孩子主题文件夹 - > amp->样式。

/*填充底：100px; */

转到 - >儿童主题 - > amp-> style.php。找出 / *titlebar * /或页脚，并添加以下更改。要更改颜色更改背景值。

/* FOOTER */
footer.title-bar {
  background: #33363b /*#0a89c0*/ ;
  padding: 0 16px;
  margin-top:20px;
  align-items: baseline;
  display: block;
}

footer.title-bar div {
  line-height: 50px;
  padding:10px;
  color: #fff;
}

footer.title-bar a {
  color: #fff;
  text-decoration: none;
}
/* FOOTER END*/

将Adsense添加到AMP主题

只需复制并粘贴到下面的核心<div class=”content”>在“放大器”主题文件夹的mysingle.php中标记

<!--ADSENSE AD SLOT-->
   <div id="ad1">
   <amp-ad  width=336 height=280
     type="adsense"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXX">
   </amp-ad>
   </div><div class="clear"></div>
<!--ADSENSE AD SLOT-->

为了在页脚上方和内容下方显示Adsense AD，只需复制相同的代码并立即将其粘贴在此代码之下

   <?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>

这也意味着立即在关闭之上</div>标签内容。

并更换xxxxx和ca-pub-xxxxxxxxxxxxxxxxx

将Google Analytic代码添加到WordPress AMP页面。

要获取您的AMP页面分析，只需复制下面的过滤器，然后将其粘贴到您的函数。

add_action( 'amp_post_template_head', 'amp_add_google_analytics' );  // Adding google Analytic script to head tag of Amp page

function  amp_add_google_analytics( $amp_template ) { ?>

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

<?php }

在下面添加上述代码副本后，并将其粘贴到My-single.php文件中<body>。

<amp-analytics type="googleanalytics" id="googleanalytics">
<script type="application/json">

{
"vars": {
  "account": "UA-XXXXXXXXX-2"
},

"triggers": {
 "track pageview": {
  "on": "visible",
  "request": "pageview"
},

"track anchor clicks": {
   "on": "click",
   "selector": "a",
   "request": "event",

"vars": {
  "eventId": "42",
   "eventLabel": "clicked on a link"
  }
},

"trackEvent": {
   "selector": "#event-test",
   "on": "click",
   "request": "event",

"vars": {
   "eventCategory": "ui-components",
   "eventAction": "click"
    }
  }
 }
}
</script>
</amp-analytics>

用您的分析代码ID替换此XXXXXXXXX-2。

我不需要完成所有手动编辑，您可以简单地使用称为AMP Toolbox插件的插件来添加和自定义AMP主题。此AMP插件不仅将AMP页面添加到WordPress中，还允许您使用Wordpress Admin仪表板添加Google Analytics（分析）代码和Goole Adsense。有关此插件的更多信息，您可以查看我们的文章：

另外，如果您是定制用于添加分析Google代码和Google Adsense的AMP WordPress主题的视频教程

Also Read