AMP หรือชื่อเต็มคือ Accelerated Mobile Pages เป็นมาตรฐานหน้าเว็บความเร็วสูงชนิดหนึ่ง ที่ประกาศใช้โดย Google เพื่อให้สามารถแสดงผลหน้าเว็บบนมือถือได้เร็วที่สุด โดยจะมีแท็กใหม่ๆที่ถูกประกาศออกมาโดย Google เอง และ HTML5 ปกติ เพื่อให้ได้ความเร็วสูงสุดในการเข้าถึงหน้าเว็บ โดยมีข้อกำหนดบางอย่างเพื่อให้หน้าเว็บเร็วขึ้น เช่น
วิธีใช้ง่ายๆ
<link rel="amphtml" href="http://example.com/amp.html" />
อย่าลืมแก้ URL เป็นหน้า AMP ที่สร้างสำหรับหน้านั้น เป็นอันเสร็จสิ้นครับ
จากวิธีด้านบน ยุ่งยากใช้ไหมครับ คำตอบใช่ครับ สำหรับท่านที่ใช้ 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
สำหรับใครที่ใช้ WordPress สามารถทำตามนี้ได้เลยครับ (แนะนำควรมีความรู้ php html ละดับนึงนะครับ เพื่อเกิดปัญหาจะได้แก้ปัญหาเฉพาะหน้าได้ หรืออย่างน้อยๆควร backup ไว้ก่อนครับ) สำหรับใครที่ไม่ได้ใช้ WordPress ก็น่าจะสามารถเดาจากด้านล่างได้เลยครับ ไม่น่ายาก
<?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 ครับ
<?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 );