การกำหนดขนาดของรูปภาพที่ใช้ใน 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_sizecredit:
http://abxnet.com/%E0%B8%81%E0%B8%B3%E0%B8%AB%E0%B8%99%E0%B8%94-%E0%B8%82%E0%B8%99%E0%B8%B2%E0%B8%94-%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E-%E0%B9%83%E0%B8%99-wordpress-theme/