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

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


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

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

คุณจะต้องเริ่มต้นด้วยการเพิ่มการสนับสนุนการโพสต์รูปขนาดย่อโดยวางรหัสต่อไปนี้ในไฟล์ function.php ของธีม:

add_theme_support (‘โพสต์รูปขนาดย่อ’);

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

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

add_image_size (‘sidebar-thumb’, 120, 120, true); // โหมดการครอบตัดอย่างแรง
add_image_size (‘โฮมเพจ-thumb’, 220, 180); // โหมดการครอบตัดแบบนุ่ม
add_image_size (‘singlepost-thumb’, 590, 9999); // โหมดความสูงไม่ จำกัด

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

โหมดครอบตัดยาก – เมื่อคุณสังเกตเห็นจะมีการเพิ่มค่า“ จริง” หลังจากความสูง มูลค่าที่แท้จริงนั้นบอกให้ WordPress ทำการครอบตัดรูปภาพตามขนาดที่เรากำหนดไว้ (ในกรณีนี้คือ 120 x 120px) นี่คือวิธีที่เราใช้บ่อยในการออกแบบชุดรูปแบบของเราเพื่อให้แน่ใจว่าทุกอย่างลงตัวและการออกแบบของเราไม่แตกหัก ฟังก์ชั่นนี้จะครอบตัดภาพโดยอัตโนมัติจากด้านข้างหรือด้านบนและด้านล่างขึ้นอยู่กับขนาด ข้อเสียของการครอบตัดแบบยากคือคุณไม่สามารถควบคุมได้ว่าจะแสดงส่วนใดของภาพ.

การแก้ไขโดย Mike Little – เมื่อคุณอัปโหลดภาพและก่อนที่คุณจะแทรกลงในโพสต์คุณสามารถคลิกที่ ‘แก้ไขภาพ’ และจากนั้นเปลี่ยนภาพขนาดย่อหรือทั้งภาพ, ขนาด, หมุนหรือพลิกภาพและสำหรับภาพขนาดย่อ เลือกส่วนที่แน่นอนของภาพที่คุณต้องการ.

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

ตัวอย่างการครอบตัดแบบอ่อน

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

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

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

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

<?php the_post_thumbnail (‘your-specific-image-size’); ?>

หมายเหตุ: ต้องใส่รหัสบิตนี้ในโพสต์ลูป.

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

การสร้างขนาดรูปภาพเพิ่มเติมอีกครั้ง

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

สร้างหน้าจอปลั๊กอินรูปขนาดย่อใหม่

คลิกที่ไอคอนสร้างขนาดเล็กและปล่อยให้ปลั๊กอินทำงาน.

ปลั๊กอินอื่นที่สามารถทำงานนี้ได้คือขนาดภาพที่เรียบง่าย.

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

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

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

การแทรกโพสต์สำหรับขนาดภาพเพิ่มเติม

เมื่อคุณทำเครื่องหมายที่ช่องนี้ผู้ใช้ของคุณจะสามารถใช้ขนาดเพิ่มเติมในเนื้อหาโพสต์ได้.

ขนาดรูปภาพเพิ่มเติมสำหรับโพสต์

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

ปลั๊กอิน Simple Image Size ยังให้คุณสร้างขนาดรูปภาพที่กำหนดเองได้โดยตรงจากแดชบอร์ด WordPress.

เราเชื่อว่าวิธีการนี้ควรได้รับการเพิ่มภายใต้หลักปฏิบัติที่ดีที่สุดสำหรับนักพัฒนาธีม WordPress ทุกคน คุณคิดอย่างไร?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map