รูปภาพ WordPress ไม่แสดงบนมือถือ? สาเหตุ การแก้ไข คำถามที่พบบ่อย

เผยแพร่แล้ว: 2021-09-30

การเปิดเผยข้อมูล: โพสต์นี้มีลิงค์พันธมิตร ฉัน อาจได้รับค่าตอบแทนเมื่อคุณคลิกลิงก์ไปยังสินค้าในโพสต์นี้ สำหรับคำอธิบายเกี่ยวกับนโยบายการโฆษณาของฉัน โปรดไปที่ หน้า นี้ ขอบคุณที่อ่าน!

สารบัญ

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

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

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

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

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

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

รูปภาพ WordPress ไม่แสดงบนมือถือ สาเหตุและการแก้ไข

ความขัดแย้งของปลั๊กอินหรือธีม

ในหลายกรณีเช่นเดียวกับปัญหาส่วนใหญ่ที่เกี่ยวข้องกับ WordPress นี่อาจเป็นข้อขัดแย้งของปลั๊กอิน

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

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

เพื่อให้ง่ายต่อการวินิจฉัย ให้ ติด ตั้งปลั๊กอิน Health Check

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

ปัญหาตัวสร้างเพจ

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

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

คุณยังสามารถใช้ CSS เพื่อแสดงสิ่งนั้นได้ แต่นั่นไม่ใช่ตัวเลือกที่ดีที่สุดเสมอไป อย่างไรก็ตาม คุณสามารถลองทำสิ่งนี้:

เพิ่มโค้ด CSS ด้านล่างลงในไฟล์ style.css ของธีมลูกปัจจุบันของคุณ หรือคุณสามารถเพิ่มตัวเลือก css เพิ่มเติมในตัวปรับแต่งธีมได้:

@media (ความกว้างสูงสุด: 767px){

.elementor:not (.elementor-edit-area-active) .elementor-hidden-phone {

แสดง: บล็อก;

}

}

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

จากนั้นลองสิ่งนี้:

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

@media (ความกว้างสูงสุด: 767px)

.elementor:not (.elementor-edit-area-active) .elementor-hidden-phone {

แสดง: บล็อก !สำคัญ;

}

ขาดการอัปเดตธีม

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

ดังนั้นการเปลี่ยนธีมของคุณเป็นธีมเริ่มต้นของ WordPress "ยี่สิบ" ซึ่งได้รับการอัปเดตเป็นประจำ ควรกำหนดว่าปัญหานั้นเกี่ยวข้องกับธีมหรือไม่

การใช้ปลั๊กอินการปรับภาพให้เหมาะสม

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

ตัวอย่างเช่น มีปัญหาที่เกิดจากปลั๊กอิน Autoptimize ซึ่งแปลงรูปภาพเป็น รูปแบบ .webp เพื่อการโหลดที่รวดเร็วและฟังก์ชันอื่นๆ

.webp format บันทึกย่อ: รูปแบบ .webp คุณอาจมีปัญหากับปลั๊กอิน "Lazy Loading" ด้วยเช่นกัน

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

รูปภาพดูแตกต่างไปจากบนมือถือมากกว่าบนเดสก์ท็อป

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

สำหรับสิ่งนี้ คุณควรลองใช้ปลั๊กอินนี้และดูว่าจะช่วยได้หรือไม่:

อิมเมจ ShortPixel Adaptive

ปัญหาเกี่ยวกับ WP Rocket

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

รูปภาพ WordPress ไม่แสดงในข้อสรุปบนมือถือ

ในกรณีส่วนใหญ่ เช่นเดียวกับปัญหามากมายใน WordPress มันอาจจะเกิดจากปลั๊กอินและหรือธีมที่ขัดแย้งกัน

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

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

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

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

หากอย่างอื่นล้มเหลว คุณควรติดต่อผู้พัฒนาธีม WordPress หรือฝ่ายสนับสนุนเพื่อจำกัดปัญหาให้แคบลงจากจุดสิ้นสุด