Home > Wordpress > เวิร์ดเพรสธีม บทที่ 5 : การวนลูป(Loop)

เวิร์ดเพรสธีม บทที่ 5 : การวนลูป(Loop)

wordpressธีม บทที่ 5 : การวนลูป(The Loop)

การวนลูปมีความสำคัญมาก เราใช้การวนลูปเพื่อเรียกแต่ละบทความในบล็อกมาแสดง ณ ตอนนี้คุณก็ได้เรียนรู้การสร้างธีมสำหรับwordpressมาบ้างเล็กน้อย มาทบทวนกันอีกทีดีกว่าว่าเรียนอะไรไปบ้างแล้ว

เรียนอะไรมาบ้างแล้ว?

เริ่มบทที่ 5 กันได้แล้ว

สิ่งที่ต้องทำก็เหมือนเดิมครับ เปิดโฟลเดอร์ธีม tutorial ขึ้นมา, เปิดเบราเซอร์ไปที่ wordpress ของคุณ, เปิดไฟล์ index.php ขึ้นมา

โค้ดที่ต้องมีในไฟล์ index.php

พึงระลึกไว้เสมอว่า วิธีการเรียนรู้ที่ดีสำหรับชุดการเรียนรู้นี้ คือ พิมพ์โค้ดเอง ห้ามคัดลอกไปแปะ

ขั้นตอนที่ 1

เพิ่ม DIV ไว้ใต้ส่วนหัว(header หรือ ที่วงสีแดง) ตั้งชื่อให้ ID ว่า "container" และต่อจากนี้ไปผมจะเรียกกล่องนี้ว่า กล่องเนื้อหา ดังนี้

<div id=”container”>

</div>

DIV นี้มีไว้เพื่ออะไร? – มีไว้เพื่อแยกส่วนเนื้อหาที่อยู่ในกล่องเนื้อหาออกจากโค้ดอื่น ๆ ที่จะตามมา เช่น เมนูด้านข้าง และ ส่วนท้ายบล็อก

ขั้นตอนที่ 2

เพิ่มโค้ดต่อไปนี้ไว้ระหว่าง DIV ที่สร้างไว้เมื่อกี้

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

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

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

อธิบายโค้ดวนลูป

  • if(have_posts()) คือ โค้ดที่เอาไว้เช็คว่ามีบทความในบล็อคหรือไม่
  • while(have_posts()) ถ้ามีบทความอยู่ในบล็อคให้วนลูปตามจำนวนบทความที่มีอยู่ และขณะที่วนลูปในแต่ละรอบให้เรียกใช้ฟังก์ชัน the_post()
  • the_post() คือ เรียกข้อมูลของบทความมาแสดง
  • endwhile; คือ จบการทำงาน while()
  • endif; คือ จบการทำงาน if()

ขั้นตอนที่ 3

ในบทก่อนหน้านี้คุณได้เรียนรู้วิธีเรียกชื่อบล็อกมาแสดงด้วยฟังก์ชัน bloginfo(‘name’)แล้ว ในตอนนี้คุณจะได้เรียนรู้วิธีเรียกชื่อบทความมาแสดงระหว่างการวนลูป

พิมพ์ <?php the_title(); ?> ไว้หลัง the_post(); ?> และ ก่อน <?php endwhile; ?>

กดบันทึกไฟล์ index.php รีเฟรชเว็บเบราเซอร์ คุณจะเห็น Hello World แสดงอยู่ใต้คำอธิบายบล็อก บล็อกที่ผมใช้เป็นตัวอย่างนี้ผมได้โพสบทความทดสอบไว้หลายบทความ  ชื่อบทความที่ผมตั้งนั้น เหมือนกันทุกบทความ และ ในส่วนนี้ยังไม่ได้มีการจัดตำแหน่ง/รูปแบบการแสดงผล ผลลัพธ์จึงออกมาเป็น Hello World ติดกันเป็นพืด

ขั้นตอนที่ 4

เปลี่ยนชื่อบทความที่เป็นข้อความธรรมดาให้เป็นลิงค์ ยังจำวิธีที่ใช้เปลี่ยนชื่อบล็อกให้เป็นลิงค์ได้ไหมครับ วิธีเดียวกันเลย คือ นำ <a href=”#”> และ </a> ไปครอบ <?php the_title(); ?>

กดบันทึก index.php และรีเฟรชเว็บเบราเซอร์ จะเห็นได้ว่าชื่อบทความได้เปลี่ยนเป็นลิงค์แล้ว แต่ยังไม่ได้ระบุให้ชี้ไปที่ไหน การทำให้ลิงค์ชี้ไปยังหน้าที่มีบทความนี้แสดงอยู่ ให้แทนที่เครื่องหมาย # ด้วย the_permalink() ดังนี้

<a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a>

the_permalink() คือ ฟังก์ชันภาษาphp ที่เรียกที่อยู่ของแต่ละบทความมาแสดง

กดบันทึกและรีเฟรชเว็บเบราเซอร์ นำเมาส์ไปวางไว้เหนือลิงค์แต่ละลิงค์ แล้วดูที่แถบสถานะของเบราเซอร์ url ที่ปรากฏ

ถ้าบทความที่คุณโพสมีมากกว่าหนึ่งบทความ คุณจะเห็นว่าแต่ละลิ้งค์มี url ไม่เหมือนกัน แต่ว่าชื่อบทความเหล่านั้นยังคงอยู่ในบรรทัดเดียวกัน วิธีแยกให้มันอยู่คนละบรรทัดทำได้ด้วยการใส่ <h2> และ </h2> ครอบลิงค์ไว้ดังนี้

<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

จำ H1 ที่ใช้ครอบชื่อบล็อกได้ไหมครับ นั่นคือหัวข้อหลัก ส่วน H2 คือหัวข้อย่อย  ให้กดบันทึก และรีเฟรชเบราเซอร์ เพื่อดูความเปลี่ยนแปลง

มาถึงตอนท้ายของบทนี้ โค้ดที่คุณได้พิมพ์ไปทั้งหมดมีดังนี้

หมายเหตุ:

ถ้าคุณยังไม่ได้โพสบทความเลย ให้โพสบทความไว้หลาย ๆ บทความเพื่อเอาไว้ทดสอบธีม

Related Articles


Share
Categories: Wordpress
Tags:

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. NatZ
    November 25th, 2008 at 23:42 | #1

    กำลังรออ่านอย่างตั้งใจเลยครับ

    ผมกำลังหัดสร้างเว็บแนวแบบนี้อยู่พอดีเลย ได้ความรู้ ถูกใจมากๆ

    ขอบคุณครับ :d/

  2. November 27th, 2008 at 13:56 | #2

    อธิบายได้เข้าใจดี ขอบคุณครับ :)

  3. KC
    November 27th, 2008 at 15:15 | #3

    ขอบคุณมากครับ

    สอนได้เข้าใจง่ายจริงๆครับ ขนาดผมไม่มีความรู้ด้าน php เลย แต่ก็ตั้งใจอ่านมาตั้งแต่บทแรกๆ ก็ไม่มีอะไรติดขัดเลยครับ

  4. November 28th, 2008 at 15:11 | #4

    ขอบคุณสำหรับบทความดีๆ

  5. December 4th, 2008 at 17:42 | #5

    Thanks น่ะคร้าบ :d

  6. January 19th, 2009 at 21:36 | #6

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

  7. December 6th, 2009 at 17:32 | #7

    Thank you for good information

  8. December 6th, 2009 at 17:32 | #8

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

  9. January 22nd, 2010 at 11:44 | #9

    ขอบคุณค่ะ:)

  10. February 11th, 2010 at 12:23 | #10

    บทความดีจังครับ กำลังหัดพอดีเลย :)

  11. February 11th, 2010 at 12:25 | #11

    กำลังหัดพอดีเลย แต่ใช้ไปซักพักคงเก่ง อิอิ

  12. bundit
    April 19th, 2010 at 13:22 | #12

    ขอบคุณมากมากเลยนะครับ เป็นบทความที่มีประโยชน์มากๆครับ

  13. bhuvadon
    May 4th, 2010 at 14:36 | #13

    ขอบคุณมากสำหรับบทความดีๆครับ

  14. September 24th, 2010 at 17:30 | #14

    ความรู้นี้ เอาไปต่อยอดเรื่อง wordpress ได้อีกมากมายเลยคับ

    ขอบคุณครับ

  15. December 2nd, 2010 at 13:05 | #15

    ขอบคุณมากค่ะ ถ้าไปลองทำแล้วติดอาจจะมาขอความช่วยเหลือหน่อยนะคะ :)

  16. Laxaiva
    June 1st, 2011 at 00:31 | #16

    ทำไม บทความ ตอนที่ 4 หายไปครับ ผมทำตาม 1-3 แล้วก็ 5 แต่ส่วนของบทความไม่ขึ้นน่ะครับ

  17. Laxaiva
    June 1st, 2011 at 00:45 | #17

    รู้สึกผมลัดขั้นตอน ตั้งชื่อไฟล์ทั้ง 14 ไว้ก่อนเลยเป็นปัญหา

  18. caresava
    September 7th, 2012 at 01:34 | #18

    ขอบคุณมากค่ะ สำหรับบทความดีๆ^^

  1. No trackbacks yet.