วิธีปรับปรุงรูปภาพใน WordPress

วิธีปรับปรุงรูปภาพใน WordPress


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

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

ในคู่มือนี้เรากำลังจะแสดงให้คุณเห็น:

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

Contents

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

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

  • เว็บไซต์เร็วขึ้น
  • SEO ที่ดีขึ้น
  • การสำรองข้อมูลขนาดเล็ก
  • การใช้แบนด์วิดท์น้อยลง
  • ผู้ใช้มีความสุขมากขึ้น

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

ทดสอบรูปภาพบนเว็บไซต์ของคุณอย่างรวดเร็ว

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

เราชอบที่จะใช้ GTmetrix ซึ่งจะแสดงภาพที่แน่นอนที่ทำให้ไซต์ของคุณโหลดช้าลง.

ปรับภาพให้เหมาะสมสำหรับ WordPress ก่อนอัปโหลด

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

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

ปรับขนาดภาพ

ปรับขนาดภาพ

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

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

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

เปลี่ยนคุณภาพ

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

นอกจากนี้หากคุณเลือกที่จะบันทึกภาพเป็น JPEG Photoshop จะขอให้คุณเลือกระดับคุณภาพ ในกรณีนี้การลดคุณภาพจาก 12 เหลือเพียง 8 จะลดขนาดของภาพลงอย่างมากในขณะที่ความแตกต่างของคุณภาพจะไม่ใหญ่มาก.

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

เลือกรูปแบบที่เหมาะสม

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

รูปแบบภาพ

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

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

ดูแลชื่อไฟล์

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

เราขอแนะนำให้คุณตั้งชื่อภาพโดยไม่ใช้ช่องว่าง อย่าลืมใส่คำหลักหากคุณต้องการให้หน้าและภาพอยู่ในอันดับ ตัวอย่างเช่นหากคุณกำลังอัปโหลดรูปภาพของเฟอร์รารีแคลิฟอร์เนียชื่อไฟล์ควรเป็น“ ferrari-california.jpg” หากคุณใช้ปลั๊กอิน SEO สำหรับ WordPress คุณรู้อยู่แล้วว่ามันตรวจสอบแท็ก alt ของคุณสำหรับคำหลัก ใช่มันสำคัญมากที่จะมีชื่อภาพที่เหมาะสม.

ปรับภาพให้เหมาะสมสำหรับ WordPress หลังจากอัปโหลด

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

ชื่อ, คำอธิบาย, ข้อความแทนและคำบรรยายภาพ

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

แม้ว่าคุณจะไม่ต้องการคำอธิบายภาพตลอดเวลา แต่ให้แน่ใจว่าคุณเพิ่มภาพสำหรับภาพที่ต้องการคำอธิบายเพิ่มเติม (ตัวอย่างเช่นภาพหน้าจอ).

แก้ไขภาพด้วย WordPress

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

สร้างภาพขนาดย่อทั้งหมดอีกครั้ง

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

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

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

ใช้ปลั๊กอิน WordPress

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

Lazy Load ภาพเมื่อจำเป็น

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

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

มีภาพที่ตอบสนอง

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

ปรับภาพให้เหมาะสมที่สุดสำหรับโซเชียลมีเดีย

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

หากคุณกำลังใช้ปลั๊กอิน SEO เช่น Yoast อย่าลืมตรวจสอบการตั้งค่า ตัวอย่างเช่น Yoast จะให้คุณตั้งค่าบางสิ่งที่เกี่ยวข้องกับโซเชียลมีเดีย ดังนั้นไปที่ SEO -> Social แล้วป้อนข้อมูลบน Facebook, Twitter, Google+ และ Pinterest.

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

เปลี่ยนวิธีที่ WordPress บีบอัดภาพ JPEG

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

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

โชคดีที่คุณจะต้องมีโค้ดหนึ่งบรรทัดในการเปลี่ยนแปลง.

หยุดบีบอัดภาพ JPEG:

หากคุณไม่ต้องการให้บีบอัดภาพ JPEG เพียงคัดลอกและวางรหัสต่อไปนี้ลงในไฟล์ functions.php ของคุณ:

add_filter ('jpeg_quality', ฟังก์ชัน ($ arg) {return 100;});

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

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

บีบอัดภาพ JPEG ได้มากขึ้น:

ยิ่งจำนวนต่ำลงภาพก็จะยิ่งถูกบีบอัดมากขึ้น ตัวอย่างเช่นหากต้องการบีบอัด JPEG เหล่านั้นให้มากขึ้นคุณจะต้องใช้รหัสนี้:

add_filter ('jpeg_quality', ฟังก์ชัน ($ arg) {return 80;});

อย่าลืม ระดับการบีบอัดเริ่มต้นคือ 90.

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

ปลั๊กอินปรับแต่งรูปภาพที่ได้รับความนิยมมากที่สุดสำหรับ WordPress

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

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

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

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

WP Smush

ราคา: ฟรี

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

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

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

EWWW Image Optimizer

ราคา: ฟรี

เบื้องหลังชื่อตลกมีหนึ่งในปลั๊กอินเพิ่มประสิทธิภาพภาพยอดนิยมสำหรับ WordPress เช่นเดียวกับที่กล่าวถึงก่อนหน้า EWWW Image Optimizer สามารถบีบอัดภาพของคุณโดยไม่ส่งผลกระทบต่อคุณภาพ เมื่อคุณคิดว่าปลั๊กอินสามารถเร่งเว็บไซต์ของคุณในไม่กี่วินาทีคุณจะสามารถดาวน์โหลดได้แล้ว เมื่อคุณทำเช่นนั้นคุณจะได้รับการเพิ่มประสิทธิภาพของภาพเป็นกลุ่มและแกลเลอรี่เช่น GRAND FlaGallery, NextCellent และ NextGEN จะได้รับหน้าปรับขนาดใหญ่ของตนเอง.

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

บีบอัดภาพ JPEG และ PNG

ราคา: ฟรี

บีบอัดภาพเล็ก ๆ

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

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

บีบอัดภาพ JPEG และ PNG แม้รองรับ PNG แบบเคลื่อนไหวทำงานได้อย่างสมบูรณ์แบบบนหลายไซต์รองรับ WooComerce และจะไม่มีปัญหากับ WP Offload S3.

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

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

Imsanity

ราคา: ฟรี

Imsanity

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

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

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

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

เครื่องมือเพิ่มประสิทธิภาพภาพ ShortPixel

ราคา: ฟรี

เครื่องมือเพิ่มประสิทธิภาพภาพ ShortPixel

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

เครื่องมือเพิ่มประสิทธิภาพภาพ ShortPixel ไม่เพียง แต่จะเพิ่มประสิทธิภาพเอกสาร JPG, PNG, GIF และ PDF สำหรับคุณเท่านั้น แต่ยังช่วยให้คุณสามารถ แปลงไฟล์ JPEG, PNG หรือ GIF เป็น WebP. ปลั๊กอินทำงานได้ดีกับปลั๊กอินแกลเลอรีอื่น ๆ และไม่สนใจว่าไซต์ของคุณใช้ HTTP หรือ HTTPS มันจะช่วยให้คุณลบข้อมูล EXIF ​​ออกจากรูปภาพ (บางสิ่งที่ช่างภาพจะชอบ).

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

Optimus – WordPress Image Optimizer

ราคา: ฟรี

ออปติมัส

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

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

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

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

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

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

Lazy Load สำหรับวิดีโอ

ราคา: ฟรี

Lazy Load สำหรับวิดีโอ

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

WP YouTube Lyte

ราคา: ฟรี

WP YouTube Lyte

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

a3 Lazy Load

ราคา: ฟรี
ตัวอย่าง 1
ตัวอย่าง 2

a3 Lazy Load

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

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

BJ Lazy Load

ราคา: ฟรี

BJ Lazy Load

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

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

แสดงภาพก่อนและหลังด้วยวิธีที่น่าสนใจ

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

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

จะเป็นอย่างไรถ้าเราบอกคุณว่ามีวิธีการแก้ปัญหาก่อน / หลังที่น่าทึ่งทางสายตาและมันแค่เอื้อมมือของคุณ? มีทั้งหลังการตั้งค่าแล้วคุณจะต้องชื่นชมนักพัฒนาเพราะผลสุดท้ายนั้นเจ๋งจริงๆ.

ยี่สิบยี่สิบ

ราคา: ฟรี

ยี่สิบยี่สิบ

Twenty Twenty เป็นชื่อของปลั๊กอินที่ยอดเยี่ยมซึ่งคุณสามารถดาวน์โหลดได้ฟรีในที่เก็บปลั๊กอิน WordPress.

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

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

  1. สร้างโพสต์ใหม่หรือเปิดโพสต์ที่มีอยู่
  2. แทรกภาพสองภาพในโพสต์ หากคุณทำงานใน Visual Editor คุณควรเห็นภาพหนึ่งอยู่เหนือภาพอื่น หากคุณทำงานใน Text Editor คุณควรเห็นรหัสที่คล้ายกับสิ่งนี้:
  3. 
    
    
    
  4. ป้อนแท็ก [ยี่สิบยี่สิบ] ก่อนภาพแรก
  5. หลังจากรายการที่สองป้อนแท็ก [/ ยี่สิบยี่สิบ]
  6. คุณควรลงท้ายด้วยบางสิ่งเช่นนี้ใน Text Editor ของคุณ:

    [twentytwenty]
    
    
    
    [/ twentytwenty]
    
  7. ตรวจสอบให้แน่ใจว่ารูปภาพของคุณมีขนาดเท่ากันเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด
  8. ดูตัวอย่างหรือเผยแพร่โพสต์ของคุณและเพลิดเพลินไปกับภาพที่สวยงามทั้งก่อนและหลัง

วิธีสร้างภาพแบบโต้ตอบ – วาดเพิ่มคำอธิบายและลิงก์

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

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

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

ดึงดูดความสนใจ

ราคา: ฟรี
การสาธิต

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

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

คุณสมบัติ

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

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

วาดการตั้งค่าความสนใจ

ตัวอย่าง – แผนที่เชิงโต้ตอบของฮาวาย

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

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

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

ดึงความสนใจ - วิธีสร้างภาพแบบโต้ตอบใน WordPress

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

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

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

รุ่น PRO

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

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

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

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

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

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

สร้างภาพขนาดย่อ:

ราคา: ฟรี
  1. ไปที่ ปลั๊กอิน -> เพิ่มใหม่
  2. ค้นหา“ สร้างภาพขนาดย่อใหม่”
  3. ติดตั้งและเปิดใช้งานปลั๊กอิน
  4. นำทางไปยัง Tools-> Regen.Thumbnails

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

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

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

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

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

ลบคุณลักษณะภาพความกว้างและความสูงด้วย jQuery

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

หากคุณต้องการตัดคุณลักษณะออกทันทีที่อัปโหลดคุณสามารถทำได้ผ่านฟังก์ชั่นที่เรียบง่ายซึ่งเราแสดงให้คุณเห็นเป็นครั้งสุดท้าย.

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

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

ลบแอตทริบิวต์ภาพความกว้างและความสูง:

  1. เปิดไฟล์ header.php จากโฟลเดอร์ธีมของคุณ
  2. คัดลอกและวางรหัสนี้ได้ทุกที่ และ Tags:
  3.  
  4. บันทึกการเปลี่ยนแปลง

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

วิธีสร้างขนาดรูปภาพที่กำหนดเองใน Media Uploader

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

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

ที่จริงแล้วคุณไม่ต้องทำอย่างนั้น มีฟังก์ชั่นเล็ก ๆ น้อย ๆ อย่างเรียบร้อยที่เรียกว่า add_image_size () ซึ่งเป็นเครื่องมือที่ยอดเยี่ยมสำหรับนักพัฒนา และหลังจากบทความนี้คุณจะพบว่ามีประโยชน์เช่นกัน.

สมมติว่าชุดรูปแบบของคุณมีความกว้างที่กำหนดเองและคุณต้องการฝังภาพลงไปเพื่อให้พอดี สมมติว่าความกว้างนั้นคือ 666px (เราจะไม่ไปถึงสาเหตุที่คุณตั้งความกว้างเป็นตัวเลขนี้มันคือทางเลือกของคุณ) ในการทำเช่นนั้นคุณจะต้องเพิ่มปุ่มตัวเลือกพิเศษลงใน Media Uploader ด้วยรหัสด้านล่างคุณจะต้องเพิ่มขนาดอีกหนึ่งขนาดซึ่งเป็นขนาดครึ่งหนึ่งของขนาดดั้งเดิม.

  1. เปิดไฟล์ functions.php ของคุณ
  2. คัดลอกและวางรหัสชิ้นนี้:
  3. ฟังก์ชั่น custom_image_sizes () {
    add_image_size ('หนึ่งขนาด', 333, 333, จริง);
    add_image_size ('ขนาดอื่น', 666, 666, จริง)
    }
    
    add_action ('init', 'custom_image_sizes');
    
    ฟังก์ชั่น show_image_sizes (ขนาด $) {
    $ ขนาด ['one-size'] = __ ('ขนาดที่กำหนดเอง 1', 'isitwp');
    $ ขนาด ['another-size'] = __ ('ขนาดที่กำหนดเอง 2’, 'isitwp');
    ผลตอบแทน $ ขนาด;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. บันทึกการเปลี่ยนแปลง
  5. ลองเพิ่มรูปภาพจาก Media Uploader ของคุณซึ่งคุณควรเห็นตัวเลือกขนาดใหม่ของคุณภายใต้“ การตั้งค่าการแสดงผลไฟล์แนบ”

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

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

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

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

สร้างภาพหน้าจออัตโนมัติ:

  1. เปิดฟังก์ชั่น
  2. คัดลอกและวางรหัสต่อไปนี้:
  3. ฟังก์ชั่น wp_webscreen ($ atts, $ content = NULL) {
    สารสกัด (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // ความกว้าง
    "h" => '450' // ความสูง
    ), $ atts));
    
    $ img = '' $ alt '';
    ส่งคืน $ img;
    }
    add_shortcode ("หน้าจอ", "wp_webscreen");
  4. เปลี่ยนตัวแปรเริ่มต้นในอาร์เรย์
  5. บันทึกการเปลี่ยนแปลง

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

[screen url =” http://www.firstsiteguide.com” alt =” fsg” w =” 600″ h =” 450″]

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

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

ตัวอย่าง:

สมมติว่าคุณต้องการจับภาพหน้าจอของ Google และทำให้มันใหญ่ 200 × 400 พิกเซล:

[screen url =” http://www.google.com” alt =” Google” w =” 200″ h =” 400″]

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

ข้อสรุป

คุณไม่จำเป็นต้องติดตั้งปลั๊กอินและฟังก์ชั่นทั้งหมดที่เรากล่าวถึงเพื่อปรับปรุงภาพในเว็บไซต์ 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