wordpress

Template สร้างใหม่สำหรับใช้กับบาง Page บน WordPress

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

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

เรื่องนี้ค่อนข้างง่าย และใช้เวลาไม่นาน คิดว่า คนที่ทำ wordpress อยู่แล้วน่าจะเข้าใจง่าย แต่สำหรับคนเพิ่งเริ่มต้น อาจจะกำลังมองหาอยู่ เช่น อยากจะ Design ใหม่ ให้กับหน้าที่เป็น Contact Us สำหรับติดต่อไปยังสาขา เพื่อให้แตกต่างกับหน้าที่ติดต่อมาหน้าหลัก เอาละครับ ทีนี้สิ่งที่เราจำเป็นจะต้องรู้ ก็คือเรื่องของ โครงสร้าง Template Structure ของทาง wordpress กันนะครับ ว่าหลักๆแล้ว เค้ามีอะไรกันอยู่บ้าง

Archives, Categories, and Special Pages

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

Static Front Page

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

uncode front page template

uncode front page

Author Page

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

Author Page

Author Page

 

Category Page

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

category page

category page

Tag Page

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

Archive Page

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

Search Page

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

search

search

Error 404 Page

อันนี้ ผมชอบเวลาไปดู เว็บคนอื่นเค้าสร้างกันนะ ชอบตรงเว็บไหน แสดงให้เรารู้ว่า เออ…หน้านี้มันหายไป หรือ url มันหายไป แต่เรายังคงอยู่ในเว็บไซต์นี้นะ

404

404

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 ไหนหรือ ไอดี อะไร มาดูกันได้ในตอนสร้างหรือแก้ไข หน้าเพจนั้นๆนั้นแหละครับ เช่น

service

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

เอาละ ทีนี้ลองมาดูวิธีการสร้างหน้า สำหรับ บางเพจกันเลยครับ โดยผมจะเริ่มจาก การสร้าง Page ที่ชื่อว่า contact เพราะจะเอาไว้สำหรับติดต่อกับมาที่ Office ก็แล้วกัน

เริ่มจากการสร้างไฟล์ PHP ขึ้นมาโดยตั้งชื่อว่า page-contact.php

page file

page file

จากนั้นให้ใส่ 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="#">[email protected]</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 ตัวใหม่ที่เราสร้างขึ้นมานะครับ

Attribute

Attribute

สุดท้าย เราก็ตั้งชื่อ Slug สำหรับเรียก page นี้ว่า contact ครับก็จะเป็นอันจบ

Slug

Slug

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

New Contact Page

New Contact Page

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

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

Line ID: teerapuh
Mail : teerapuch [@] hotmail.com

Credit Photo
http://www.shutterstock.com/blog/top-10-creative-404-error-pages
Uncode WordPress Theme