วิธีทำให้ Wordpress ใช้ AMP ได้ + วิธีใส่โฆษณาในหน้า AMP

AMP คืออะไร

AMP หรือชื่อเต็มคือ Accelerated Mobile Pages เป็นมาตรฐานหน้าเว็บความเร็วสูงชนิดหนึ่ง ที่ประกาศใช้โดย Google เพื่อให้สามารถแสดงผลหน้าเว็บบนมือถือได้เร็วที่สุด โดยจะมีแท็กใหม่ๆที่ถูกประกาศออกมาโดย Google เอง และ HTML5 ปกติ เพื่อให้ได้ความเร็วสูงสุดในการเข้าถึงหน้าเว็บ โดยมีข้อกำหนดบางอย่างเพื่อให้หน้าเว็บเร็วขึ้น เช่น

การใช้รูปต้องมีการประกาศจองที่ว่ากว้างสูงเท่าไหร่ เพื่อให้ Browser จองที่ไว้ จะได้ไม่ต้องมีการ reflow บ่อยๆ
มีการบังคับว่าแท็ก script ทุกตัวต้องเป็น async เพื่อให้ผู้ใช้เห็นหน้าเว็บได้เลย ไม่ต้องรอโหลด script ก่อน
นอกจากนั้นหน้าเว็บ AMP จะจัดลำดับความสำคัญของการโหลดด้วยตัว AMP เอง เช่นบังคับให้โฆษณาโหลดหลังเนื้อหาเป็นต้น

เราจะใช้ AMP ได้อย่างไร

วิธีใช้ง่ายๆ

ก่อนอื่นเข้าไปดูข้อกำหนดต่างๆ ในเว็บของ AMP จากนั้นให้สร้างหน้าใหม่สำหรับเนื้อหาแต่ละหน้า โดยใช้ข้อกำหนดต่างๆในเว็บ AMP (มันมีเยอะ ผมไม่ขอพูดถึงนะครับ)
หลังจากเราได้หน้าใหม่มาแล้ว ในหน้าเนื้อหาเก่า เพิ่ม code ส่วนนี้ลงใน head
```
<link rel="amphtml" href="http://example.com/amp.html" />
```
อย่าลืมแก้ URL เป็นหน้า AMP ที่สร้างสำหรับหน้านั้น เป็นอันเสร็จสิ้นครับ

วิธีใช้ AMP สำหรับ WordPress

จากวิธีด้านบน ยุ่งยากใช้ไหมครับ คำตอบใช่ครับ สำหรับท่านที่ใช้ WordPress เรามีวิธีที่ดีกว่ามานำเสนอ นั้นคือติกตั้ง Plugin AMP ซึ่งสามารถดาวโหลด Plugin AMP ได้โดยคลิกลิงครับ เสร็จแล้วก็ติดตั้งลง WordPress ให้เรียบร้อย ถ้ามี Cache ก็ clear cache ซำ เท่านี้ก็สามารถใช้งาน AMP ได้แล้วครับ สามารถทดสอบได้โดย สมมุติ URL เราเป็น

https://www.ishare.in.th/articles/วิธีทำให้-wordpress-ใช้-amp-ได้-วิธีใส่โฆษณาในหน้า-amp

เราก็เติม /amp ลงไปด้านหลัง มันจะแสดงหน้าเว็บฉบับ AMP ให้ (ใช้ได้บน Chrome เท่านั้นนะครับ ตัวอื่นอาจจะแสดงผลไม่สมบูรณ์ เช่นโฆษณาไม่แสดงเป็นต้น) จะได้เป็น

https://www.ishare.in.th/articles/วิธีทำให้-wordpress-ใช้-amp-ได้-วิธีใส่โฆษณาในหน้า-amp/amp

ต้องบอกว่า plugin ตัวนี้ จะแสดงหน้า AMP ที่มีแค่เนื้อหาโพสเท่านั้นนะครับ ไม่มีความเห็น หรือส่วนอื่นๆ เพราะมันไม่ตรงข้อกำหนดของ AMP

ถ้าต้องการใส่โฆษณาให้หน้า AMP ทำยังไง

สำหรับใครที่ใช้ WordPress สามารถทำตามนี้ได้เลยครับ (แนะนำควรมีความรู้ php html ละดับนึงนะครับ เพื่อเกิดปัญหาจะได้แก้ปัญหาเฉพาะหน้าได้ หรืออย่างน้อยๆควร backup ไว้ก่อนครับ) สำหรับใครที่ไม่ได้ใช้ WordPress ก็น่าจะสามารถเดาจากด้านล่างได้เลยครับ ไม่น่ายาก

ให้แก้ไข functions.php ในโฟลเดอร์ theme ของเรา
ให้เพิ่มโคดไปดังนี้ครับ ดังตัวอย่างอันนี้เป็นของ Google Adsense
```
<?php
function show_amp_ads(){
?>
<div style="text-align:center">
<amp-ad width=320 height=100
type="adsense"
data-ad-client="ca-pub-2132417031705165"
data-ad-slot="6260362044">
</amp-ad>
</div>
<?php
}
add_action( 'amp_post_template_footer', 'show_amp_ads' );
```
(อย่าลืมแก้ตรง data-ad-client กับ data-ad-slot นะครับ ไม่งั้นเงินเข้าของผมหมดเลยนะ 55+)

หากต้องการใช้ Ads ตัวอื่นเช่น DoubleClick ให้ไปดูตัวอย่างจากที่นี่แล้วเอามาปรับครับ เช่นสมมุติของ DoubleClick จะเป็นประมาณนี้ครับ

<?php
function show_amp_ads(){
?>
<div style="text-align:center">
  <amp-ad width=320 height=50
      type="doubleclick"
      data-slot="/4119129/mobile_ad_banner"
      >
  </amp-ad>
</div>
<?php
}
add_action( 'amp_post_template_footer', 'show_amp_ads' );

จะเห็นว่าหลังจากใส่โคดลงไปจะเห็นว่ามีโฆษณาโผล่มาล่างสุดของหน้าเว็บแล้ว ถ้ามันไม่ขึ้นให้ลองดูผลสัก 2 – 3 วันนะครับ เพื่อให้ Bot Google เข้ามาเก็บข้อมูลไปหาว่าควรแสดงโฆษณาตัวใดดี

ข่าวร้ายสำหรับคนที่เดาโคดข้างต้นแล้วพยายามเปลี่ยนให้โฆษณาไปติดอยู่เหนือบทความ ขอบอกว่าแค่แก้ amp_post_template_footer เป็น amp_post_template_header ไม่ได้นะครับ เพราะมันไม่มี ผมลองแล้ว ถ้าอยากแก้ต้องไปแก้ที่ templates/single.php ที่อยู่ในโฟลเดอร์ plugin AMP ครับ

หากต้องการแก้ไขหน้า AMP เอง สามารถทำอย่างไรได้บ้าง

คัดลอก templates/single.php ในโฟลเดอร์ plugin ไปไว้ที่ theme/amp/single.php

เพิ่ม code ตรงนี้ลง functions.php

<?php
function my_amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type ) {
        $file = dirname( __FILE__ ) . '/amp/single.php';
    }
    return $file;
}
add_filter( 'amp_post_template_file', 'my_amp_set_custom_template', 10, 3 );

แก้ amp/single.php ตามสะดวก แต่ต้องตรงมาตรฐาน AMP นะครับ จะใส่โฆษณาอะไรตรงไหนก็เต็มที่ครับ แต่ถ้าเยอะไปมันจะผิดวัตถุประสงค์ของ AMP นะครับ ระวังด้วย