วิธีเพิ่มรูปขนาดย่อของโพสต์ใน WordPress


ภาพขนาดย่อของโพสต์กำลังได้รับความนิยมมากขึ้นทุกวัน ธีมนิตยสารจำนวนมากเชื่อมโยงรูปภาพกับโพสต์เฉพาะเจาะจงซึ่งจะแสดงบนหน้าแรกหรือหน้าโพสต์ในภายหลัง เราแสดงภาพขนาดย่อพร้อมโพสต์ของเราทั้งบนหน้าโพสต์และหน้าหมวดหมู่ ในเวอร์ชันเก่า ฟังก์ชันนี้ได้มาจากการใช้วิธีฟิลด์แบบกำหนดเองซึ่งไม่ค่อยเป็นมิตรกับผู้ใช้ ต้องขอบคุณ WordPress Core Developers พร้อมด้วยคุณสมบัติที่โดดเด่นมากมายใน WordPress 2.9 ฟังก์ชั่นนี้จึงถูกเพิ่มเข้าไปในแกนหลักด้วย

เพียงดูวิดีโอหรืออ่านบทช่วยสอนด้านล่าง?

วีดีโอ

คู่มือสำหรับผู้เริ่มต้น

คุณจะเห็นตัวเลือกเช่นนี้ในแถบด้านข้างของแผงเขียนโพสต์ในแดชบอร์ด WordPress

คลิกที่ลิงค์แล้วคุณจะเข้าสู่หน้าอัพโหลดรูปภาพ อัพโหลดรูปภาพแล้วคุณจะเห็นสิ่งนี้:

เพียงคลิกลิงก์ที่ระบุว่าใช้เป็นภาพขนาดย่อ เมื่อทำเช่นนั้นแล้ว คุณจะเห็นหน้าจอดังนี้:

หน้าจอด้านบนหมายความว่าคุณทำเสร็จแล้ว เพียงคลิกเผยแพร่ จากนั้นรูปภาพก็จะแสดงบนเว็บไซต์ของคุณ

คู่มือนักพัฒนา

แม้ว่าฟังก์ชันนี้จะถูกเพิ่มลงในแกนหลักแล้ว ไม่ใช่ผู้ใช้ทุกคนจะเห็นตัวเลือกนี้ในแถบด้านข้างของแผงโพสต์การเขียนของตน นี่เป็นหนึ่งในฟังก์ชันที่สามารถเปิดใช้งานได้เฉพาะในกรณีที่ธีมรองรับเท่านั้น ธีมฟรีที่เก่ากว่าอาจไม่รองรับ ดังนั้นคุณจะต้องขอให้นักพัฒนาอัปเดต หรือคุณสามารถทำเองโดยทำตามบทช่วยสอนนี้

ขั้นแรก คุณจะต้องเปิดไฟล์ functions.php ในโฟลเดอร์ธีมของคุณ และวางโค้ดต่อไปนี้:

add_theme_support( 'post-thumbnails' );

รหัสนี้จะเปิดใช้งานการสนับสนุนธีมสำหรับทั้งโพสต์และเพจ ตอนนี้คุณจะเห็นตัวเลือกในแดชบอร์ดของคุณแล้ว แต่จะไม่แสดงในธีมของคุณเนื่องจากเรายังไม่ได้เพิ่มโค้ดในธีม

คุณสามารถแสดงภาพขนาดย่อได้ทุกที่ภายใน Loop โดยใช้รหัสนี้:

<?php the_post_thumbnail(); ?>

นั่นเป็นฟังก์ชันพื้นฐาน แต่ถ้าคุณต้องการเพิ่มระดับขั้นสูง เช่น การระบุขนาดภาพขนาดย่อของโพสต์ คุณเพียงแค่ต้องเปิดไฟล์ functions.php และวางโค้ดดังนี้:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true );

ขนาดถูกกำหนดตามลำดับนี้: กว้าง x สูง และนี่คือพิกเซล

คุณยังสามารถเพิ่มขนาดรูปภาพเพิ่มเติมสำหรับรูปภาพเด่นของคุณได้โดยเพิ่มบรรทัดนี้:

add_image_size( 'single-post-thumbnail', 590, 180 ); // Permalink thumbnail size

คุณสามารถเรียกขนาดภาพขนาดย่อที่ต้องการในลูปโพสต์ของคุณได้ในภายหลังดังนี้:

<?php the_post_thumbnail('single-post-thumbnail'); ?>

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

บทความของ Mark Jaquith เกี่ยวกับภาพขนาดย่อของโพสต์
เวิร์ดเพรส โคเด็กซ์