สร้างเทมเพลตเพจที่กำหนดเองในธีม WordPress

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

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

เทมเพลตหน้า WordPress แบบกำหนดเองสามารถนำมาใช้เพื่อวัตถุประสงค์หลายประการ ความคิดบางอย่างรวมถึง:

• แสดงกระทู้ล่าสุดของแต่ละหมวด
• ฝัง Google Map หรือสคริปต์ใดๆ
• รายชื่อผู้เขียนทั้งหมด
• ภาพที่อัพโหลดล่าสุด
• หน้าออกแบบเองสำหรับพอร์ตโฟลิโอ
• หน้าติดต่อ

ลักษณะที่ปรากฏของหน้าและโพสต์ทั้งหมดที่สร้างขึ้นบนเว็บไซต์ WordPress นั้นได้รับการจัดการโดยไฟล์เทมเพลตชื่อ page.php การสร้างหรือแก้ไขเทมเพลตเพจที่กำหนดเองใน WordPress ต้องใช้ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ PHP

เพียงเปิดโปรแกรมแก้ไขข้อความแล้ววางโค้ดต่อไปนี้ลงไป

 <?php /* ชื่อเทมเพลต: PageWithoutSidebar */ ?>

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

ตอนนี้ เราจะทดสอบไฟล์เทมเพลตที่สร้างขึ้นใหม่

เข้าสู่แผงโฮสติ้งของคุณ ในตัวอย่างนี้ ฉันใช้ Cloudways – โฮสติ้ง WordPress ที่มีการจัดการที่เร็วที่สุด Cloudways รองรับแอปพลิเคชัน WordPress ด้วยตัวเลือกผู้ให้บริการสำหรับ AWS, DigitalOcean, GCP, Linode และ Vultr ไปที่โฟลเดอร์ /wp-content/themes เปิดโฟลเดอร์ธีมปัจจุบันของคุณและอัปโหลดไฟล์ PageWithoutSidebar.php ที่ นั่น

ไปที่ แผงการดูแลระบบ WordPress > หน้า > เพิ่มใหม่ คุณสามารถดูเทมเพลตหน้าแบบกำหนดเองใหม่ที่แสดงอยู่ทางด้านขวา

สร้างหน้าใหม่และตั้งค่าเทมเพลตเป็น PageWithoutSidebar เสร็จแล้วก็นำไป เผยแพร่

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

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

ถึงเวลาเพิ่มโค้ดสองสามบรรทัดเพื่อแสดงเนื้อหาของหน้า

สำหรับการสาธิตนี้ ฉันจะพูดถึงวิธีปรับแต่งเทมเพลตหน้า Twenty Sixteen เริ่มต้น

ลักษณะเริ่มต้นของหน้าถูกสร้างขึ้นโดยไฟล์ page.php ที่ อยู่ในโฟลเดอร์ /wp-contents/themes/YOUR THEME/ เปิด page.php และคัดลอกโค้ดนี้

 <?php get_header(); ?>

<div class="content-area">
                <main class="site-main" role="main">
                                <?php
                                // เริ่มการวนซ้ำ
                                ในขณะที่ ( have_posts() ) : the_post();

                                                // รวมเทมเพลตเนื้อหาของเพจ
                                                get_template_part( 'ส่วนแม่แบบ/เนื้อหา', 'หน้า' );

                                                // หากความคิดเห็นเปิดอยู่หรือเรามีความคิดเห็นอย่างน้อยหนึ่งความคิดเห็น ให้โหลดเทมเพลตความคิดเห็น
                                                ถ้า ( comments_open() || get_comments_number() ) {
                                                                ความคิดเห็น_แม่แบบ();
                                                }

                                                // สิ้นสุดการวนซ้ำ
                                ในที่สุด;
                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'เนื้อหาด้านล่าง' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

วางโค้ดนี้ลงใน PageWithoutSidebar.php ใต้โค้ดบรรทัดนี้

 <?php /* ชื่อเทมเพลต: PageWithoutSidebar */ ?>

บันทึกมัน!

ไฟล์ PageWithoutSidebar.php ที่ สมบูรณ์ของคุณจะมีลักษณะดังนี้

 <?php /* ชื่อเทมเพลต: PageWithoutSidebar */ ?>

<?php get_header(); ?>

<div class="content-area">

                <main class="site-main" role="main">

                                <?php

                                // เริ่มการวนซ้ำ
                                ในขณะที่ ( have_posts() ) : the_post();

                                                // รวมเทมเพลตเนื้อหาของเพจ
                                                get_template_part( 'ส่วนแม่แบบ/เนื้อหา', 'หน้า' );

                                                // หากความคิดเห็นเปิดอยู่หรือเรามีความคิดเห็นอย่างน้อยหนึ่งความคิดเห็น ให้โหลดเทมเพลตความคิดเห็น
                                                ถ้า ( comments_open() || get_comments_number() ) {

                                                                ความคิดเห็น_แม่แบบ();

                                                }

                                                // สิ้นสุดการวนซ้ำ
                                ในที่สุด;

                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar( 'เนื้อหาด้านล่าง' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

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

ตอนนี้ให้เราปรับแต่งมัน อย่างที่คุณเห็นมีแถบด้านข้างอยู่ทางด้านขวา ฉันจะลบออกจากหน้านี้เท่านั้น หน้าอื่นๆ ทั้งหมดจะมีรูปลักษณ์เริ่มต้นของธีม Twenty Sixteen

เปิดไฟล์ PageWithoutSidebar.php ไฟล์ เลื่อนลงไปจนสุดไฟล์และ ลบ :

 <?php get_sidebar(); ?>

นี่คือบรรทัดของรหัสที่ได้รับแถบด้านข้างบนหน้า หลังจากลบบรรทัดแล้ว ให้บันทึก . เปิด URL ของหน้าและแถบด้านข้างก็ไม่มีอีกต่อไป!

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

กลับไปที่ PageWithoutSidebar.php และค้นหา:

 <div class="content-area">

เพียงเปลี่ยน “ content-area ” เป็น “ site-content-fullwidth ” เท่านี้ก็เรียบร้อย รีเฟรชหน้าและเนื้อหาเต็มความกว้าง

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

หากคุณมีคำถามใด ๆ อย่าลังเลที่จะถามโดยโพสต์ในส่วนความคิดเห็นด้านล่าง