ทำ Thumbnail บน WordPress ด้วย Timthumb

Timthumb คือ php script ที่ใช้สำหรับปรับขนาดของภาพและ crop รูปภาพอัตโนมัติ ซึ่งสามารถกำหนดขนาดได้เอง script นี้หมาะสำหรับนำมาใช้ร่วมกับการออกแแบบ wordpress theme ที่ต้องการทำ thumbnail

ถามว่าในเมื่อ Worpdress 3 ก็มี Featured Image เพื่อมาทำ thumbnail ให้แล้ว แล้วจะมาทำอะไรยุ่งยากทำไม

คำตอบก็คือ ตัว Timthumb นั้นสามารถปรับขนาดของรูปภาพเองได้อัตโนมัติ เราก็ไม่ต้องกังวลเรื่องของขนาดรูปภาพภายหลัง ถ้าเราต้องการขยายหรือลดขนาดรูป thumbnail ที่ดึงออกมาแสดง ใน wordpress theme ของเรา

เริ่มลงมือ

1. ก่อนอื่นไปที่ timthumb เพื่อทำการโหลด script มาก่อนเลยครับ หรือเข้าไปที่หน้านี้ timthumb.php ทำการก็อปปี้โค้ด เอาไปใส่ใน notepad แล้ว save file ชื่อ timthumb.php

2. นำ file ที่โหลดมา ไปใส่ที่ folder scripts ของ wordpress theme ของเรา ถ้าไม่มี folder scripts ก็ทำการสร้างขึ้นมาเองก่อนครับ

ตัวอย่าง /wp-content/themes/my-theme/scripts/timthumb.php

3. ทำการสร้าง folder cache ไว้ใน folder scripts

ตัวอย่าง /wp-content/themes/my-theme/scripts/cache

4. ปรับ permission ของ folder  cache เป็น 777

เรียบร้อยสำหรับการเตรียมความพร้อมให้กับ script

ขั้นตอนการแก้ไข wordpress theme เพื่อที่จะใส thumbnail

1. เลือกรูปที่ต้องการทำเป็น thumbnail ใน wordpress theme

เพิ่ม custom field ชื่อ thumnail และวใส่ value เป็น url ของรูปที่ต้องการทำเป็น thumbnail

2. การนำรูปมาแสดง

การจะดึงรูปมาแสดงเป็น thumbnail นั้นเราต้องทำการเรียก script timthumb พร้อมส่ง parameter ที่เป็น url ของรูปภาพ พร้องขนาดที่ต้องการ

 <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=

<?php get_post_meta($post->ID, "thumbnail", $single = true);   ?>&amp;w=100&amp;h=150&amp;zc=1&amp;q=100" />

นำโค้ดข้างบนไปใส่ที่ while loop เพื่อให้ timthumb ดึงรูปจาก custom field ของแต่ล่ะ post จากตัวอย่างผมได้กำหนดขนาดความกว้างเป็น 100 px (w=100) สูง 150 px (h=150) คุณภาพรูป 100% (q=100)

สามารถดูตัวอย่างเพิ่มเติมได้ที่ http://www.binarymoon.co.uk/projects/timthumb/

Related posts:

  1. ฟรี สุดยอด WordPress Theme
  2. ส่งบทความจากบล๊อกลง Facebook อัตโนมัติ ด้วย NetworkedBlogs
  3. WordPress theme option framework
  4. อยากได้อะไรบอก Zaarly
  5. พื้นฐานที่ไม่ควรมองข้ามในการปรับแต่ง wordpress ให้เร็วขึ้น
You can leave a response, or trackback from your own site.

One Response to “ทำ Thumbnail บน WordPress ด้วย Timthumb”

  1. หาวิธีทำอยู่มันเป็นแบบนี้นี่เอง

Leave a Reply