วิธีใช้ AMP กับ WordPress

AMP เป็นความพยายามของชุมชนที่สัญญาว่าจะ ประสิทธิภาพการโหลดหน้าเว็บที่ดีขึ้นสำหรับเว็บไซต์ในสภาพแวดล้อมมือถือ. แต่อย่างที่คุณสามารถพบได้จากบทช่วยสอนก่อนหน้าของเราคุณจะต้องเสียสละสิ่งแฟนซีจากเว็บไซต์ของคุณและปฏิบัติตามกฎอย่างเคร่งครัดปฏิบัติตามแนวทางและรับการตรวจสอบหน้า ดูเหมือนจะเป็นเรื่องที่ต้องทำ?

โชคดีถ้าคุณสร้างเว็บไซต์ด้วย WordPress คุณสามารถใช้ AMP กับเว็บไซต์ของคุณได้อย่างรวดเร็วโดยใช้ปลั๊กอินชื่อ AMP-WP มันมาพร้อมกับคุณสมบัติมากกว่าสิ่งที่ตรงกับตา ดังนั้นเรามาดูวิธีการทำงาน.

การกระตุ้น

เริ่มต้นด้วยเข้าสู่เว็บไซต์ของคุณไปที่ ปลั๊กอิน> เพิ่มใหม่ จอภาพ ค้นหา “amp; ติดตั้งและเปิดใช้งานจาก Automattic.

เมื่อเปิดใช้งานแล้วคุณสามารถดูโพสต์ที่แปลงโดย AMP โดยการเพิ่ม / แอมป์ / เส้นทางที่ท้าย URL โพสต์ (เช่น. http://wp.com/post/amp/) หรือด้วย ?แอมป์ = 1 (เช่น. http://wp.com/post/?amp=1) หากคุณไม่ได้ใช้คุณสมบัติ Pretty Permalinks บนเว็บไซต์ของคุณ.

และอย่างที่คุณเห็นด้านบนโพสต์นั้นได้รับการจัดสไตล์พื้นฐานซึ่งคุณสามารถปรับแต่งเพิ่มเติมได้.

ที่จะต้องทราบ

มีบางสิ่งที่คุณควรรู้เกี่ยวกับสถานะของปลั๊กอินในขณะนี้:

• หอจดหมายเหตุ - ประเภท, แท็ก และ อนุกรมวิธานที่กำหนดเอง - ไม่รองรับในปัจจุบัน พวกเขาจะไม่ถูกแปลงเป็นรูปแบบที่สอดคล้องกับ AMP อย่างไรก็ตามประเภทโพสต์ที่กำหนดเองสามารถเริ่มต้นใน AMP ผ่านตัวกรอง.
• ไม่เพิ่มในหน้าจอการตั้งค่าใหม่ในแดชบอร์ด. การปรับแต่งเสร็จแล้วที่ระดับรหัส ด้วยการกระทำตัวกรองคลาส.
• ขณะนี้ปลั๊กอินไม่ได้รวมองค์ประกอบที่กำหนดเองของ AMP ทั้งหมดเช่น แอมป์การวิเคราะห์ และ แอมป์โฆษณา ออกจากกล่อง. หากคุณต้องการองค์ประกอบเหล่านี้คุณจะต้องรวมมันเข้ากับการกระทำหรือตัวกรองของปลั๊กอิน.

การปรับแต่ง

ปลั๊กอินมีการดำเนินการและตัวกรองมากมายที่ให้ความยืดหยุ่นในการปรับแต่งสไตล์เนื้อหาของหน้าและแม้แต่มาร์กอัพ HTML ของหน้า AMP โดยรวม.

รูปแบบ

ฉันแน่ใจว่านี่เป็นสิ่งหนึ่งที่คุณต้องการเปลี่ยนทันทีหลังจากเปิดใช้งานปลั๊กอินเช่นการเปลี่ยนสีพื้นหลังส่วนหัวตระกูลตัวอักษรและขนาดตัวอักษรเพื่อให้ตรงกับแบรนด์และบุคลิกภาพเว็บไซต์ของคุณ.

ในการทำเช่นนั้นเราสามารถจ้าง amp_post_template_css การดำเนินการใน functions.php ไฟล์ของชุดรูปแบบของเรา.

ฟังก์ชั่น theme_amp_custom_styles () ?> nav.amp-wp-title-bar background-color: orange;   
หากเรามองผ่าน Chrome DevTools สไตล์เหล่านี้จะถูกผนวกเข้ากับ