เวิร์ดเพรสธีม บทที่ 6:Sidebar
Mar 8th
เคยลองดู sidebar บ้างหรือยังครับ ในตอนแรกมันอาจจะดูยุ่งยากนิดนึง แต่ถ้าเข้าใจโครงสร้างมันแล้ว คุณจะรู้สึกว่าการสร้าง sidebar และใส่รูปแบบการแสดงผลให้มันง่ายนิดเดียว! จริงๆ นะ
ก่อนที่จะไปเริ่มทำ sidebar ไฟล์ index ต้องเหมือนตามนี้นะครับ
ขั้นตอนที่ 1: นำกล่อง div ตามโค้ดข้างล่างนี้ไปไว้ระหว่างแท็กปิด container และ แท็ก</body>
<div class=?sidebar?>
</div>
ขั้นตอนที่ 2: ใส่แท็ก unordered list ไว้ใน div ชื่อ sidebar ที่สร้างไว้เมื่อกี้
<ul> – เปิดแท็ก unordered list
</ul> – ปิดแท็ก unordered list
list ในภาษา html ที่ใช้กันโดยทั่วไปจะมีอยู่ 2 ประเภท คือ Unordered Lists (เป็นเครื่องหมายจุดทึบ) และ Ordered Lists (มีหมายเลขกำกับแต่ละรายการ เรียงจาก 1 เป็นต้นไป)
ขั้นตอนที่ 3: เพิ่ม list item (LI) ไว้ใน unordered list (UL) และเพิ่มแท็กหัวข้อรอง(h2) ไว้ในแท็ก <li>
<li><h2><?php _e(?Categories?); ?></h2>
</li>
คุณจะสังเกตุเห็นว่าผมย่อหน้าเข้าไปก่อนที่จะเริ่มหน้าแท็ก <li> เพื่อให้ดูเป็นระเบียบ
<li> – เปิดแท็ก list item
<h2> – เปิดแท็กหัวข้อรอง
<?php _e(?Categories?); ?> – พิมพ์ข้อความ “Categories” เพื่อใช้เป็นหัวข้อ
</h2> – ปิดแท็กหัวข้อรอง
</li> – ปิดแท็ก list item
ถ้าคุณทำธีมใช้เอง คุณไม่จำเป็นต้องเอา <?php e(? ?); ?> ครอบข้อความข้างต้นก็ได้นะครับ ให้ใส่ <h2>Categories</h2> ไปเลย
กดบันทึกไฟล์ index.php และรีเฟรชเว็บเบราเซอร์ ผลลัพธ์จะออกมาดังรูป
ขั้นตอนที่ 4: นำโค้ดข้างล่างนี้ไปไว้ในแท็ก <li> ต่อจากหัวข้อเมื่อกี้
<ul>
<?php wp_list_cats(?sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul>
ความหมายของโค้ดมีดังนี้ครับ
<ul> – เปิดแท็ก unordered list ซ้อนเข้าไปอีกชั้นนึง
<?php wp_list_cats(); ?> – เป็นฟังก์ชันที่เวิร์ดเพรสจัดเตรียมไว้ให้ เรียกรายการลิงค์ไปยังแต่ละ category มาแสดง
</ul> – ปิดแท็ก unordered list
บันทึกไฟล์ และรีเฟรชเว็บเบราเซอร์ จะเห็นว่าลิงค์ไปยังแต่ละ category จะแสดงออกมาดังรูป
ในตอนที่คุณเพิ่มบทความของบล็อคเวิร์ดเพรส ถ้าคุณไม่ได้ระบุประเภท (category) ของบทความ เวิร์ดเพรสจะจัดให้อยู่ในประเภท Uncategorized โดยปริยาย ดังนั้นถ้าคุณเพิ่มบทความแล้วไม่ได้เลือกประเภทไว้ category ที่แสดงออกมาตอนนี้ก็จะมีอยู่แค่อันเดียวคือ Uncategorized
คำอธิบายเพิ่มเติม
- sort_column=name – หมายความว่าแสดง category เรียงตามลำดับตัวอักษร
- optioncount=1 – หมายความว่าแสดงจำนวนบทความที่อยู่ในแต่ละ category ด้วย
- hierarchial=0 – หมายความว่าแสดง category ทั้งหมดให้อยู่ในระดับเดียวกัน (โดยปกติแล้ว category จะมีระดับของมัน หรือสามารถมี category ย่อยได้ เช่น Sub Category อยู่ภายใต้ Personal อีกที)
- & – ใช้ & เพื่อคั่นแต่ละ attribute
ทำไมผมไม่ใส่แท็ก <li> และ </li> ครอบฟังก์ชัน <?php wp_list_cats(); ?>:
ทั้งนี้ก็เพราะว่า เมื่อเราเรียกใช้ฟังก์ชัน wp_list_cats(); เพื่อให้แสดงรายการลิงค์ไปยังแต่ละ category มันจะใส่แท็ก <li> และ </li> ครอบแต่ละลิงค์มาให้โดยอัตโนมัติ ถ้าไม่เชื่อก็ไปที่ View > Page Source แล้วเลื่อนลงมาด้านล่างดูได้เลยว่าเป็นไปตามที่ผมบอกหรือไม่
การทำ sibebar เราจำเป็นจะต้องยุ่งเกี่ยวกับ unordered list และ list items อย่างหลีกเลี่ยงไม่ค่อยจะได้ ดังนั้นโปรดจำกฏข้อหนึ่งไว้ให้แม่นครับ (ปิดแท็กตามลำดับ)
thank you for your knowledges :)
:xขอบคุณมากๆครับ
ความรู้แบบนี้ชอบจริงๆ
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ
ขอบคุณครับ ช่วยได้มากเลยครับ พอดีเพิ่งหัดทำกะลังงงๆ
มาเริ่มเป็นก้อที่นี้แหละ จะพยายามทำครับ
ทุกทีใช้แต่ จูมล่า ยังงงอยู่ดี จะพยายามต่อไปครับ
ตรงขั้นตอนที่ 4 code ผิดนะครับ
เป็นแบบนี้แทนครับ