WordPress เป็นเครื่องมือที่ดีมากๆเลยนะครับในการใช้พัฒนาเว็บไซต์ เดี๋ยวนี้ WordPress พัฒนาไปไกลมากๆ มีฟังก์ชั่นเจ๋งๆที่หลากหลาย สำหรับฟังก์ชั่นที่ผมจะมาแนะนำในบทความเรื่องนี้จะเกี่ยวกับการใส่รูปภาพประกอบบทความ ที่เรียกว่า “Featured Image” ครับ เจ้า Featured Image เนี่ยโดยหลักแล้วมันจะไม่ใช่รูปที่ไม่ได้เป็นส่วนหนึ่งของบทความ แต่ว่าจะเป็นประมาณภาพ Thumbnail อ่ะครับ คือเป็นเหมือนภาพเปิดตัวนั่นเอง แต่ในบทความนั้นจะลงภาพนี้หรือไม่ลงก็ได้ครับ
พูดอีกอย่างนึงภาพ Featured Image ก็เหมือนกับการเขียน Title ของบทความครับ มันจะเป็นภาพที่ช่วยสื่อให้คนเห็นแล้วรู้ว่าบทความนี้เกี่ยวกับอะไร คือ title คือชื่อบทความที่เป็นข้อความ ส่วน Featured Image ก็จะเป็นชื่อบทความแต่เป็นรูปภาพ พูดแบบนี้พอจะเข้าใจไหมครับ? ฮ่าๆ
ทีนี้มาดูกันครับว่า Featured Image สามารถใช้ใน WordPress ได้อย่างไร
[thetext]เปิดใช้งาน Featured Image ในธีม[/thetext]
ฟังก์ชั่นของ featured image นั้นจะใช้งานได้ก็ต่อเมื่อธีมนั้นต้องทำการระบุก่อนว่าต้องการจะสนับสนุนการใช้งานฟังก์ชั่นนี้ ซึ่งเราสามารถที่จะเปิดการใช้งานฟังก์ชั่นนี้ได้ ด้วยการใช้คำสั่งนี้เพิ่มลงไปในไฟล์ functions.php ครับ
add_theme_support( 'post-thumbnails' );
เจ้าคำสั่งด้านบนนี้จะเป็นการเปิดใช้งานให้มีการใช้ featured image ได้ทั้งสำหรับ post และ page แต่ถ้าหากว่าคุณต้องการจะให้สนับสนุนการใช้งานฟังก์ชั่น featured image เพียงแค่ post หรือ page เท่านั้น ก็สามารถที่จะทำได้โดยใช้โค้ดนี้แทนครับ
add_theme_support( 'post-thumbnails', array( 'post' ) );
หรือ
add_theme_support( 'post-thumbnails', array( 'page' ) );
[thetext]แสดง Featured Image ในธีมของคุณ[/thetext]
เมื่อคุณเปิดใช้งานสำหรับใช้ featured image แล้ว ถ้าคุณต้องการให้แสดงภาพนี้ก็ใช้คำสั่งนี้เขียนลงใน loop ของธีมของคุณได้เลยครับ
<?php if ( has_post_thumbnail() ) the_post_thumbnail(); ?>
มาดูกันว่าคำสั่งด้านบนมันคืออะไร … คำสั่ง has_post_thumbnail จะเป็นการเช็คจาก post id นั้นๆว่า มีการใช้รูปภาพ featured image หรือเปล่า ซึ่งถ้ามีก็จะแสดงบนธีมของเราครับ
[thetext]การตั้งค่าสำหรับ featured image[/thetext]
WordPress มีความยืดหยุ่นมากๆครับสำหรับการใช้งาน featured image เพราะว่าในบางทีคุณเองอาจจะอยากปรับเปลี่ยนค่าต่างๆของมัน ยกตัวอย่างเช่น ต้องการจะเปลี่ยนค่าความกว้างและความยาวของ featured image ซึ่งก็แน่นอนครับ ทำได้ง่ายๆเช่นเดียวกัน ด้วยการใช้คำสั่งต่อไปนี้
set_post_thumbnail_size( 100,120, false );
คำสั่ง set_post_thumbnail_size จะมีการส่งค่าไปสามตัว นั่นก็คือ ความกว้าง ความสูง และการครอปภาพให้ได้ตามขนาดครับ จากโค้ดตัวอย่างด้านบนนั้นก็หมายความว่า ผมได้ทำการตั้งค่า featured image ให้เป็นความกว้างเป็น 100px สูง 120px และไม่ต้อง crop ภาพให้ได้ตามขนาด
และในบางที เราต้องการจะเซ็ตขนาดของ featured image ไว้หลายๆขนาด เผื่อบางทีใช้งานต่างกัน เช่นในหน้าหมวดหมู่ใช้รูปแบบขนาดใหญ่ ในกล่อง related post ใช้รูปภาพขนาดเล็ก เป็นต้น ซึ่งแบบนี้ก็ทำได้เช่นเดียวกันครับ โดยการใช้คำสั่ง add_image_size
ใช้คำสั่งนี้เขียนลงในไฟล์ functions.php นะครับ
add_image_size( 'category-featured', 150, 150 , false);
add_image_size( 'single-featured', 600, 480, true );
โค้ดด้านบนมีการส่งค่าออกไปสี่ค่านั่นก็คือ ชื่อของ featured image ความกว้าง ความสูง และการครอปภาพให้ได้ตามขนาดหรือเปล่า ซึ่งพอเราจะเอาไปใช้งานในธีม เราก็เขียนคำสั่งนี้เพื่อบอกว่าต้องการจะใช้ featured image ตัวไหน ยกตัวอย่างเช่น ในหน้า category ผมต้องการจะใช้ภาพ featured image ของ category-featured ก็เขียนโค้ดนี้ลงในไฟล์ธีมของเราครับ
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'category-featured' ); } ?>
ครับ สำหรับการใช้งาน Featured Image จริงๆแล้วก็ไม่ยากเลยครับ ลองเขียนลองทดลองด้วยตัวของคุณดูนะครับ หากมีข้อสงสัย หรือปัญหาใดๆสามารถที่จะสอบถามบักสนได้ตลอดครับ ^^
