วิธีติดตั้ง WordPress & AMP: Accelerated Mobile Pages: Setup Analytics, AdSense, คู่มือโซเชียลมีเดียที่แนบมาด้วย

เผยแพร่แล้ว: 2016-09-25
setup-amp-and-wordpress-all-in-one-guide

มีข่าวลือมากมายเกี่ยวกับ Google AMP ในช่วงไม่กี่วันที่ผ่านมา Google ประกาศอย่างเป็นทางการว่ารองรับหน้า AMP ซึ่งเป็นส่วนหนึ่งของหน้า Mobile Search มันน่าสนใจจริงๆ จนถึงตอนนี้ ฉันหลีกเลี่ยงการใช้ AMP บน Crunchify ด้วยเหตุผลบางประการและไม่เคยรู้สึกถึงความสำคัญใด ๆ กับมันเลย

แต่หลังจากดูทวีตของ Barry ฉันก็ตัดสินใจ AMPlify Crunchify ด้วย

คุณกำลังมองหาเคล็ดลับ AMP และ wordpress อยู่หรือไม่? คุณต้องการ AMP ขึ้นไซต์ WordPress ของคุณด้วย Accelerated Mobile Pages ของ Google หรือไม่? หรือคุณต้องการติดตั้ง AMP ใน WordPress? ในบทช่วยสอนนี้ เราจะอธิบายขั้นตอนเกี่ยวกับวิธีการ AMPlify ไซต์ WordPress ของคุณด้วยขั้นตอนโดยละเอียดทั้งหมด

Accelerated Mobile Pages (AMP) คืออะไร

โปรเจ็กต์ Accelerated Mobile Pages (AMP) เป็นโปรเจ็กต์โอเพนซอร์สที่สร้างขึ้นโดยคำนึงถึงความเร็ว ซึ่งจะสร้างเนื้อหาที่ปรับให้เหมาะกับอุปกรณ์เคลื่อนที่เพียงครั้งเดียวและโหลดได้ทันทีทุกที่ ไม่มีการโหลด JavaScript เลยในหน้า มีการโหลด CSS น้อยมากโดยมีข้อจำกัดที่เข้มงวด หนึ่งในข้อสังเกตที่ฉันสังเกตเห็นว่าคุณไม่สามารถใช้ !important ใน CSS ได้ด้วยซ้ำ

มีคำถามด้านล่างหรือไม่?

  • Google AMP: มันคืออะไรและเหมาะกับเว็บไซต์ WordPress ของคุณหรือไม่
  • วิธีที่ดีที่สุดในการตั้งค่า WordPress สำหรับ AMP
  • วิธีเริ่มต้นด้วยหน้า Google AMP และ WordPress
  • ปลั๊กอิน wordpress หน้ามือถือแบบเร่ง
  • หน้าแอมป์ WordPress
  • Yoast amp กาวและคำค้นหา wordpress

มาเริ่มกันเลย: เปิดใช้งาน AMP สำหรับ WordPress Posts ของคุณ

ขั้นตอนที่ 1

ติดตั้งปลั๊กอิน AMP อย่างเป็นทางการ

ติดตั้ง-เป็นทางการ-แอมป์-ปลั๊กอิน-กระทืบ-เคล็ดลับ
  • เมื่อเปิดใช้งานคุณก็พร้อมแล้ว คุณจะไม่เห็นเมนูตัวเลือกใด ๆ
  • คุณต้องไปที่การ Settings -> เมนู Permalinks คลิก Save Changes โดยไม่ทำการเปลี่ยนแปลงใดๆ

ปลั๊กอิน AMP อย่างเป็นทางการมีฟังก์ชันพื้นฐาน และโพสต์ทั้งหมดของคุณจะเป็น AMPlify โดยอัตโนมัติ คุณสามารถไปที่โพสต์ในเวอร์ชัน AMPlified ได้โดยเพิ่ม /amp/ ต่อท้าย URL ของโพสต์

ลองดูตัวอย่าง:

  • URL ของโพสต์ Original : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • AMPlify โพสต์ URL: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

ขั้นตอนที่ 2

ติดตั้งปลั๊กอินกาวสำหรับ Yoast SEO & AMP ฉันเชื่อว่าเริ่มต้นเวอร์ชัน 0.4 AMP WordPress version คุณไม่จำเป็นต้องมีปลั๊กอินอื่นที่เกี่ยวข้องกับ AMP

ตอนนี้:

  • ไปที่ ลักษณะที่ Appearance -> AMP
  • ระบุสี Header และ Background แล้วคลิก Save
amp-wordpress-plugin-customization-option

ขั้นตอนที่ 3

ปัญหาเดียวที่ฉันเห็นกับปลั๊กอินนี้คือมันเพิ่มลิงก์ Powered by WordPress ที่ด้านล่างของหน้า ในการเปลี่ยนแปลงคุณอาจต้องเปลี่ยนหน้า footer.php ด้วยรหัสด้านล่าง

  • ไปที่ Plugins -> Editor
  • เลือกปลั๊กอิน AMP
  • เลือกไฟล์ amp/templates/ footer.php
1
2
3
4
5
6
7
8
9
< footer class = "amp-wp-footer" >
< div >
< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >
< p >
Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >
< / p >
< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >
< / div >
< / footer >

แก้ไขรหัสบรรทัดลิขสิทธิ์ตามความต้องการของคุณ

crunchify-amp-footer-and-social-sharing-buttons

ขั้นตอนที่ 4

เพิ่มไอคอน Analytics และ Social Media ในหน้า AMP

  1. ฟังก์ชัน crunchify_amp_add_analytics_social_ads_js จะเพิ่มการวิเคราะห์ที่จำเป็นและโค้ด javascript ของโซเชียลมีเดียไปยังหน้าแอมป์ของคุณ
  2. ฟังก์ชัน crunchify_amp_add_analytics_social_code จะเพิ่มโค้ดการวิเคราะห์และไอคอนโซเชียลมีเดียตามจริงของคุณ
  3. ตรวจสอบให้แน่ใจว่าคุณอัปเดต Google Analytics Universal tracking ID Facebook App ID ของคุณด้านล่าง
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id = $ amp_template - > get ( 'post_id' ) ;
? >
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>
<script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script>
<?php
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
function crunchify_amp_add_analytics_social_code ( $amp_template ) {
     $post_id = $amp_template - > get ( 'post_id' ) ;
     ?>
< amp - analytics type = "googleanalytics" id = "analytics1" >
<script type = "application/json" >
{
   "vars" : {
"account" : "UA-43876549-1"      // Modify universal tracking ID
   } ,
   "triggers" : {
"trackPageview" : {
   "on" : "visible" ,
   "request" : "pageview"
}
   }
}
</script>
< / amp - analytics >
 
   // Social Media Code
   < div align = "center" >
     < amp - social - share type = "twitter"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "gplus"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "facebook"
         width = "30"
         height = "30"
         data - param - app_id = "509582389234904" > < / amp - social - share >    // Modify your App ID
   < / div >
     < ? php
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

ขั้นตอนที่ -5

เพิ่มรหัส Google Adsense ในหน้า AMP ของคุณ ในกรณีของฉัน ฉันต้องการเพิ่มโค้ด Adsense 300x250 ด้านล่างรูปภาพเด่น ไม่มี hook อย่างเป็นทางการให้ใช้ ดังนั้นฉันจึงแก้ไขไฟล์ single.php ซึ่งอยู่ที่ <AMP Plugin directory>/ amp/templates/single.php

modified-amp-plugins-single-php-file
  • ไปที่เมนู Plugins
  • คลิก Editor
  • เลือกปลั๊กอิน AMP
  • ไปที่ไฟล์ single.php
  • เพิ่มโค้ด Adsense ตามที่แสดงในข้อมูลโค้ดด้านล่าง เพียง look for line featured-image และเพิ่มโค้ด Adsense หลังจากนั้น
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>
 
// Adsense code START
< br > < div align = "center" >
< amp - ad width = 300 height = 250
type = "adsense"
data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"
data - ad - slot = "0110036438" >
< div placeholder > < / div >
< div fallback > < / div >
< / amp - ad >
< / div >
// Adsense code END
 
< div class = "amp-wp-article-content" >

และคุณพร้อมแล้ว เพียงทำความสะอาดแคชของไซต์และดูหน้า AMP แบบสด คุณจะเห็นไอคอน Google Analytics, Adsense และโซเชียลมีเดียทั้งหมดทำงานอย่างถูกต้อง

ตอนนี้อะไร?

มาตรวจสอบและตรวจสอบหน้า AMP ของคุณสำหรับปัญหาต่างๆ กัน ไปที่ https://validator.ampproject.org/ และตรวจสอบผลลัพธ์

ampproject-validation-page-crunchify-tips

Google จะรวบรวมข้อมูลหน้าโพสต์ AMP อย่างไร

ตอนนี้คุณมีหน้าเว็บทั้ง AMP and non-AMP versions แล้ว ปลั๊กอิน AMP จะเพิ่มเมตาแท็กความสัมพันธ์ด้านล่างให้กับทั้งสองหน้าของคุณโดยอัตโนมัติ

ตรวจสอบสิ่งนี้ในหน้าที่ไม่ใช่ AMP

คุณควรเห็นการอ้างอิงของหน้าเวอร์ชัน AMP เพื่อให้ Google และแพลตฟอร์มอื่นๆ ทราบ:

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

ตรวจสอบสิ่งนี้ในหน้า AMP

คุณควรเห็นข้อความอ้างอิงเวอร์ชันบัญญัติที่ไม่ใช่ AMP

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonical-html-meta-tag-in-amp-page-crunchify-tips

ตอนนี้รอสองสามวันหรืออย่างน้อยหนึ่งสัปดาห์และคุณควรเห็นหน้า AMPlify ใน Google Search Console สำหรับฉันมันแค่ 4 วันและฉันเห็นว่าเกือบ 500 หน้าได้รับการจัดทำดัชนีแล้วสำหรับผลลัพธ์ AMP

wordpress-and-amp-setup-guide-by-crunchify-stats

วิธีตรวจสอบผลสด?

เพียงค้นหาโพสต์ใน Google บนเบราว์เซอร์มือถือ และคุณจะเห็น AMP result ในหน้าผลการค้นหา

crunchify-amp-result-in-google-mobile-search-page

นอกจากนี้ โปรดไปที่หน้านี้หรือบุ๊กมาร์กไว้ เนื่องจากฉันจะอัปเดตบทช่วยสอนนี้เป็นระยะๆ ตามการเรียนรู้ของฉัน บล็อกที่มีความสุขและช่วยเร่งความเร็วเน็ต