ฟังก์ชั่นของ featured image จะใช้งานได้ ต้องเปิดใช้งานฟังก์ชั่นก่อน

การเปิดใช้งาน ให้มีการใช้ featured image ได้ทั้งสำหรับ post และ page

add_theme_support( 'post-thumbnails' );

หรือ เปิดแค่ post หรือ page เท่านั้น ก็ได้ ดังนี้

add_theme_support( 'post-thumbnails', array( 'post' ) );
หรือ
add_theme_support( 'post-thumbnails', array( 'page' ) );

การใช้งาน

<?php if ( has_post_thumbnail() ) the_post_thumbnail(); ?>

has_post_thumbnail
เช็คจาก post id นั้นๆว่า มีการใช้รูปภาพ featured image หรือไม่ ถ้ามีให้แสดงบนธีม

ตั้งค่า featured image

เปลี่ยนความกว้างและยาว  featured image

set_post_thumbnail_size( 100,120, false );

set_post_thumbnail_size ส่งค่า กว้าง สูง และการครอปภาพให้ได้ตามขนาด
ความกว้างเป็น 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' ); } ?>

การตรวจสอบว่าธีมมี ภาพ feather image หรือไม่

<?php if ( has_post_thumbnail() ) { ?>
    <?php the_post_thumbnail('medium');    // just the Medium Image ?>
<?php 
}else{ 
?>
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png"/>
<?php
} 
?>

Featured Image  เป็นฟีเจอร์หนึ่งของระบบธีมWordPress
Post thumbnails (WordPress 2.9) เปลี่ยนชื่อมาเป็น Featured Image (WordPress 3.0)
หลักการของ Featured Image เป็นการเลือกเอารูปภาพเด่นๆ หรือรูปภาพที่แสดงถึงบทความเหล่านั้น การนำมาใช้หรือจะให้แสดงที่ตำแหน่งไหนก็แล้วแต่ธีมที่ใช้ หรือ กำหนด

หากธีมที่ใช้มีการเปิดใช้งาน Featured Image เราจะเห็น widget เล็กๆ ที่หน้า เพิ่มบทความ อยู่ด้านขวามือล่าง
(มันควรวางตำแหน่งที่เห็นง่ายและสะดวกว่านี้)

เปิดใช้งาน Featured Image  โดยการเรียกใช้ฟังก์ชัน add_theme_support ในไฟล์ functions.php

add_theme_support( 'post-thumbnails' );

หลังจากเรียกใช้ฟังก์ชันด้านบนจะเห็น widget
จากนั้นปรับโค้ดอีกหน่อย จะแล้วแต่ธีมที่ใช้ว่าจะวางโครงสร้างไว้ยังไง
ถ้าอยากให้แสดงที่หน้าหลัก (Home page) ปรับที่ index.php หรือ ให้แสดงที่หน้าบทความ ปรับที่ single.php

การใช้งาน Featured Image จะมีฟังก์ชัน the_post_thumbnail() ให้เรียกใช้
มันจะพ่นโค้ด HTML ของ Featured Image ออกมา
ก่อนเรียกใช้เช็คก่อนว่า บทความนั้นๆ มี Featured Image หรือไม่ ด้วยฟังก์ชัน has_post_thumbnail()

if ( has_post_thumbnail() ) { //ตรวจสอบก่อนว่าบทความมี Featured Image รึป่าว
    the_post_thumbnail();
}
the_content();

แล้วจะเพิ่มโค้ดไว้ตรงไหน
เปิดไฟล์ index.php หรือ single.php หรือ home.php แล้วก็ให้หาคำว่า the_content() แล้วก็ให้เพิ่มโค้ดเข้าไป

https://codex.wordpress.org/Post_Thumbnails

แสดงภาพตัวอย่างอัตโนมัติกรณีไม่ได้ตั้ง Featured Image

ปกติแล้วเวลาเราออกแบบธีมเวิร์ดเพรส  มักจะออกแบบมาเผื่อให้มี Featured Image (อีกชื่อคือ Post Thumbnail) กันอยู่แล้ว  ปัญหาคือเวลาเอาไปใช้จริงๆ เรากลับไม่ได้ตั้งภาพตัวอย่างให้กับทุกๆ โพสต์ แล้วมันอาจะแสดงผลหาภาพไม่เจอ แต่ปัจจุบันมีโค๊ดรุ่นใหม่ๆ ถ้าหาภาพไม่เจอ ระบบจะไม่แสดงภาพ เจ๋งปะล่ะ!

ปกติจะใช้วิธีเช็ค if … else กับฟังก์ชัน has_post_thumbnail()  ว่ามีภาพ Featured Image หรือไม่
ถ้าออกมาเป็น false จึงค่อยแสดงภาพที่เตรียมไว้ เป็นภาพ defualt

if(has_post_thumbnail()){
	the_post_thumbnail();
}else{
	echo '<img src="http://placehold.it/390x280">';
}

สามารถทำให้เหลือแค่ the_post_thumbnail() อันเดียวโดดๆ ได้  ด้วย Filter

เพิ่มฟังก์ชันสำหรับกำหนด Featured Image อัตโนมัติ

ให้เราสร้างฟังก์ชันขึ้นมาตัวหนึ่งในไฟล์ functions.php

function default_post_thumbnail( $html ) {
 if(!$html){
 $html = '<img src="http://placehold.it/390x280" class="img-responsive">';
 }
 
 return $html;
}

มันจะส่ง HTML ที่พร้อมสำหรับการแสดงผลเข้ามาให้ (ผ่าน $html)
ถ้าไม่มีการกำหนด Featured Image เอาไว้ WordPress จะไม่สร้าง HTML ส่วนนี้ไว้ให้  ทำให้ $html ที่ถูกส่งเข้ามานั้นเป็นค่าว่าง

เราก็ใช้ตรงนี้ ตรวจสอบว่า $html นั้นเป็นค่าว่างหรือไม่ ถ้าใช่ก็แปลว่าไม่มี Featured Image
ก็แก้ $html ใหม่แล้วส่งกลับออกไป (ถ้ามีค่ามา  เราก็ไม่แก้  แล้วส่งค่าเดิมกลับออกไป)

เรียกใช้ Filter

จากนั้น add_filter()

add_filter( 'post_thumbnail_html', 'default_post_thumbnail', 10);

full code

function default_post_thumbnail( $html ) {
	if(!$html){
		$html = '<img src="http://placehold.it/390x280" class="img-responsive">';
	}

	return $html;
}

add_filter( 'post_thumbnail_html', 'default_post_thumbnail', 10);

กรณีในเว็บมี Post Thumbnail หลายขนาด

บางโค๊ดเก่า แสดงภาพตัวอย่างออกมาขนาดเดียว

วิธีแก้
บอกให้ add_filter() ส่งอาร์กิวเมนต์เพิ่มเติมด้วย เพื่อจะเอาขนาดภาพที่ต้องการมาใช้
ฟิลด์เตอร์ post_thumbnail_html มีอาร์กิวเมนต์ทั้งหมด 5 ตัว
และอาร์กิวเมนต์ $size อยู่ลำดับที่ 4  จึงต้องแก้ add_filter() ให้ส่งอาร์กิวเมนต์เข้าไปในฟังก์ชันทั้งหมด 4 ตัว (เพื่อจะใช้ตัวที่ 4 ตัวเดียว)

add_filter( 'post_thumbnail_html', 'default_post_thumbnail', 10, 4);

จากนั้น ไปแก้ defaulth_post_thumbnail() ให้รับอาร์กิวเมนต์เพิ่มให้ด้วย

function default_post_thumbnail( $html, $post_id, $post_thumbnail_id, $size ) {
     ...
}

กรณีใช้ placehold.it หรือบริการ placeholder image ต่างๆ

กรณีใช้ placeholder จากเว็บ placehold.it ซึ่งสามารถกำหนดขนาดลงไปตรงๆ ทาง URL ได้เลย  วิธีจะซับซ้อนต้องหาขนาดกว้างยาวแล้วค่อยแปะลงไป

$size ที่ส่งเข้ามาจะมาเป็นชื่อขนาด  เช่น thumbnail, medium, large ดังนั้นเราต้องเอาขนาดนี่ไปหาขนาดกว้างยาวจริงๆ ที่ตั้งไว้อีกที

ใน WordPress จะมี predefined ไว้ให้ 3 ขนาด thumbnail, medium,  large
เก็บค่าในตาราง wp_options ส่วนขนาดอื่นๆ ที่เราเพิ่มเข้าไปผ่านทาง add_image_size() จะถูกเก็บอยู่ในตัวแปรชื่อว่า $_wp_additional_image_sizes

โค๊ดส่วนเช็คขนาด
predefined สามารถใช้ get_option() ดึงได้เลย ขนาดอื่นๆ ต้องไปดึงจากตัวแปรแทน และก็แก้ $html ใหม่  จบ

global $_wp_additional_image_sizes;
if(!$html){
 if (in_array($size, array('thumbnail', 'medium', 'large'))) {
 $width = get_option($size."_size_w");
 $height = get_option($size."_size_h");
 }elseif((isset( $_wp_additional_image_sizes[$size]))){
 $width = $_wp_additional_image_sizes[$size]['width'];
 $height = $_wp_additional_image_sizes[$size]['height'];
 }
 $html = '<img src="http://placehold.it/'.$width.'x'.$height.'/lava" class="img-responsive '.$size.'">';
}

function default_post_thumbnail( $html, $post_id, $post_thumbnail_id, $size ) {
 global $_wp_additional_image_sizes;
 if(!$html){
 if (in_array($size, array('thumbnail', 'medium', 'large'))) {
 $width = get_option($size."_size_w");
 $height = get_option($size."_size_h");
 }elseif((isset( $_wp_additional_image_sizes[$size]))){
 $width = $_wp_additional_image_sizes[$size]['width'];
 $height = $_wp_additional_image_sizes[$size]['height'];
 }
 $html = '<img src="holder.js/'.$width.'x'.$height.'/lava" class="img-responsive '.$size.'">';
 }
 
 return $html;
}
 
add_filter('post_thumbnail_html', 'default_post_thumbnail', 10, 4);