Update (08/01/10): แก้ไขจาก query_posts('posts_per_page=5'); เป็น query_posts($query_string); เนื่องจากจะทำให้เราไม่สามารถใช้งาน pagination ของ Wordpress ได้

เชื่อว่าคนที่ทำเว็บด้วย Wordpress หลายๆ อาจจะเคยเจอโจทย์ที่ว่า ต้องทำหน้าแรกเป็นข่าว ในขณะที่ก็ต้องมีข้อมูลตัวหนึ่งอยู่บนส่วนบนสุดเหนือข่าวอยู่ตลอด เช่น ประกาศพิเศษ, วัตถุประสงค์ของเว็บ, ไฟล์วิดิโอ หรือข้อมูลแบบ static อื่นๆ ดังตัวอย่างรูปข้างต้น ซึ่งปกติเราคงใส่ข้อมูลพิเศษตัวนั้นลงไปในส่วนของโค้ดในธีมเลย แต่บางครั้งจะพบว่าลูกค้าต้องการเปลี่ยนแปลงในส่วนนี้ด้วยตัวเอง แม้ว่าอาจจะเปลี่ยนนานๆ ครั้ง ซึ่งแนวทางในการแก้ไขปัญหานี้มีทางเลือกคือ

• ทำ Sticky Post เพิ่มขึ้นมา ซึ่งในส่วน Sticky นี้จะอยู่ข้างบนสุดของ Post เสมอ
• แก้โค้ดธีมให้ Query ข้อมูล Post กับ Page ให้อยู่หน้าเดียวกัน

ซึ่งแนวทางการแก้ไขนี้ จะพบว่าแนวทางแรกจะมีปัญหาตรงที่ทั้ง Sticky Post และ Post ที่แสดงออกมาจะอยู่ในรูปแบบเดียวกันเสมอ เช่น มีชื่อผู้โพส มีเวลา หรือหมวดที่โพสอยู่เสมอ ซึ่งอาจจะไม่ตรงกับความต้องการกับลูกค้า จึงทำให้เราต้องทำในแนวทางที่สองแทนดังที่จะเสนอในวันนี้

หลักการในการทำให้เนื้อหาใน Post กับ Page แสดงอยู่หน้าเดียวกันคือ ใช้ฟังก์ชัน query_posts() ของ Wordpress ซึ่งเป็นฟังก์ชันในการ Query ข้อมูลได้ทั้ง Post และ Page รวมถึงสามารถใส่เงื่อนไขในรูปแบบต่างๆ ซึ่งเราจะนำเอาเงื่อนไขของฟังก์ชัน query_posts() มาทำการแสดงผล Page ก่อน แล้วจึงใช้ฟังก์ชัน query_posts() อีกรอบหนึ่งเพื่อแสดงผล Post ออกมาดังในรูปข้างต้น

สำหรับโค้ดตัวอย่างง่ายๆ ที่จะแสดง Page และ Post ในหน้าเดียวกันมีดังนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
// Query page id 12
query_posts('page_id=12');
?>
 
<?php if(have_posts()): the_post(); ?>
<div id="page-content">
        <?php the_content(); ?>
</div>
<?php endif; ?>
 
<?php
// Query latest posts
query_posts($query_string);
// Activate Read more...
global $more;    // Declare global $more (before the loop).
$more = 0;
?>
 
<?php if(have_posts()): the_post(); ?>
<div id="post-content">
        <?php the_content('Read more &raquo;'); ?>
</div>
<?php endif; ?>

บรรทัดที่ 2: เป็นการดึงข้อมูล Page ID 12 ขึ้นมาตามเงื่อนไขที่กำหนดในฟังก์ชัน query_posts
บรรทัดที่ 6-10: เป็นการแสดงเนื้อหาใน Page ID 12 ออกมาตามฟังก์ชันที่เราเรียกในบรรทัดที่ 2
บรรทัดที่ 14: เป็นการดึงข้อมูล Post ล่าสุดจำนวน Post ที่เรากำหนดไว้ใน Settings > Reading
บรรทัดที่ 16-17: เป็นการกำหนดไม่ให้แสดงข้อมูลของ Post ทั้งหมดออกมา ให้แสดงเฉพาะ Teaser ก่อน Break เท่านั้น
บรรทัดที่ 20-24: เป็นการแสดงเนื้อหาใน Post ตามฟังก์ชันที่เราได้กำหนดในบรรทัดที่ 14

สุดท้ายนี้ ขอแนะนำให้ลองอ่านการใช้เงื่อนไขทั้งหมดของ query_posts() เพื่อให้เราสามารถปรับโค้ดการดึงข้อมูลให้ตรงกับความต้องการของเราให้มากที่สุดครับ