Home > Wordpress > เวิร์ดเพรสธีม บทที่6_1:Page-Link

เวิร์ดเพรสธีม บทที่6_1:Page-Link

มาถึงตอนนี้ผมคิดว่าคุณคงจะคุ้นเคยกับโครงสร้างของ 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 ออกจากกัน

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

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. September 21st, 2009 at 22:15 | #1

    กำลังสนุกเลยครับ…..รอบทความต่อเนื่องอีกนะครับ

  2. December 6th, 2009 at 17:39 | #2

    Thank you for good information

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

    แบบนี้ต้องลองครับ

  4. February 20th, 2010 at 16:29 | #4

    สอนดีครับ แล้วจะลองทำตามดู ขอบคุณครับ

  5. February 21st, 2010 at 02:01 | #5

    ขอเอาไปลองทำดูนะครับ:)

  6. March 3rd, 2010 at 00:37 | #6

    ขอบคุณครับ ได้ความรู้มากเลย

  7. March 3rd, 2010 at 00:39 | #7

    ขอบคุณค่ะ จะลองทำดูนะคะ

  8. March 3rd, 2010 at 00:41 | #8

    good job! thank for sharing.

  9. June 21st, 2010 at 17:14 | #9

    กำลังลองเล่น wp ขอบคุณจ้า

  10. September 18th, 2010 at 21:16 | #10

    เยี่ยมที่สุดเลยครับ ผมทำตามได้เลย
    และก็จดทุกรายละเอียดเพื่อเอาไปอ่านด้วยครับ

    ^ ^

  11. October 29th, 2010 at 02:34 | #11

    ขอบคุณสำหรับความีู้ครับ

  12. June 19th, 2011 at 23:08 | #12

    ค่อนข้างยากเลยครับ แต่จะลองพยายามทำดู อ่านยาวติดกันแบบนี้ไม่เห็นภาพไว้กลับไปลองทำทีละขั้นน่าจะดีกว่า ขอบคุณสำหรับสิ่งดี ๆ ครับ

  1. No trackbacks yet.