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