เวิร์ดเพรสธีม บทที่ 5 : การวนลูป(Loop)
Nov 25th
wordpressธีม บทที่ 5 : การวนลูป(The Loop)
การวนลูปมีความสำคัญมาก เราใช้การวนลูปเพื่อเรียกแต่ละบทความในบล็อกมาแสดง ณ ตอนนี้คุณก็ได้เรียนรู้การสร้างธีมสำหรับwordpressมาบ้างเล็กน้อย มาทบทวนกันอีกทีดีกว่าว่าเรียนอะไรไปบ้างแล้ว
เรียนอะไรมาบ้างแล้ว?
- กฏ, โครงสร้าง, ลำดับชั้นความสำคัญ ของธีม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 คือหัวข้อย่อย ให้กดบันทึก และรีเฟรชเบราเซอร์ เพื่อดูความเปลี่ยนแปลง
มาถึงตอนท้ายของบทนี้ โค้ดที่คุณได้พิมพ์ไปทั้งหมดมีดังนี้
หมายเหตุ:
ถ้าคุณยังไม่ได้โพสบทความเลย ให้โพสบทความไว้หลาย ๆ บทความเพื่อเอาไว้ทดสอบธีม
กำลังรออ่านอย่างตั้งใจเลยครับ
ผมกำลังหัดสร้างเว็บแนวแบบนี้อยู่พอดีเลย ได้ความรู้ ถูกใจมากๆ
ขอบคุณครับ :d/
อธิบายได้เข้าใจดี ขอบคุณครับ :)
ขอบคุณมากครับ
สอนได้เข้าใจง่ายจริงๆครับ ขนาดผมไม่มีความรู้ด้าน php เลย แต่ก็ตั้งใจอ่านมาตั้งแต่บทแรกๆ ก็ไม่มีอะไรติดขัดเลยครับ
ขอบคุณสำหรับบทความดีๆ
Thanks น่ะคร้าบ :d
ขอบคุณมากครับ:x
Thank you for good information
แบบนี้ต้องลองครับ
ขอบคุณค่ะ:)
บทความดีจังครับ กำลังหัดพอดีเลย :)
กำลังหัดพอดีเลย แต่ใช้ไปซักพักคงเก่ง อิอิ
ขอบคุณมากมากเลยนะครับ เป็นบทความที่มีประโยชน์มากๆครับ
ขอบคุณมากสำหรับบทความดีๆครับ
ความรู้นี้ เอาไปต่อยอดเรื่อง wordpress ได้อีกมากมายเลยคับ
ขอบคุณครับ
ขอบคุณมากค่ะ ถ้าไปลองทำแล้วติดอาจจะมาขอความช่วยเหลือหน่อยนะคะ :)
ทำไม บทความ ตอนที่ 4 หายไปครับ ผมทำตาม 1-3 แล้วก็ 5 แต่ส่วนของบทความไม่ขึ้นน่ะครับ
รู้สึกผมลัดขั้นตอน ตั้งชื่อไฟล์ทั้ง 14 ไว้ก่อนเลยเป็นปัญหา
ขอบคุณมากค่ะ สำหรับบทความดีๆ^^