กำหนดขนาด รูปภาพ ใน wordpress theme

การกำหนดขนาดของรูปภาพที่ใช้ใน  wordpress theme  เช่น ขนาดรูป post-thumbnail หรือขนาดของรูปที่แทรกในโพส์ต ของเรา  ถ้ามองดูแล้วสำหรับคนที่เขียนบทความไม่เยอะมากอาจจะไม่พบปัญหามากเท่าไร เพราะ wordpress เอง ก็มีส่วนให้เราเข้าไปแก้ไข หรือกำหนดหนดขนาด กว้าง *ยาว ของรูปภาพที่ใส่เข้าไปได้อยู่แล้ว เช่น ถ้าเป็นรูปที่ post-thumbnail ก็กำหนดให้เล็กหน่อย เป็นขนาด 150 * 150 pixels หรือถ้าเป็นรูปที่เราแทรกใส่ใน บทความ ก็ต้องกำหนดขนาดของรูปให้พอดีกับ ขนาดความกว้าง ของส่วน single  post ใน theme  ถ้ารูปที่เราแทรกเข้ามามีขนาดใหญ่เกิน ผลลัพธ์ของหน้าเวบที่ได้อาจดูไม่สวย

เราจะกำหนดขนาด รูปภาพ ใน wordpress themeได้อย่างไร?

ถ้าเราไม่อยากแก้ไขขนาดของรูปบ่อยครั้ง ใน wordpress เองก็มีฟังก์ชัน ที่เอาไว้กำหนดขนาดของรูปภาพที่เราต้องการใช้แต่ละส่วนไว้ ฟังก์ชันที่ว่าคือ

<?php

add_image_size( $name, $width, $height, $crop );

?>

การใช้งานก็ต้องมีการกำหนด พารามิเตอร์ให้มันหน่อย ซึ่งมันก็มีทั้งหมด 4 ตัว

1.$name : ใส่ชื่อครับ กำหนดได้เลยว่าจะให้ขนาดที่เราสร้างขึ้นมาชื่ออะไร แต่กำหนดให้มันสอดคล้องกับวัตถุประสงค์ที่เราสร้างหน่อย เพราะว่ามันจะมีผลตอนที่เราเรียกใช้ จะได้ไม่สับสน เช่น post-thimbnail เป็นต้น

2.$width: กำหนดความกว้าง หน่วยเป็น pixels

3.$height :กำหนดความสูง หน่วยเป็น pixels

4.$crop: กำหนดให้ตัดส่วนที่เกินออก หรือเป็นแบบย่อขนาด ถ้าต้องการใช้ก็ใส่ “true” มันก็จะตัดรูปส่วนที่เกินกำหนดออก ตามพารามิเตอร์ $width, $height ถ้าไม่ต้องการใช้ก็ไม่ต้องใส่อะไรลงไป เพราะ default คือ  false

การใช้งาน add_image_size( )

1.สร้าง ฟังก์ชัน ใน function.php ตามตัวอย่าง

function mytheme_setup() {
	add_image_size('featured-thumbnail',640,320, true);
	add_image_size('x-large',800,800, false);
}
add_action( 'after_setup_theme', 'mytheme_setup' );

ใส่ add_action( ‘after_setup_theme’, ‘mytheme_setup’ ); เพื่อให้ฟังก์ชันที่เราใส่ ทำงานเมื่อเริ่มหน้าเวบ

2.การเรียกใช้งาน ก็ให้ใช้ชื่อที่เรากำหนดไว้เป็น $tag ของฟังก์ชัน เช่น ต้องการเรียกใช้ ฟังก์ชัน the_post_thumbnail() เพื่อเรียก รูปthumbnail ที่เรากำหนดไว้ตอนเขียนบทความ แต่ให้มีขนาดตามที่เรากำหนด (‘featured-thumbnail’,640,320, true)

<?php the_post_thumbnail('featured-thumbnail');
// Inserts image with our defined dimensions ?>

รายละเอียดเพิ่มเติม http://codex.wordpress.org/Function_Reference/add_image_size

บทความที่เกี่ยวข้อง :