Home > Wordpress > เวิร์ดเพรสธีม บทที่ 6:Sidebar

เวิร์ดเพรสธีม บทที่ 6:Sidebar

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

Related Articles


About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. nukie
    August 22nd, 2009 at 14:47 | #1

    thank you for your knowledges :)

  2. manann
    December 4th, 2009 at 10:29 | #2

    :xขอบคุณมากๆครับ

  3. December 6th, 2009 at 17:38 | #3

    ความรู้แบบนี้ชอบจริงๆ

  4. December 6th, 2009 at 17:38 | #4

    ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ

  5. December 11th, 2009 at 13:10 | #5

    ขอบคุณครับ ช่วยได้มากเลยครับ พอดีเพิ่งหัดทำกะลังงงๆ

  6. December 14th, 2009 at 01:27 | #6

    มาเริ่มเป็นก้อที่นี้แหละ จะพยายามทำครับ

  7. December 14th, 2009 at 01:29 | #7

    ทุกทีใช้แต่ จูมล่า ยังงงอยู่ดี จะพยายามต่อไปครับ

  8. pitchmix
    May 26th, 2011 at 11:48 | #8

    ตรงขั้นตอนที่ 4 code ผิดนะครับ
    เป็นแบบนี้แทนครับ

  1. No trackbacks yet.