เวิร์ดเพรสธีม บทที่6_1:Page-Link
Mar 8th
มาถึงตอนนี้ผมคิดว่าคุณคงจะคุ้นเคยกับโครงสร้างของ 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 ออกจากกัน
ผลที่ได้จะออกมาเป็นดังรูป คือ มีแค่สามระดับ
กำลังสนุกเลยครับ…..รอบทความต่อเนื่องอีกนะครับ
Thank you for good information
แบบนี้ต้องลองครับ
สอนดีครับ แล้วจะลองทำตามดู ขอบคุณครับ
ขอเอาไปลองทำดูนะครับ:)
ขอบคุณครับ ได้ความรู้มากเลย
ขอบคุณค่ะ จะลองทำดูนะคะ
good job! thank for sharing.
กำลังลองเล่น wp ขอบคุณจ้า
เยี่ยมที่สุดเลยครับ ผมทำตามได้เลย
และก็จดทุกรายละเอียดเพื่อเอาไปอ่านด้วยครับ
^ ^
ขอบคุณสำหรับความีู้ครับ
ค่อนข้างยากเลยครับ แต่จะลองพยายามทำดู อ่านยาวติดกันแบบนี้ไม่เห็นภาพไว้กลับไปลองทำทีละขั้นน่าจะดีกว่า ขอบคุณสำหรับสิ่งดี ๆ ครับ