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

เผยแพร่แล้ว: 2022-10-14

ธีมใน WordPress คือชุดของเทมเพลตและสไตล์ชีตที่ใช้กำหนดรูปลักษณ์ของเว็บไซต์ สามารถติดตั้งและเปิดธีมได้บนแผงการดูแลระบบ WordPress หนึ่งในคุณสมบัติยอดนิยมของ WordPress คือความสามารถในการเพิ่มขนาดรูปภาพที่กำหนดเองให้กับธีมของคุณ วิธีนี้ช่วยให้คุณสร้างภาพขนาดย่อหรือขนาดอื่นๆ ของภาพที่เฉพาะเจาะจงสำหรับเว็บไซต์ของคุณได้ การเพิ่มขนาดรูปภาพที่กำหนดเองให้กับ ธีม WordPress ของคุณเป็นกระบวนการสองขั้นตอน ขั้นแรก คุณต้องเพิ่มขนาดภาพลงในไฟล์ functions.php ของคุณ ประการที่สอง คุณต้องเพิ่มขนาดรูปภาพลงในไฟล์ CSS ของคุณ ในไฟล์ functions.php ของคุณ คุณต้องเพิ่มโค้ดต่อไปนี้: function my_custom_image_sizes() { add_image_size( 'name-of-image-size', width, height, crop ); } ฟังก์ชันนี้จะเพิ่มขนาดรูปภาพที่กำหนดเองให้กับธีม WordPress ของคุณ ชื่อของขนาดภาพคือชื่อที่คุณต้องการตั้งให้กับขนาดภาพของคุณ ความกว้างและความสูงคือขนาดของรูปภาพของคุณ พารามิเตอร์การครอบตัดเป็นทางเลือก และใช้เพื่อครอบตัดรูปภาพตามขนาดที่ระบุ ในไฟล์ CSS คุณต้องเพิ่มโค้ดต่อไปนี้: .name-of-image-size { width: widthpx; ความสูง: heightpx; } รหัสนี้จะช่วยให้แน่ใจว่าขนาดรูปภาพที่คุณกำหนดเองจะแสดงบนเว็บไซต์ของคุณอย่างถูกต้อง การเพิ่มขนาดรูปภาพที่กำหนดเองให้กับธีม WordPress ของคุณเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงรูปลักษณ์ของเว็บไซต์ของคุณ เป็นกระบวนการง่ายๆ ที่ต้องใช้เพียงสองขั้นตอนเท่านั้น

ในบทช่วยสอนนี้ เราจะพูดถึงวิธีเพิ่มขนาดรูปภาพให้กับธีมย่อยโดยใช้ธีม Olsen Light ยอดนิยม ข้อมูลประเภทนี้สามารถใช้กับปลั๊กอินที่เป็นส่วนหนึ่งของธีมหลักได้ คุณลักษณะที่กำลังจะมีขึ้นจะแสดงรูปภาพใดๆ ที่อัปโหลดโดยเฉพาะสำหรับโพสต์ทันทีหลังจากเนื้อหาอื่นๆ เมื่อดูโพสต์เดียว การปรับขนาดใหม่ช่วยประหยัดพื้นที่ดิสก์และแบนด์วิดท์เมื่อเปรียบเทียบกับภาพเดียวที่เบราว์เซอร์ของผู้ใช้แคชไว้ได้ แต่แสดงหลายครั้ง Add_image_size() ยอมรับพารามิเตอร์สามตัว: ขนาดของรูปภาพ ความกว้างและความสูงสูงสุด และจำเป็นต้องครอบตัดหรือไม่ หากรูปภาพเป็นจริง รูปภาพจะถูกครอบตัด และหากเป็นเท็จ รูปภาพนั้นจะถูกลดขนาดตามสัดส่วนเพื่อให้ได้อัตราส่วน ในภาพด้านบน เรากำหนดขนาดใหม่เป็น “my_wide” โดยมีขนาด 750*150 และเปิดใช้งานการครอบตัด

เราตรวจสอบทันทีว่ามีโพสต์เดียวหรือไม่ ฟังก์ชัน get_attached_media() ใช้สำหรับรับรูปภาพที่แนบมาทั้งหมด ตัวกรองที่สามารถใช้ได้ ได้แก่ 'image' และ 'return' หากเราสะท้อนแท็กของเราจากภายใน my_wide_images_after_the_content() แท็กเหล่านั้นจะปรากฏขึ้นก่อน เนื่องจาก $content ไม่ใช่การกระทำ รูปภาพที่มีอยู่ทั้งหมดของ WordPress สามารถบังคับให้เปลี่ยนขนาดกลางได้โดยใช้ปลั๊กอิน AJAX Thumbnail Rebuild เพียงไปที่แดชบอร์ด * เครื่องมือ * ส่วนสร้างภาพขนาดย่อใหม่ เพื่อสร้างภาพขนาดย่อทั้งหมดอีกครั้ง จากนั้นเลือก 'My_wide'

คุณสามารถปรับขนาดรูปภาพใน WordPress ได้หรือไม่?

เครดิต: themegrill.com

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

ฉันจะอัปโหลดภาพที่ปรับให้เหมาะสมใน WordPress ได้อย่างไร เว็บไซต์ของคุณประสบปัญหาเวลาโหลดช้าอันเป็นผลมาจากรูปภาพขนาดใหญ่ เมื่อขนาดไฟล์ของรูปภาพลดลง ปลั๊กอินหรือสคริปต์จะถูกใช้เพื่อเพิ่มประสิทธิภาพ โดยทั่วไป การตัดแต่งและบีบอัดรูปภาพของคุณ คุณสามารถลดขนาดไฟล์ลง 50%-75 ของขนาดดั้งเดิม หากคุณมีไซต์ขนาดใหญ่ ฉันขอแนะนำให้ดาวน์โหลดข้อมูลสำรองเป็นไฟล์ a.zip ทดสอบภาพสองสามภาพเพื่อดูว่าคุณเข้าใจมันดีแค่ไหนก่อนที่จะผูกมัดกับความสัมพันธ์ระยะยาว

วิธีเปลี่ยนรูปภาพส่วนหัวของคุณใน WordPress

หลังจากที่คุณได้ตัดสินใจเกี่ยวกับขนาดของคุณแล้ว ให้คลิก 'บันทึกการเปลี่ยนแปลง' และ 'อัปโหลดไปยัง WordPress'

ฉันจะเปลี่ยนความกว้างและความสูงของรูปภาพเด่นใน WordPress ได้อย่างไร

เครดิต: pixelied.com

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

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

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


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

เครดิต: excelnotes.com

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

ปลั๊กอินขนาดรูปภาพที่กำหนดเองของ WordPress

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

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

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

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

WordPress เพิ่มขนาดรูปภาพ ความกว้างเท่านั้น

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

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

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

เพิ่มขนาดรูปภาพออนไลน์

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

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

ขนาดรูปภาพ WordPress ขนาดกลาง ขนาดใหญ่

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

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

ขนาดภาพที่ดีที่สุดสำหรับ WordPress

เมื่อคุณอัปโหลดรูปภาพไปยัง WordPress คุณมีตัวเลือกดังนี้: *br. ความกว้างของภาพคือขนาดของพื้นที่ที่ปรากฏ ในกรณีนี้ ความกว้างของรูปภาพถูกกำหนดเป็นพิกเซล ความสูงของภาพเรียกว่าความสูง ในกรณีนี้ ความสูงของรูปภาพจะถูกตั้งค่าเป็นพิกเซล ขนาดของภาพวัดเป็นนิ้ว ขนาดภาพถูกระบุเป็นไบต์โดยใช้วิธีนี้ ระบุประเภทไฟล์ของรูปภาพโดยใช้คุณสมบัติประเภทไฟล์ รูปภาพบน WordPress ไม่ควรมีขนาดใหญ่กว่า 1048 x 250 พิกเซล ควรมีความละเอียด 1200 x 900 พิกเซลในโหมดแนวนอนและ 900 x 1200 ในโหมดแนวตั้ง ภาพที่ถ่ายด้วยความละเอียด 1920 x 1080 ควรใช้บนพื้นหลัง หากคุณมี รูปภาพ ที่มีความกว้างน้อยกว่า 1500px มีความเป็นไปได้สูงที่จะเบลอ คุณควรจะสามารถแก้ไขปัญหานี้ได้โดยการลบ 20px ออกจาก Content Width in Appearance