วิธีสร้างเทมเพลตหน้า WordPress แบบกำหนดเอง

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

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

ภายในบทความนี้ เราจะพิจารณาว่าเทมเพลตหน้า WordPress แบบกำหนดเองคืออะไร ลำดับชั้นของเทมเพลตหน้าเริ่มต้น ตลอดจนวิธีสร้างเทมเพลตหน้า WordPress แบบกำหนดเองในธีมของคุณ

สารบัญ

เทมเพลตหน้า WordPress แบบกำหนดเองคืออะไร

ลำดับชั้นของเทมเพลตหน้า WordPress

การสร้างเทมเพลตหน้าแบบกำหนดเอง

• วิธีสร้างเทมเพลตที่กำหนดเองทั่วโลก
• การสร้างเทมเพลตหน้าเดียว

บทสรุป

เทมเพลตหน้า WordPress แบบกำหนดเองคืออะไร

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

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

การแสดงผลของหน้าถูกควบคุมโดยไฟล์ page.php ใน WordPress ไฟล์นี้จึงสร้างเป็นฐานเริ่มต้นสำหรับการแสดงผลเนื้อหาหน้าเว็บของคุณและอยู่ภายในรูทของไฟล์ธีมดังที่แสดงด้านล่าง

หากมีเทมเพลตของหน้าเว็บที่เฉพาะเจาะจงมากขึ้น ลำดับชั้นของเทมเพลตก็จะเริ่มต้นขึ้น

ลำดับชั้นของเทมเพลตหน้า WordPress

ลำดับชั้นของเทมเพลตหน้ากำหนดว่าไฟล์เทมเพลตใดที่ WordPress เลือกเมื่อแสดงหน้า ขึ้นอยู่กับลักษณะของคำขอและการมีอยู่ของไฟล์ในธีม

ลำดับชั้นเทมเพลต WordPress เริ่มต้นมีดังนี้:

เทมเพลตของเพจ : WordPress ตรวจสอบเทมเพลตที่กำหนดให้กับเพจและใช้เทมเพลตนี้ภายในเพจ

page-{slug}.php : หากไม่มีการกำหนดเทมเพลตให้กับเพจ WordPress จะตรวจสอบเทมเพลตที่มีกระสุนไปที่เพจและนำไปใช้หากพบ

กระสุนเป็นส่วนหนึ่งของ URL ของหน้าหลังชื่อโดเมนและสามารถแก้ไขได้ ด้านล่างนี้เป็นตัวอย่างภาพประกอบเกี่ยวกับเรื่องนี้

page-{id}.php : จากนั้น WordPress จะตรวจสอบการมีอยู่ของเทมเพลตเพจที่มี ID ของเพจไปยังเพจที่กำลังแสดงผล หากไม่พบเทมเพลตที่มีกระสุน

page.php : หากไม่พบเทมเพลตที่มี ID หน้า WordPress จะใช้เทมเพลต page.php มาตรฐานเพื่อแสดงหน้าเว็บ

singular.php : ในกรณีที่ไม่พบไฟล์ page.php WordPress จะใช้ไฟล์ singular.php โดยไม่คำนึงถึงประเภทของโพสต์

index.php : หากไม่มีเทมเพลตด้านบนนี้ WordPress จะใช้ค่าเริ่มต้นในการแสดงผลหน้าโดยใช้ไฟล์ index.php

การแสดงผลหน้าในสภาพแวดล้อม WordPress ของคุณจึงสามารถทำได้โดยเทมเพลตหน้าอย่างใดอย่างหนึ่งข้างต้น ดังนั้น จึงขึ้นอยู่กับคุณที่จะกำหนดระดับความสำคัญที่คุณต้องการให้มี

การสร้างเทมเพลตหน้าแบบกำหนดเอง

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

ในคู่มือนี้ เราจะมาดูวิธีการสร้างเทมเพลตเพจส่วนกลางในธีม Stax ด้วยตนเอง รวมถึงสร้างเทมเพลตหน้าเดียวในเพจของเรา

วิธีสร้างเทมเพลตที่กำหนดเองทั่วโลก

ในบางครั้ง คุณต้องการสร้างเทมเพลตของเพจที่สามารถใช้ได้ทั่วโลกในทุกหน้าภายในเว็บไซต์ของคุณ

ในการดำเนินการดังกล่าว คุณจะต้องระบุตัวแก้ไขข้อความก่อนเพื่อใช้งาน เช่น Notepad, Notepad ++, ข้อความประเสริฐ หรือตัวแก้ไขอื่นๆ ตามที่คุณต้องการ

เมื่อเสร็จแล้ว คุณอาจเริ่มสร้างไฟล์เทมเพลตโดยดำเนินการดังต่อไปนี้:

ขั้นตอนที่ 1: สร้างไฟล์ใหม่และเพิ่มรหัสต่อไปนี้ :

 <?php /* Template Name: PageWithNoFooter */ ?>

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

เมื่อเสร็จแล้ว ให้บันทึกเทมเพลตหน้าใหม่ของคุณด้วยนามสกุล .php ในกรณีของเราที่นี่ เราจะตั้งชื่อไฟล์เทมเพลต pagewithnofooter.php คุณสามารถใช้ชื่อใดก็ได้ตามต้องการ แต่ขอแนะนำให้ใช้ชื่อที่คล้ายกับชื่อเทมเพลตของคุณ

ขั้นตอนที่ 2: เพิ่มรหัสที่คุณต้องการลงในไฟล์

ในขั้นตอนนี้ คุณสามารถเพิ่มโค้ดที่คุณต้องการลงในไฟล์ได้ ไม่ว่าจะเป็น PHP หรือทั้ง PHP และ HTML

เพื่อวัตถุประสงค์ในการแสดงภาพประกอบ ในกรณีของเราที่นี่ เราจะใช้เนื้อหาของไฟล์ right-sidebar.php เริ่มต้นภายในไฟล์ pagewithnofooter.php แต่ปรับแต่งและเพิ่มโค้ดเพื่อแสดงข้อความต้อนรับ HTML ที่กำหนดเอง รวมทั้งปิดใช้งานส่วนท้าย หากคุณกำลังใช้ธีม WordPress อื่น คุณสามารถคัดลอกเนื้อหาของ page.php ภายในธีมหรือเทมเพลตหน้าที่กำหนดธีมอื่น ๆ ที่ธีมของคุณอาจมี

รหัสของเราจะเป็นดังนี้:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

ขั้นตอนที่ 3: อัปโหลดเทมเพลตของเพจไปยังไฟล์ธีมของคุณ

ด้วยความช่วยเหลือของโปรแกรม FTP เช่น Filezilla หรือผ่านแผงโฮสต์ของคุณ ให้อัปโหลดไฟล์ที่กำหนดเองของคุณไปที่รูทของไฟล์ธีมของคุณ ในกรณีของเราที่นี่ นี่จะอยู่ภายในเส้นทางไดเรกทอรีต่อไปนี้:

i) wp-content > ธีม > Stax

ii) แนะนำ: wp-content > ธีม > stax-child

สิ่งนี้ใช้ได้ในขณะที่ใช้ธีมลูกภายในไซต์ของคุณ และ stax-child เป็นธีมย่อยของคุณ

เราขอแนะนำให้ใช้ธีมลูกในขณะที่กำหนดเทมเพลตของเพจหรือปรับแต่งไฟล์อื่นๆ ภายในธีมของคุณ เพื่อหลีกเลี่ยงการสูญเสียการปรับแต่งระหว่างการอัปเดตธีม

ขั้นตอนที่ 4: สร้างหน้าใหม่และกำหนดเทมเพลต “PageWithNoFooter” ให้กับหน้านั้น

เพื่อให้บรรลุเป้าหมายนี้ ให้ไปที่หน้า > เพิ่มใหม่ ภายในแดชบอร์ด WordPress และสร้างหน้าของคุณ

เมื่อคุณสร้างเพจแล้ว ให้กำหนดเทมเพลต “PageWithNoFooter” และบันทึกการเปลี่ยนแปลงของคุณ

ด้านล่างนี้เป็นตัวอย่างภาพประกอบของสิ่งนี้:

ตอนนี้ เมื่อดูตัวอย่างหน้าในส่วนหน้า หน้าของเราจะไม่แสดงส่วนท้ายภายในหน้าของคุณ คุณจะมี HTML แบบกำหนดเองที่เราเพิ่มเข้าไปด้วย

ด้านล่างนี้เป็นภาพหน้าจอเกี่ยวกับสิ่งนี้:

คุณสามารถใช้เทมเพลตภายในหน้าใดก็ได้ที่คุณต้องการใช้เลย์เอาต์ หรือหน้าอื่นๆ ที่คุณไม่ต้องการให้มีส่วนท้าย

การสร้างเทมเพลตหน้าเดียว

เทมเพลตหน้าแบบกำหนดเองสำหรับหน้าเดียวมีความเฉพาะเจาะจงของหน้ามากกว่า ดังที่กล่าวไว้ก่อนหน้านี้ เทมเพลตเหล่านี้ได้รับการพิจารณาสำหรับการเลือกหากไม่มีการกำหนด "เทมเพลตหน้า" ให้กับเพจ

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

ในกรณีของเราที่นี่ เราจะสร้างเทมเพลตหน้าแบบกำหนดเองสำหรับหน้าติดต่อของเรา และปิดใช้งานส่วนท้ายจากหน้า ในการสร้างเทมเพลตดังกล่าว คุณจะต้องดำเนินการดังต่อไปนี้:

ขั้นตอนที่ 1: คัดลอกเนื้อหาของ page.php

ในขั้นตอนนี้ คุณจะต้องค้นหา page.php ภายในไฟล์ธีมของคุณก่อน

เมื่อคุณพบไฟล์แล้ว ให้เลือกแก้ไขและคัดลอกเนื้อหา

ขั้นตอนที่ 2: สร้างเทมเพลตใหม่ให้กับเพจ

ภายในรูทของไฟล์ธีมของคุณ ให้สร้างเทมเพลตเพจไปยังเพจผู้ติดต่อ คุณสามารถใช้ไฟล์ page-{id}.php หรือ page-{slug}.php ในกรณีของเราที่นี่ เราจะใช้กระสุน ดังนั้นเราจะตั้งชื่อเทมเพลตของเราเป็น page-contact.php เนื่องจาก “ผู้ติดต่อ” คือกระสุนหน้าของเราดังที่แสดงด้านล่าง:

ด้านล่างนี้ยังเป็นภาพประกอบเกี่ยวกับตำแหน่งไฟล์:

ขั้นตอนที่ 3: วางเนื้อหาของไฟล์ page.php

ตอนนี้ คุณจะต้องวางเนื้อหาของไฟล์ page.php ที่เราคัดลอกไว้ในขั้นตอนที่ 1 ด้านบนไปยังไฟล์ page-contact.php ใหม่ของเรา เมื่อทำเช่นนี้ คุณจะสามารถปรับแต่งไฟล์เพื่อรวมการเปลี่ยนแปลงโค้ดที่คุณต้องการและบันทึกการเปลี่ยนแปลงของคุณ ในกรณีของเรา เราจะปิดการใช้งานส่วนท้ายในหน้าติดต่อ ดังนั้นรหัสสุดท้ายของเราจะอ่านดังนี้:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

เมื่อดูตัวอย่างหน้าติดต่อของคุณ คุณจะพบว่าหน้าดังกล่าวไม่มีส่วนท้าย

ด้านล่างนี้คือการเปรียบเทียบภาพหน้าจอในหน้าแรกและหลังจากใช้เทมเพลตใหม่

หน้าติดต่อกับส่วนท้าย

หน้าติดต่อที่ไม่มีส่วนท้าย

บทสรุป

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

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