วิธีเพิ่มขนาดรูปภาพที่กำหนดเองใน WordPress

เผยแพร่แล้ว: 2020-12-29

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

ขนาดภาพเริ่มต้นของ WordPress คืออะไร?

ตามค่าเริ่มต้น การติดตั้ง WordPress ทุกครั้งจะมีขนาดภาพที่กำหนดเองสามขนาด

  • ภาพขนาดย่อ – 150*150
  • ปานกลาง – 300*300
  • ใหญ่ – 1024*1024

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

เหตุใดจึงต้องเปลี่ยนขนาดรูปภาพเริ่มต้น

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

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

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

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

วิธีการเปลี่ยนขนาดภาพเริ่มต้นของ WordPress

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

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

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

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

วิธีเพิ่มขนาดรูปภาพที่กำหนดเองใน WordPress

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

  1. ด้วยตนเอง
  2. ด้วยปลั๊กอิน

ในส่วนนี้ เราจะอธิบายทั้งสองวิธี เพื่อให้คุณสามารถเลือกวิธีที่เหมาะสมกับความต้องการและทักษะของคุณมากที่สุด

1) เพิ่มขนาดภาพที่กำหนดเองด้วยตนเอง

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

ติดตั้งและเปิดใช้งาน Child Themify

ใน แดชบอร์ด WordPress ของคุณ ไปที่ส่วน ปลั๊กอิน และติดตั้งและเปิดใช้งานปลั๊กอิน Child Themify บนไซต์ของคุณ

เพิ่มลูก themify

การเพิ่มขนาดรูปภาพที่กำหนดเอง

จากนั้นไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไขธีม โปรแกรมแก้ไขธีมเวิร์ดเพรส

ตามค่าเริ่มต้น ตัวแก้ไขธีมจะโหลด ไฟล์ style.css แต่หากต้องการเพิ่มขนาดรูปภาพที่กำหนดเอง คุณจะต้องเลือก functions.php ของธีมย่อยของคุณ

ไฟล์ functions.php

หลังจากที่คุณเปิดไฟล์ fuctions.php ให้วางโค้ดต่อไปนี้

 add_theme_support( 'post-thumbnails' );

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

เพิ่มขนาดรูปภาพที่กำหนดเองใน wordpress - อัปเดต functions.php

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

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

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

เพิ่มขนาดรูปภาพที่กำหนดเองใน wordpress - เพิ่มขนาดรูปภาพที่กำหนดเอง

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

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

เพิ่มขนาดรูปภาพที่กำหนดเองใน wordpress - เพิ่มขนาดรูปภาพที่กำหนดเอง

2) สร้างขนาดภาพที่กำหนดเองด้วยปลั๊กอิน

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

  1. ตัวอย่างโค้ด
  2. สร้างรูปภาพใหม่และเลือกครอบตัด

วิธีที่ 1: ตัวอย่างโค้ด

การติดตั้งและเปิดใช้งานข้อมูลโค้ด

อันดับแรก ในแดชบอร์ด WordPress ของคุณ ให้ไปที่ Plugins > Add new ค้นหา Code Snippets ติดตั้งและเปิดใช้งาน ตัวอย่างโค้ด ปลั๊กอินเวิร์ดเพรส

จากนั้นไปที่การตั้งค่าตัวอย่าง

การเพิ่มตัวอย่างข้อมูลที่กำหนดเอง

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

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

 add_theme_support( 'โพสต์ภาพขนาดย่อ' );

add_image_size( 'ขนาดหลังภาพขนาดย่อ', 800, 240 );
add_image_size( 'ขนาดหัวแม่มือหน้าแรก', 220, 180 );
add_image_size( 'ขนาดหัวแม่มือเต็มหน้า', 590, 9999 );

หลังจากที่คุณเพิ่มโค้ดในส่วนข้อมูลโค้ดแล้ว ให้บันทึก

การยืนยันรหัส

เพื่อให้แน่ใจว่าทุกอย่างถูกต้อง ให้ตรวจสอบขนาดภาพที่ใช้งานอยู่

เพิ่มขนาดภาพใหม่

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

วิธีที่ 2: สร้างรูปภาพใหม่และเลือกครอบตัด

Image Regenerate & Select Crop เป็นปลั๊กอินที่ยอดเยี่ยมอีกตัวหนึ่งที่จะช่วยให้คุณสร้างและครอบตัดรูปภาพใหม่

การติดตั้ง Image Regenerate & Selected Crop

ขั้นแรก ติดตั้งและเปิดใช้งาน Image Regenerate & Selected Crop บนไซต์ของคุณ ปลั๊กอินตัวครอบตัดรูปภาพ

การเพิ่มขนาดรูปภาพที่กำหนดเอง

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

การตรวจสอบขั้นสุดท้าย

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

การสร้างภาพใหม่

นอกจากนี้ คุณสามารถสร้างรูปภาพเก่าด้วยมิติข้อมูลที่กำหนดเองใหม่ได้ ในการทำเช่นนั้น เพียงไปที่ Image Regenerate & Select Crop > General Settings สร้างภาพใหม่

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

โบนัส: ตัวจัดการขนาดรูปภาพ

หากคุณต้องการใช้โซลูชันระดับพรีเมียมแทนเครื่องมือฟรี ให้ลองใช้ Image Sizes Manager ในราคา 13 USD ปลั๊กอินราคาไม่แพงนี้มีใบอนุญาตตลอดชีพและการสนับสนุนระดับพรีเมียม 6 เดือน

ตัวจัดการขนาดภาพ

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

การสร้างภาพขนาดย่อใหม่

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

การติดตั้งและเปิดใช้งานการสร้างภาพขนาดย่อ

ขั้นแรก ติดตั้งและเปิดใช้งานปลั๊กอินบนไซต์ของคุณ

เพิ่มขนาดภาพที่กำหนดเองใน wordpress - สร้างภาพขนาดย่อใหม่

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

เพิ่มขนาดภาพที่กำหนดเองใน wordpress - การตั้งค่าหลัก

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

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

ลบขนาดภาพเริ่มต้น

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

  • รูปขนาดย่อ
  • ปานกลาง
  • ใหญ่

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

คำแนะนำ

ก่อนสรุปโพสต์นี้ เรามีคำแนะนำเล็กน้อยสำหรับคุณ

สร้างธีมลูก

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

พิจารณาใช้ปลั๊กอินการบีบอัดรูปภาพ

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

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

บทสรุป

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

  1. ด้วยตนเอง
  2. ด้วยปลั๊กอิน

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

ในทางกลับกัน หากคุณรู้สึกไม่สะดวกใจที่จะแก้ไขไฟล์หลัก ให้ใช้ปลั๊กอินตัวใดตัวหนึ่ง Code Snippets เป็นปลั๊กอินพื้นฐานในการเพิ่มโค้ดที่กำหนดเอง แต่คุณจะต้องมีปลั๊กอินการสร้างรูปภาพเพื่อสร้างรูปภาพใหม่ ในทางตรงกันข้าม Image Regenerate & Selected Crop ช่วยให้คุณเพิ่มขนาดภาพที่กำหนดเองและสร้างภาพใหม่ได้

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

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

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