เคยลองดู 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 อย่างหลีกเลี่ยงไม่ค่อยจะได้ ดังนั้นโปรดจำกฏข้อหนึ่งไว้ให้แม่นครับ (ปิดแท็กตามลำดับ)