การกำหนดขนาดของรูปภาพที่ใช้ใน wordpress theme เช่น ขนาดรูป post-thumbnail หรือขนาดของรูปที่แทรกในโพส์ต ของเรา ถ้ามองดูแล้วสำหรับคนที่เขียนบทความไม่เยอะมากอาจจะไม่พบปัญหามากเท่าไร เพราะ wordpress เอง ก็มีส่วนให้เราเข้าไปแก้ไข หรือกำหนดหนดขนาด กว้าง *ยาว ของรูปภาพที่ใส่เข้าไปได้อยู่แล้ว เช่น ถ้าเป็นรูปที่ post-thumbnail ก็กำหนดให้เล็กหน่อย เป็นขนาด 150 * 150 pixels หรือถ้าเป็นรูปที่เราแทรกใส่ใน บทความ ก็ต้องกำหนดขนาดของรูปให้พอดีกับ ขนาดความกว้าง ของส่วน single post ใน theme ถ้ารูปที่เราแทรกเข้ามามีขนาดใหญ่เกิน ผลลัพธ์ของหน้าเวบที่ได้อาจดูไม่สวย
เราจะกำหนดขนาด รูปภาพ ใน wordpress themeได้อย่างไร?
ถ้าเราไม่อยากแก้ไขขนาดของรูปบ่อยครั้ง ใน wordpress เองก็มีฟังก์ชัน ที่เอาไว้กำหนดขนาดของรูปภาพที่เราต้องการใช้แต่ละส่วนไว้ ฟังก์ชันที่ว่าคือ
1
2
3
4
5
|
<?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 ตามตัวอย่าง
1
2
3
4
5
|
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)
1
2
|
<?php the_post_thumbnail( 'featured-thumbnail' ); // Inserts image with our defined dimensions ?> |
รายละเอียดเพิ่มเติม http://codex.wordpress.org/Function_Reference/add_image_size