วิธีสร้างขนาดรูปภาพเพิ่มเติมใน WordPress

คุณต้องการสร้างขนาดรูปภาพเพิ่มเติมใน WordPress หรือไม่?

ตามค่าเริ่มต้น WordPress จะสร้างสำเนาของการอัปโหลดรูปภาพหลายชุดในขนาดต่างๆ กันโดยอัตโนมัติ นอกจากนี้ ธีมและปลั๊กอินของ WordPress ยังสร้างขนาดรูปภาพของตนเองได้

ในบทความนี้ เราจะแสดงวิธีสร้างขนาดรูปภาพเพิ่มเติมใน WordPress อย่างง่ายดายและใช้งานบนเว็บไซต์ของคุณ

ทำไมต้องสร้างขนาดรูปภาพเพิ่มเติมใน WordPress?

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

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

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

ที่ถูกกล่าวว่า มาดูวิธีการสร้างขนาดรูปภาพเพิ่มเติมใน WordPress

การลงทะเบียนขนาดรูปภาพเพิ่มเติมสำหรับธีมของคุณ

ธีม WordPress ส่วนใหญ่รวมถึงธีม WordPress ชั้นนำทั้งหมดรองรับคุณสมบัติภาพขนาดย่อของโพสต์ (รูปภาพเด่น) ตามค่าเริ่มต้น

อย่างไรก็ตาม หากคุณกำลังสร้างธีม WordPress แบบกำหนดเอง คุณจะต้องเพิ่มการสนับสนุนสำหรับภาพขนาดย่อของโพสต์โดยเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ของธีมของคุณ

add_theme_support( 'post-thumbnails' );

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

ฟังก์ชัน add_image_size ใช้ในรูปแบบต่อไปนี้:

add_image_size( 'name-of-size', width, height, crop mode );

โค้ดตัวอย่างสามารถมีลักษณะดังนี้:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

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

มาพูดถึงแต่ละตัวอย่างและวิธีใช้งานในโครงการของคุณเองกัน

1. โหมดฮาร์ดครอป

ดังที่คุณอาจสังเกตเห็น มีค่า "จริง" ที่เพิ่มหลังความสูง สิ่งนี้บอกให้ WordPress ครอบตัดรูปภาพตามขนาดที่เรากำหนดไว้ (ในกรณีนี้คือ 120 x 120px)

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

2. โหมดครอบตัดแบบนิ่ม

ตามค่าเริ่มต้น โหมดการครอบตัดแบบนุ่มนวลจะเปิดขึ้น นี่คือสาเหตุที่คุณไม่เห็นค่าเพิ่มเติมใดๆ ที่เพิ่มเข้ามาหลังจากความสูง วิธีนี้จะปรับขนาดรูปภาพตามสัดส่วนโดยไม่บิดเบือน ดังนั้นคุณอาจไม่ได้ขนาดที่คุณต้องการ โดยปกติแล้วจะตรงกับขนาดความกว้างและความสูงจะแตกต่างกันตามสัดส่วนของแต่ละภาพ ตัวอย่างการแสดงผลจะมีลักษณะดังนี้:

โหมดความสูงไม่ จำกัด

มีบางครั้งที่คุณมีภาพที่ยาวมากซึ่งคุณต้องการใช้ในการออกแบบของคุณ แต่คุณต้องการให้แน่ใจว่าความกว้างมีจำกัด ตัวอย่างเช่น รูปภาพอินโฟกราฟิกมักจะยาวมากและมักจะกว้างกว่าความกว้างของเนื้อหา

โหมดนี้อนุญาตให้คุณระบุความกว้างที่จะไม่ทำลายการออกแบบของคุณในขณะที่ปล่อยให้ความสูงไม่จำกัด

การแสดงขนาดรูปภาพเพิ่มเติมในธีม WordPress ของคุณ

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

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

หมายเหตุ: ต้องวางโค้ดนี้ในลูปโพสต์

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

การสร้างขนาดรูปภาพเพิ่มเติมใหม่

หากคุณไม่ได้ทำสิ่งนี้บนไซต์ใหม่ คุณอาจต้องสร้างภาพขนาดย่อขึ้นใหม่

ฟังก์ชัน add_image_size() จะสร้างขนาดจากจุดที่เพิ่มเข้าไปในธีมเท่านั้น ซึ่งหมายความว่ารูปภาพโพสต์ใดๆ ที่เพิ่มก่อนการรวมฟังก์ชันนี้ จะไม่มีขนาดใหม่

ในการแก้ไขปัญหานี้ คุณต้องสร้างขนาดรูปภาพใหม่สำหรับรูปภาพเก่า สิ่งนี้ทำได้ง่ายโดยปลั๊กอินที่เรียกว่า Regenerate Thumbnails เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน ตัวเลือกใหม่จะถูกเพิ่มภายใต้เมนู: เครื่องมือ » สร้างรูปขนาดย่อใหม่

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

สำหรับรายละเอียดเพิ่มเติม โปรดดูบทความของเราเกี่ยวกับวิธีสร้างขนาดรูปภาพใหม่ใน WordPress อย่างง่ายดาย

เปิดใช้งานขนาดรูปภาพเพิ่มเติมสำหรับเนื้อหาโพสต์ของคุณ

แม้ว่าคุณจะเปิดใช้งานขนาดรูปภาพในธีมของคุณแล้ว การใช้งานจะถูกจำกัดเฉพาะธีมของคุณเท่านั้นซึ่งไม่สมเหตุสมผล

ขนาดภาพทั้งหมดถูกสร้างขึ้นโดยไม่คำนึงถึง ดังนั้นทำไมไม่ให้ผู้เขียนบทความสามารถใช้ภายในเนื้อหาโพสต์ได้

คุณสามารถทำได้โดยเพิ่มโค้ดต่อไปนี้ลงในไฟล์ฟังก์ชันของธีม

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail', 
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

อย่าลืมบันทึกการเปลี่ยนแปลงของคุณหลังจากเพิ่มโค้ดแล้ว

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

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

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook