ทั้งหมดที่คุณต้องรู้เกี่ยวกับฟังก์ชัน get_template_part() ของ WordPress

ครั้งหนึ่งฉันเคยอ่านว่าวิธีที่ดีที่สุดในการเรียนรู้การเขียนโปรแกรมคือการอ่านโค้ดที่คนอื่นเขียน ท้ายที่สุด เวลาส่วนใหญ่ที่คุณใช้ในฐานะนักพัฒนาซอฟต์แวร์อาจจะกำลังตรวจสอบ ขัดเกลา และแก้ไขโค้ดที่คุณหรือนักพัฒนาซอฟต์แวร์รายอื่นเคยเขียนไว้ในอดีต นี่คือเหตุผลที่ฉันชอบซอฟต์แวร์โอเพ่นซอร์สฟรีมาก: มันให้สิทธิ์เราในการเข้าถึงซอร์สโค้ดของเครื่องมือที่ยอดเยี่ยม และทำให้สามารถเรียนรู้จากซอฟต์แวร์เหล่านี้ได้

หากคุณสนใจในโลกของ WordPress (และฉันคิดว่าคุณเป็นเช่นนั้น เพราะคุณอยู่ที่นี่) ซอร์สโค้ดของ WordPress Core หรือ Gutenberg เป็นสองวิธีที่ดีมากในการเป็นผู้เชี่ยวชาญ WordPress ที่ดีขึ้น และเรียนรู้เกี่ยวกับการพัฒนาแบ็กเอนด์และฟรอนท์เอนด์

ตั้งแต่การเปิดตัวครั้งแรกของ Gutenberg เราได้แบ่งปันทุกสิ่งที่เราได้เรียนรู้เกี่ยวกับการพัฒนาส่วนหน้าจนถึงตอนนี้ ตัวอย่างเช่น เราสร้างชุดของโพสต์ที่เราสอนคุณเกี่ยวกับพื้นฐานของ React เราเห็นวิธีการใช้ส่วนประกอบซ้ำ เราอธิบายวิธีขยาย Gutenberg และเราพูดถึงข่าว JavaScript เพื่อเขียนซอร์สโค้ดที่ดีขึ้น เพื่อตั้งชื่อบทความสองสามบทความ เราได้เขียน

วันนี้เราจะมาเปลี่ยนเกียร์และโฟกัสที่ WordPress Core กันอีกครั้ง ทำไม? ไม่รู้สิ อาจเป็นเพราะการประกาศธีม Twenty Twenty-One ฉบับต่อไปที่เผยแพร่เมื่อไม่กี่วันก่อนเป็นข้อแก้ตัวที่สมบูรณ์แบบที่จะทำเช่นนั้น เรามาพูดถึงองค์ประกอบที่สำคัญที่สุดอย่างหนึ่งในการสร้างธีมใน WordPress: ฟังก์ชัน get_template_part

ธีมเวิร์ดเพรส

ก่อนอื่น เรามาทบทวนวิธีการทำงานของธีม WordPress กันก่อนดีไหม? โดยพื้นฐานแล้ว ธีมคือชุดของไฟล์ที่กำหนดโครงสร้าง HTML และรูปแบบ CSS ที่เว็บไซต์ของเราจะใช้

หากคุณนึกถึงโครงร่างของหน้าเว็บใด ๆ คุณจะเห็นรูปแบบเดียวกันซ้ำ ๆ เสมอ:

• เราเริ่มต้นด้วยการเปิดแท็ก html และส่วน head นั่นคือที่ที่เราเพิ่มสคริปต์ สไตล์ เมตาแท็ก และอื่นๆ
• จากนั้นเราปิดแท็ก head และเปิดแท็ก body ซึ่งจะมีเนื้อหาที่มองเห็นได้ของเว็บไซต์ของเรา
  • โดยปกติ เนื้อหาของหน้าจะมีส่วนหัวที่มีโลโก้ของเว็บ เมนู ฯลฯ
  • ต่อมาก็คือตัวเนื้อหาเอง ซึ่งอาจเป็นหน้า บทความในบล็อก รายการโพสต์ ผลการค้นหา และอื่นๆ
  • สุดท้ายก็มักจะลงท้ายด้วยส่วนท้าย
• สุดท้าย เมื่อแสดงผลทั้งหน้าแล้ว เราจะปิดแท็กทั้งหมดและเสร็จสิ้น

ใช่ ดูเหมือนว่าทุกหน้าเว็บจะมีโครงสร้างที่คล้ายกันไม่มากก็น้อย: มีส่วนทั่วไป (เช่น ส่วนหัว เมนู ส่วนท้าย…) และส่วนเฉพาะของเนื้อหา (บล็อกโพสต์ ชุดผลลัพธ์ที่เราได้รับหลังจากการค้นหา , ผลิตภัณฑ์ WooCommerce เป็นต้น)

เนื่องจากโปรแกรมเมอร์ไม่ชอบโค้ดซ้ำ และเรา (โดยทั่วไป) เป็นคนที่มีระเบียบ ธีม WordPress จึงใช้โครงสร้างไฟล์ที่มีลวดลายมาก ในโพสต์นี้ที่ฉันเขียนเมื่อไม่กี่เดือนก่อน คุณมีคำอธิบายที่ดีเกี่ยวกับไฟล์ต่างๆ ในธีม แต่โปรดจำไว้ว่ามี:

• สไตล์ชีต: style.css ,
• header.php เพื่อ "เปิด" หน้าเว็บ (นั่นคือ ส่งออกแท็ก head และโดยปกติคือส่วนเริ่มต้นของ body ที่มักใช้กับทุกหน้า)
• ไฟล์ footer.php อื่นที่ "ปิด" หน้า (เช่น เพิ่มส่วนท้ายและปิดแท็ก html ) และ
• ไฟล์เพิ่มเติมจำนวนมากสำหรับเนื้อหาประเภทต่างๆ ที่เราต้องการแสดง

ฟังก์ชัน get_template_part คืออะไรและมีไว้เพื่ออะไร

สิ่งแรกที่ต้องทำเมื่อคุณพบคุณลักษณะใหม่คือสิ่งที่ตรงกันข้ามกับสิ่งที่คุณทำเมื่อพ่อของคุณขอให้คุณช่วยเขาตั้งโปรแกรม Roomba Cleaner เครื่องใหม่ของเขา: อ่านเอกสาร ลองทำสิ่งนั้นด้วยฟังก์ชันของเราโดยดูที่ Codex:

get_template_part จัดเตรียมกลไกง่ายๆ สำหรับธีมลูกเพื่อโอเวอร์โหลดโค้ดส่วนที่ใช้ซ้ำได้ในธีม

รวมส่วนเทมเพลตที่มีชื่อสำหรับธีมหรือหากมีการระบุชื่อ จะมีการรวมส่วนเฉพาะไว้ด้วย หากธีมไม่มีไฟล์ {slug}.php ก็จะไม่มีเทมเพลตรวมอยู่ด้วย

เทมเพลตถูกรวมโดยใช้ require ไม่ใช่ require_once ดังนั้น คุณอาจรวมส่วนเทมเพลตเดียวกันได้หลายครั้ง

สำหรับพารามิเตอร์ $name หากไฟล์ชื่อ “{slug}-special.php” ให้ระบุ “special”

หมายเหตุ: get_template_part() ล้มเหลวโดยไม่โต้ตอบ

get_template_part docs ที่ WordPress.org

ดู? ในเวลาน้อยกว่าหนึ่งนาที เราได้รับข้อมูลทั้งหมดที่เราต้องการ ตอนนี้เราทราบแล้วว่าฟังก์ชันนี้ใช้เพื่อสร้าง "ชิ้นส่วนที่นำกลับมาใช้ใหม่ได้" ในธีม (ดังนั้นจึงเป็นการหลีกเลี่ยงโค้ดที่ซ้ำกัน) และทำในลักษณะที่ธีมย่อยสามารถปรับได้ เรายังมีข้อมูลเกี่ยวกับพารามิเตอร์ของมัน การทำงานภายในของมัน (มันใช้ฟังก์ชันที่ require ของ PHP) และสิ่งที่เราคาดหวังได้จากมัน (มัน "ล้มเหลวอย่างเงียบๆ")

ขออภัย มีบางสิ่งที่ยังไม่ชัดเจน เช่นไฟล์ {slug}.php และ {slug}-special.php ที่กล่าวถึง พวกเขาคืออะไร? พวกเขามีอะไรบ้าง? พวกเขาทำอะไร? คำถามที่ตอบยากมากมายโดยดูจากเอกสารเท่านั้น ถึงเวลาข้ามไปที่ตัวอย่างแล้ว

วิธีสร้างเทมเพลตบางส่วนในธีมของเรา

มาดูธีมของ Twenty Twenty-One กันเพื่อดูว่ามันใช้ "เทมเพลตบางส่วน" เหล่านี้หรือไม่ และถ้าใช้ แสดงว่าหน้าตาเป็นอย่างไรและสิ่งที่คุณควรทำเพื่อนำไปใช้ในธีมของคุณเอง

หากคุณอ่านโพสต์ของฉันเกี่ยวกับลำดับชั้นไฟล์ของธีม WordPress คุณจะรู้ว่า “ index.php เป็นเทมเพลตเริ่มต้นสำหรับธีมของเรา มันถูกใช้เพื่อแสดงเนื้อหาใด ๆ บนเว็บไซต์ของเรา ตราบใดที่เนื้อหาดังกล่าวไม่มีเทมเพลตเฉพาะที่ออกแบบมาสำหรับมัน” เนื่องจากนี่เป็นเทมเพลตเริ่มต้น ฉันคิดว่าควรเริ่มต้นที่นั่น นี่คือเนื้อหาของ index.php ในธีม Twenty Twenty-One :

 get_header(); if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content-none' ); } get_footer();

อย่างที่คุณเห็น เรามีทุกส่วนที่เราเคยแสดงความคิดเห็นไว้ก่อนหน้านี้:

• รวมถึงส่วนหัวโดยใช้ get_header
• มันแสดงเนื้อหาเอง
• มันปิดหน้าด้วย get_footer

สิ่งที่น่าสนใจที่นี่คือพื้นที่ "เนื้อหา" ใน index.php อย่างชัดเจน โดยเฉพาะอย่างยิ่ง เราเห็นว่าเรามีการควบคุมเพียงเล็กน้อยเพื่อทราบว่าเราเห็นเนื้อหาที่ถูกต้องหรือไม่ ( ฟังก์ชัน have_posts ของ WordPress Loop) และขึ้นอยู่กับว่าเรามีหรือไม่ เราโหลดเทมเพลตบางส่วน ( …/content ) หรือ อื่น ( …/content-none )

หากตอนนี้เราดูที่บางส่วนของเท็มเพลต content.php เราจะเห็นคร่าวๆ ดังนี้:

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> … the_title( … ); … </header> <div class="entry-content"> <?php the_content( … ); wp_link_pages( … ); ?> </div> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer> … </article>

ค่อนข้างตรงไปตรงมาใช่ไหม ทั้งหมดที่เรามีคือเทมเพลตขนาดเล็กที่ออกแบบมาเพื่อแสดงเนื้อหาทั่วไปของ WordPress เช่น บล็อกโพสต์ โปรดทราบว่าโครงร่าง HTML ที่เป็นผลลัพธ์นั้นไม่มีอะไรมากไปกว่าแท็ก article ที่มีชื่อ เนื้อหา และส่วนท้าย ทั้งหมดนี้ใช้แท็กเทมเพลต WordPress เพื่อดึงเนื้อหาจริง

ทำไม WordPress API ถึงยอดเยี่ยม

แม้ว่าคุณจะไม่ทราบว่ามีฟังก์ชันทั้งหมดเหล่านี้อยู่ ( get_header , get_footer หรือดาวเด่นของวันนี้: get_template_part ) ฉันค่อนข้างแน่ใจว่าคุณจะจัดระเบียบโค้ดของคุณตามแนวทางที่คล้ายคลึงกัน ท้ายที่สุด ดูเหมือนว่าค่อนข้างสมเหตุสมผลที่จะสร้างเทมเพลตสำหรับส่วนหัว อีกอันสำหรับส่วนท้าย อีกอันสำหรับเนื้อหา... แล้วมีไฟล์พิเศษหรือบางอย่างที่รวมเข้าด้วยกันใช่ไหม

หากคุณปฏิบัติตามแนวทางดังกล่าว ฉันพนันได้เลยว่าไฟล์ index.php ของคุณจะมีลักษณะดังนี้:

 require_once 'header.php'; if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); require 'template-parts/content.php'; } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. require 'template-parts/content-none.php'; } require_once 'footer.php';

ซึ่งคล้ายกับที่เรามีในธีม Twenty Twenty-One ดังนั้น ณ จุดนี้ คุณอาจถามตัวเองว่า ฉันจะได้อะไรจากการใช้ฟังก์ชันเฉพาะของ WordPress? การใช้ PHP require โดยตรงนั้นไม่เหมือนกันหรือ โดยเฉพาะอย่างยิ่งเมื่อพิจารณาว่าตามเอกสารของ WordPress นั่นคือสิ่งที่ฟังก์ชันตัวช่วยเหล่านี้ใช้ใช่หรือไม่

เหตุผลหลักที่จริง ๆ แล้วมีการกล่าวถึงในเอกสารประกอบเอง: ทำให้ง่ายต่อการสร้างธีมลูก ดังนั้น หากคุณกำลังสร้างธีมย่อยและคุณใช้ get_template_part WordPress จะค้นหาเทมเพลตในธีมย่อย และหากไม่เป็นเช่นนั้น จะใช้ของพาเรนต์

แต่นั่นไม่ใช่ทั้งหมด! ฟังก์ชัน WordPress มักจะเต็มไปด้วยตัวกรองและการดำเนินการที่ช่วยให้คุณสามารถปรับผลลัพธ์สุดท้ายได้ ตัวอย่างเช่น ถ้าเราดูฟังก์ชันภายใน get_template_part ใน wp-includes/general-template.php :

 function get_template_part( … ) { do_action( "get_template_part_{$slug}", … ); … do_action( 'get_template_part', … ); if ( ! locate_template( … ) ) { return false; } }

เราจะเห็นว่าเรามีการดำเนินการสองสามอย่างที่ปลั๊กอินและธีมสามารถใช้ประโยชน์ได้ และถ้าเราดึงเธรดต่อไป เราจะสามารถเห็นได้ว่า WordPress ระบุตำแหน่งอย่างไร ( locate_template ) และโหลดเทมเพลตที่มันจะจบลงโดยใช้:

 function locate_template( $template_names, … ) { $located = ''; foreach ( $template_names as $name ) { if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in child theme break; } else if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in parent theme break; } else { … } } if ( $located ) { load_template( $located, $require_once, $args ); } return $located; }

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

ภาพเด่นโดย Joshua Sortino บน Unsplash