การเรียกใช้ Partial Template ใน WordPress

ธีมของเวิร์ดเพรสนั้น  นอกจากการสร้างไฟล์ตาม Hierarchy แล้ว  มันยังรองรับการตัด Template ออกเป็นส่วนๆ  แล้วค่อยเรียกเข้ามาแสดงใน Template หลักอีกด้วย  ซึ่งส่วนหลักๆ ที่เรามักจะใช้กัน  จะมีอยู่สี่ส่วนด้วยกัน  นั่นคือ

  1. ส่วน header.php
  2. ส่วน footer.php
  3. ส่วน sidebar.php
  4. ส่วน searchform.php

และนอกจากสี่ส่วนนี้แล้ว  เวิร์ดเพรสยังอนุญาตให้เราสร้าง Template Part ขึ้นมาเอง  และเรียกมาแสดงผลผ่านฟังก์ชัน get_template_part();  ได้อีกด้วย

ข้อดีของการใช้ Partial Template

หลายๆ ครั้งที่เราสร้าง Template ให้กับหลายๆ หน้า  และมีบางส่วนที่เป็นโค๊ดซ้ำๆ กัน (เช่นส่วนแสดงชื่อโพสต์และวันที่, ส่วนแสดงเนื้อหา, ส่วนแสดงข้อมูลผู้โพสต์) หากเราสร้างออกมาเป็น Template ปกติ  เมื่อมีการแก้ไขส่วนที่โค๊ดซ้ำๆ กันนี้  เราจะต้องไปแก้ไขในทุกๆ Template ที่เราสร้างไว้  แต่ถ้าหากเราแบ่งโค๊ดส่วนนี้ออกมาเป็น Partial Template เราสามารถที่จะแก้ไขจากไฟล์เดียว  ไม่ต้องวนแก้หลายๆ ที่  และนั่งปวดหัวเช็คว่าแก้ครบหรือยังอีกต่อไป

อีกหนึ่งความสะดวกของการแบ่ง Template ออกแบบส่วนๆ ก็คือเมื่อเราต้องการปิดการแสดงผลบางส่วน (เช่นอยากปิดส่วน Author Info) เราก็แค่ไปคอมเมนต์โค๊ดออกแค่บรรทัดเดียว  แทนที่จะต้องไปคอมเมนต์ HTML ยาวๆ  แถวยังเสี่ยงไปคอมเมนต์ผิด Nest อีกต่างหาก  ซึ่งจุดนี้จะทำให้โค๊ดของเราสะอาดขึ้นด้วยครับ

ไฟล์ Partial Template

ไฟล์ส่วนเท็มเพลทนั้น  มันก็เป็นไฟล์ทั่วๆ ไปนั่นแหละ  เราสามารถตั้งไฟล์ว่าอะไรก็ได้ (และไม่จำเป็นต้องระบุ Template name แบบ Custom Page Template ด้วย) ซึ่งโดยปกติแล้วมักจะตั้งชื่อกันในลักษณะนี้

  • slug.php
  • slug-name.php

และเราสามารถเซฟไฟล์ไว้ใน Theme root หรือจะสร้างโฟลเดอร์ย่อยเพื่อเก็บไฟล์  ก็ได้เช่นกัน

การเรียกใช้ Partial Template

เวิร์ดเพรสได้เตรียมฟังก์ชัน get_template_part($slug, $name); เอาไว้ให้เราใช้เรียกส่วนเท็มเพลท  ซึ่งฟังก์ชันนี้จะรับพารามิเตอร์ 2 ตัว คือ

  • $slug (required)
  • $name (optional)

อย่างเช่นถ้าเราตั้งชื่อไฟล์ว่า loop-content.php เราสามารถเรียกเท็มเพลทนี้ได้ด้วยคำสั่ง get_template_part(“loop”, “content”);  หรือถ้าเราตั้งชื่อไฟล์ไว้แค่ slug เช่น loop.php เราก็สามารถเรียกใช้ได้ด้วยคำสั่ง get_template_part(“loop”);  เพื่อเรียกไฟล์ loop.php มาแสดง

ในกรณีที่เราเก็บไฟล์ส่วนเท็มเพลทเอาไว้ในโฟลเดอร์ย่อย  เช่น partials/loop-content.php ก็ให้เราใส่ชื่อโฟลเดอร์ลงไปใน slug ด้วย  เช่น get_template_part(“partials/loop”, “content”);  เพื่อเรียกส่วนเท็มเพลทขึ้นมาแสดง

ตัวอย่างการแบ่ง Partial Template

ในกรณีที่เราเรียก get_template_part();  โดยระบุ $name ลงไปด้วย  ถ้าหากเวิร์ดเพรสหาไฟล์ slug-name.php ไม่เจอ  มันก็จะไปดึงเอา slug.php มาแสดงแทนครับ  เช่นถ้าผมเรียก get_template_part(“loop”, “ads”);  แล้วเวิร์ดเพรสไม่เจอไฟล์ loop-ads.php มันก็จะไปหาเอาไฟล์ loop.php ขึ้นมาแสดงแทน

ในกรณีที่เราใช้ Child Theme อยู่ด้วย  หากฟังก์ชัน get_template_part(); ก็จะมองหากไฟล์ใน Child Theme ก่อน  หากไม่เจอจึงจะไปมองหาไฟล์ใน Parent Theme ซึ่งลำดับการมองหาจะเป็นอย่างนี้ครับ

  1. child/slug-name.php
  2. parent/slug-name.php
  3. child/slug.php
  4. parent/slug.php

ในกรณีที่หาทั้งสี่ไฟล์แล้วยังไม่เจอ  มันก็จะนั่งเงียบๆ ไม่ปริปากบ่น Warning ใดๆ

การส่งตัวแปรไปยัง Partial Template

ข้อเสียหนึ่งของฟังก์ชัน get_template_part();  คือ Template ที่เรียกเข้ามา มันจะไม่สามารถเรียกใช้ตัวแปรใดๆ ที่เราประกาศเอาไว้ใน Template หลักได้ครับ (แต่ยังสามารถเรียกใช้ Template Tag ร่วมกับ Loop ใน Template หลักได้ตามปกติ  เช่นฟังก์ชันพวก the_title(); ) ทางแก้คือเราต้องใช้ฟังก์ชัน include();  ร่วมกับฟังก์ชัน locate_template();  ครับ

ในกรณีที่เราเรียกใช้ locate_template();  นี้  เราจะต้องระบุโฟลเดอร์และชื่อไฟล์เต็มๆ ลงไปด้วยเลย  ตัวอย่างเช่น

include(locate_template("partial/global-breadcrumb.php"));

ด้วยวิธีนี้  ไฟล์ global-breadcrumb.php จะสามารถเรียกใช้ตัวแปรที่เราประกาศเอาไว้ใน Template หลักได้ในทันทีครับ

Posted by Jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

Comments