จะสร้าง Template ใหม่ให้กับหน้าเว็บบางหน้าได้อย่างไร

Archives, Categories, and Special Pages
ในตระกูลของ การแสดงผล ในรูปแบบต่างๆของ wordpress นั้น ล้วนแล้วแต่มากมาย หลากหลายและเต็มไปหมด แต่ผมขอยกมาเฉพาะ เรื่องที่เกี่ยวข้องกับบทความตอนนี้ก่อนก็แล้วกัน นั้นคือกลุ่มของ Special Page หรือหมวดหมู่ของ Page นั้นๆ ซึ่งก็จะประกอบไปด้วย

Static Front Page
หน้าพิเศษ สำหรับสร้างเป็นหน้าหลักของเว็บไซต์ โดยส่วนมาก จะนิยมสร้าง แตกต่างกับตัว blog โดยส่วนมาก นิยมแสดงเป็นภาพรวม หรือแสดงทุกส่วนอย่างละนิดหน่อย ออกมา ให้เห็นเนื้อหา ทั้งเว็บไซต์

Author Page
หน้านี้เพื่อคนเขียนโดยเฉพาะ เพราะมันจะถูกสร้างขึ้นบนไฟล์ที่ชื่อ author.php ซึ่งโดยส่วนมาก จะแสดงข้อมูล Post ต่างๆ ที่เขียนโดยตัวผู้เขียน บทความนั้นๆ

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

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

Error 404 Page
แสดงให้เรารู้ว่า หน้านี้มันหายไป หรือ url มันหายไป หรือไม่มีอยู่แล้ว แต่เรายังคงอยู่ในเว็บไซต์นี้

Archive Page
เวลาแสดงเนื้อหา หรือ Post ผ่านทางวันที่ แบบเรียงวันไปเรื่อยๆ เวลาสร้าง จะใช้ไฟล์ที่ชื่อ archive.php

Search Page
ป็นอีกหน้าที่ต้องทำ ต้องแก้กันตลอดเวลาสร้างใหม่ เพราะจะได้ให้เข้ากับ theme หน่อย แต่เวลาสร้าง จะสร้างบนไฟล์ search.php

Custom Page
อันนี้ คือสิ่งที่เราจะมาลอง เริ่มทำกันดู เราสามารถออกแบบ ใหม่ได้ และใช้งานได้ สำหรับบางหน้า หรือหลายๆหน้า โดยการสร้างที่อิงจากการเรียก Path ของ Page ขึ้นมาทำงาน

Page within the Hierarchy
โดยปกติ Page จะสั่งงานออกมา ให้แสดงผลบน browser หลังจากที่ user เข้ามา แล้วเรียกเว็บไซต์ wordpress จะทำการเลือก ตามหลักการดังนี้ เพื่อ Render Page ออกมาให้ตรง ตามโครงสร้างที่ถูกออกแบบไว้

1.Page Template หากมีการ Custom เจ้าหน้า page นี้ขึ้นมาใหม่ wordpress จะมองหา แล้วแสดงออกมาเป็นไฟล์แรก
2.Page-{slug}.php อันนี้คือไฟล์ page ที่ตามด้วย Slug ของ Post จะถูกเรียก หากไม่มีการสร้าง Page แรกเอาไว้ ส่วน Slug ก็เช่น หาก Post ของคุณชื่อ Slug ว่า customer เมื่อ post นี้ถูกเรียกขึ้นมาเมื่อไหร่ page-customer ก็จะแสดงผล โดยทันที
3.Page-{id}.php อันนี้คือสร้างแบบเจาะจง เหมือนกัน แต่จะเป็นการเจาะจงลงไปที่ระดับ ของไอดีเพจ นั้นๆ เช่นเพจของคุณมีไอดีเป็น 24 เวลาเพจนี้ถูกเรียกขึ้นมาบน browser ก็จเป็น page-24 แล้ว แสดงผล ตามที่เราออกแบบไว้
4.Page.php อันนี้ Theme ส่วนใหญ่จะมีๆไว้ เพื่อสร้างความแตกต่าง ให้เราอยู่แล้ว แต่หน้านี้ เป็นเหมือน Default ของเพจทั้งหมดเลย
5.index.php หากไม่มีการ Custom อะไรใหม่เลย แล้วยังไม่มีหน้า Page.php อีก หน้า index ของเว็บไซต์จะถูกเรียกออกมาพ่นเนื้อหาแทน

แล้วจะรู้ได้อย่างไรว่า Page ไหนมี Slug ไหนหรือไอดี อะไร?
ดูได้ในตอนสร้างหรือแก้ไข หน้าเพจนั้นๆ

ตรง Post.php นั้นมี ID แฝงอยู่ และในส่วนของ Permalink จะเห็นว่า Service เป็น Slug URL หน้านี้นั้นเอง

วิธีการสร้างหน้า สำหรับ บางเพจ
เราจะเริ่มจาก การสร้าง Page ที่ชื่อว่า contact เพราะจะเอาไว้สำหรับติดต่อกับมา
เริ่มจากการสร้างไฟล์ PHP ขึ้นมาโดยตั้งชื่อว่า page-contact.php

จากนั้นให้ใส่ Comment ไว้บนบรรทัดแรกว่า

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

ใช้ชื่อว่าอะไร ก็ได้ใน Comment นี้
ทดลองสร้าง หน้าสำหรับติดต่อแบบง่ายๆดู  โดยจะใช้แบบทั้งหมดเป็น Code ใหม่เลย
ไม่ได้ดึงมาจาก database ของทาง wordpress ให้ดูก่อน

<?php /* Template Name: Contact Template */ ?>
<?php get_header(); ?>
<h1>Contact Page</h1>
 
<div class="row">
<div class="col-md-6">
<div class="contact-form">
<form method="post" action="php/contact.php" id="cform">
<input type="text" id="name" name="name" placeholder="NAME" class="form-control"/>
<br>
<input type="email" id="email" name="email" placeholder="Email" class="form-control"/>
<br>
<textarea class="form-control" id="message" name="message" placeholder="enter your message"></textarea>
<br>
<button type="submit" class="success-btn btn btn-primary">send message</button>
</form>
</div><!--contact-form-->
</div>
 
<div class="col-md-6">
<div class="contact-details">
<h4>LOCATION</h4>
<p>Teerapuch Web Studio In Bangkok</p>
 
<h4>TELEPHONE</h4>
<p>098-375-6574</p>
 
<h4>E-MAIL</h4>
<p><a href="#">teerapuch@hotmail.com</a></p>
 
<ul class="social-links">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
</ul>
</div><!-- contact-details-->
</div>
</div><!--end from-->
 
<?php get_footer(); ?>

จะเรียกใช้ ให้ไปที่ Page Attribute นั้นๆ แล้วเลือกเทมเพลทเป็น Contact ตัวใหม่ที่เราสร้างขึ้นมานี้
สุดท้าย เราก็ตั้งชื่อ Slug สำหรับเรียก page นี้ว่า contact ครับก็จะเป็นอันจบ (url หรือ ลิ้ง)

จากนั้นเราก็ไปเรียกเพจนี้ที่หน้าเว็บไซต์กันได้เลยครับ

http://teerapuch.com/2016/wordpress/page-template/

—

ข้างบนเข้าใจง่ายกว่านะ
มาดูการอธิบายแบบนี้มั่ง

สร้าง Custom Page Template

ปกติแล้ว ในการสร้าง Page ขึ้นมาจะมีการเรียกใช้ page.php ในการแสดงผลให้ Page ทุก Page
แต่ถ้าเราต้องการให้สร้าง Page ที่แสดงผลไม่เหมือน Page อื่นๆทำไง?

วิธีแรก
สร้าง page-slug.php เพื่อหน้านั้น
ให้สร้าง page-xxx.php โดย xxx คือ slug หรือถ้าให้ดูอย่าง ๆ ง่าย slug จะคือ xxx (อยู่หลังสุดของ url)
(http://cymiz.com/xxx/)

slug คือ xxx ให้เราสร้าง page-xxx.php ขึ้นมา
หลังจากนี้หน้า Pages อื่น ๆ จะใช้งาน page.php
แต่หน้า xxx จะเรียกใช้งาน page-xxx.php เท่านั้น

ถ้าเราต้องการมีอีก 2 หน้าที่ต้องการให้เหมือนกับหน้า xxx ละ เราก็ต้องสร้าง page-xxx.php ขึ้นมาอีกสองไฟล์ แล้วถ้ามีอีก 10 หน้าละ เราคงมีไฟล์เต็ม Folder Theme เลย ดังนั้นมาดูวิธีที่สองกัน

ถ้าสร้างเป็น xxx.php จะไม่จำเป็นต้องอ้างอิง url slug xxx นั้น

วิธีสอง
สร้าง Custom Page Template
วิธีที่สองนั้นก็คือ หัวข้อของเรานั่นเอง
โดยวิธีสร้าง Custom Page Template นั้นก็ไม่ได้ยาก
สมมติเราสร้างไฟล์ขึ้นมาว่า page_test.php เพื่อสร้าง Test Template ขึ้นมา ในไฟล์ page_test.php เราต้องขึ้นหัวด้วย

<?php
/*
Template name: XXXXX
*/
?>

เราสามารถใส่ชื่อ Template ของเราว่าอะไรก็ได้ โดยแทนที่คำ XXXXX ในตัวอย่าง อย่างเช่น

<?php
/*
Template name: Test
*/
?>

โดย Template ที่เราสร้าง จะปรากฎให้เราเลือกเวลาเราสร้าง หรือแก้ไข Page
ดังนั้นถ้าเรามีหน้าซัก 10 หน้าที่ต้องการใช้ Template นี้ ก็แค่เลือกให้ใช้งานโดยไม่ต้องไปสร้างไฟล์ ให้เยอะแยะรก Theme

// สร้าง File แล้วก็เขียน Code ลงไปด้วย (เอาcodeจาก page.php หรือ ไฟล์ อื่นๆมาดัดแปลงใส่ไป)