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

AMP คืออะไร

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

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

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

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

  1. ก่อนอื่นเข้าไปดูข้อกำหนดต่างๆ ในเว็บของ AMP  จากนั้นให้สร้างหน้าใหม่สำหรับเนื้อหาแต่ละหน้า โดยใช้ข้อกำหนดต่างๆในเว็บ AMP (มันมีเยอะ ผมไม่ขอพูดถึงนะครับ)
  2. หลังจากเราได้หน้าใหม่มาแล้ว ในหน้าเนื้อหาเก่า เพิ่ม 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 ก็น่าจะสามารถเดาจากด้านล่างได้เลยครับ ไม่น่ายาก

  1. ให้แก้ไข functions.php ในโฟลเดอร์ theme ของเรา
  2. ให้เพิ่มโคดไปดังนี้ครับ ดังตัวอย่างอันนี้เป็นของ 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 เอง สามารถทำอย่างไรได้บ้าง

  1. คัดลอก templates/single.php ในโฟลเดอร์ plugin ไปไว้ที่ theme/amp/single.php
  2. เพิ่ม 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 );
  3. แก้ amp/single.php ตามสะดวก แต่ต้องตรงมาตรฐาน AMP นะครับ จะใส่โฆษณาอะไรตรงไหนก็เต็มที่ครับ แต่ถ้าเยอะไปมันจะผิดวัตถุประสงค์ของ AMP นะครับ ระวังด้วย

บันทึกไปศูนย์บริการ DTAC

อันนี้เป็นบันทึกความประทับใจเฉยๆ เรื่องมันมีอยู่ว่า SIM ผมเสียไป SIM นึง คือผมใช้ Multi Sim แล้ว Sim ที่ใช้โทรพัง ผมเลยเอา Sim จาก Tablet มาแก้เป็น Sim หลักใช้แก้ขัด

วันนี้ผมไปศูนย์เพื่อขอ SIM ใหม่ ไปถึงพี่เค้ากดบัตรคิวให้ แล้วก็รอยาวๆ (ประมาณ 10 นาที) แล้วเค้าก็เรียกไป

ไป ถึงเค้าก็ถาม “จะทำไรคะ” เราก็บอกเปลี่ยน sim ครับ sim พัง เค้าก็ไปหยิบ sim ใหม่มาให้ แล้วเค้าก็ขอดู sim ที่พัง ตรงนี้แหละปัญหาเกิด เพราะรหัสบน sim ไม่ตรง(เพราะ sim หลักมันกลายเป็น sim ที่ผมใส่ในมือถือไปแล้ว 55+) เค้าก็ขอดู sim ที่ใช้ได้อยู่ ผมก็ให้เค้าไปนั่งมั่วสักพัก เค้าก็จดเบอร์ แล้วก็บอกรอสักครู่นะคะ แล้วก็เก็บเรียบ 2 sim หายไปราวๆ 10 นาทีจึงเสร็จ(ไม่น่าซนเลยกรุ ไม่งั้นเสร็จนานและ) ก็จบเรื่องนี้แต่วันนี้ผมไม่ได้มาเรื่องเดียวครับ

แต่ก่อนที่ผมจะได้ เอ่ยอะไร ก็มีพี่อีกคนมาแนะนำบอกให้เปลี่ยน package เพราะ package ปัจจุบันมันกาก(เค้าไม่พูดงี้หรอก แต่จับใจความได้งี้แหละ) คือของเก่าผมใช้ 899 บาทได้ 3G 2GB โทรฟรีกี่นาทีไม่รู้ลืม แต่เค้าแนะนำ package 799 บาท ได้ 3G 3GB แต่เค้าบอกโทรฟรีลดลง 50 นาที

ซึ่งอันนี้แหละจุดประสงค์ ที่ 2 ผมมาเปลี่ยน package คือผมเนี่ยทั้งเดือนโทรนิดเดียว เอามาทำไมเป็น 100 นาที ผมเลยขอเค้าแบบเป็น internet อย่างเดียว พอเค้าเปลี่ยนผลเค้าบอกระบบไม่ยอมให้เปลี่ยน เค้าเลยยกเลิก Multi Sim แล้วสมัครใหม่ ให้ได้ปกติ ที่น่าตกใจคือผมขอดูค่าโทรย้อนหลังผมเฉลี่ยเดือนนึงผมโทรไม่ถึง 20 นาที(ที่น่าตกใจกว่าคือมันเกิน 10 นาทีได้ไงวะ?)

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

ปล จริงๆลืมยกเลิกบริการ SMS