มาถึงตอนนี้ผมคิดว่าคุณคงจะคุ้นเคยกับโครงสร้างของ sidebar บ้างแล้วนะครับ ในบทนี้ผมจะสอนให้คุณใส่รายการ Page-Link ไว้ใน sidebar เมื่อทำ sidebar เสร็จแล้วผมจะสอนวิธีการทำให้ sidebar ที่เราสร้างกันมา เป็น widget

นำโค้ดข้างล่างนี้ใส่ไว้บนส่วน Categories (ที่ทำไว้ในบทที่แล้ว) ดังรูป

<?php wp_list_pages(); ?>

ทีนี้ก็บันทึกไฟล์ และรีเฟรชเว็บเบราเซอร์ดูความเปลี่ยนแปลงที่เกิดขึ้น

โดยปกติแล้วถ้าติดตั้งบล็อกใหม่ หากคุณยังไม่ได้เพิ่มหน้าเพจ มันจะมีเพียงหน้าเดียวคือ About ส่วนในรูปข้างต้นนั้น ผมได้เพิ่มเพจเข้าไปเองมันจึงแสดงออกมาหลายเพจและหลายระดับ

ไปที่ View > Page Source เพื่อดูว่าฟังก์ชั่น wp_list_pages() มันคืนค่าอะไรออกมาให้เรามั่ง ก็ปรากฏว่ามันทำโครงสร้างพวก ul li ให้เราเสร็จเรียบร้อย ดังตัวอย่างข้างล่างนี้

อันดับแรกเลย มันเอา list item(LI) ครอบทุกสิ่งทุกอย่างที่มันพิมพ์ออกมาจากฟังก์ชั่น wp_list_pages() ต่อมามันตั้งชื่อหัวข้อในส่วนนี้ว่า Pages ต่อมามันเพิ่ม unordered list (UL) ไว้ใต้ชื่อหัวข้อ(Page) ท้ายสุด มันซ้อน ชุดของแท็ก <li>และ</li> เข้าไปอีกโดย <li> แต่ละชุดก็คือลิงค์ไปยังเพจต่าง ๆ

จะสังเกตุเห็นว่าขนาดตัวอักษรของ “Pages” มันจะเล็กกว่า “Categories”

วิธีทำให้มันเท่ากันคือ ใส่แอทริบิวท์ ‘title_li=<h2>Pages</h2>’ ให้ฟังก์ชั่น wp_list_pages()

กดบันทึกอีกครั้งและ รีเฟรชเบราเซอร์สังเกตุความเปลี่ยนแปลง

title_li เป็นแอทริบิวท์ที่ใช้สำหรับปรับแต่งชื่อหัวข้อในส่วนของเพจ ส่วน <h2>Pages</h2> คือค่าที่เราใส่ให้กับแอทริบิวท์ title_li

ปรับแต่งอีกนิดหน่อย:

ในตัวอย่างของผมจะเห็นว่าเพจมี 4 ระดับ มันจึงใหญ่เกินไปที่จะวางอยู่ใน sidebar ผมจึงคิดว่า เราควรจำกัดระดับของเพจที่แสดงออกมา วิธีทำก็ไม่ยากเพียงแค่เพิ่มแอทริบิวท์ dept และใส่ค่าให้มันเป็น 3 เข้าไปในฟังก์ชั่น wp_list_pages()

จะสังเกตุเห็นว่าใส่ depth=3& เข้าไป แทนที่จะเป็น depth=3 เครื่องหมาย & นั้นเอาไว้เพื่อคั่นแอทริบิวท์ depth และ title_li ออกจากกัน

ผลที่ได้จะออกมาเป็นดังรูป คือ มีแค่สามระดับ