5 เคล็ดลับสำหรับการสร้างธีม WordPress พร้อม Retina

ธีม WordPress พร้อมเรตินา หากคำนึงถึงความหนาแน่นของพิกเซลสูงของจอแสดงผลเรตินาและให้บริการรูปภาพที่มีขนาดเหมาะสมสำหรับจอแสดงผลเหล่านี้ มีบางสิ่งที่ควรพิจารณาเมื่อสร้างเรตินาของธีม WordPress: 1. ใช้รูปภาพที่มีความละเอียดสูง จอภาพ Retina มีความหนาแน่นของพิกเซล 2 หรือ 3 เท่าของจอภาพมาตรฐาน ดังนั้นรูปภาพของคุณต้องมีขนาดใหญ่ขึ้น 2 หรือ 3 เท่าจึงจะดูคมชัดบนอุปกรณ์เหล่านี้ 2. ใช้การออกแบบที่ตอบสนอง การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์จะช่วยให้แน่ใจว่าธีมของคุณจะดูดีบนอุปกรณ์ทั้งหมด รวมถึงจอแสดงผลเรตินา 3. ใช้ปลั๊กอินเช่น WP Retina 2x ปลั๊กอินนี้จะสร้างรูปภาพที่มีความละเอียดสูงโดยอัตโนมัติและให้บริการแก่ อุปกรณ์เรตินา 4. เพิ่มประสิทธิภาพภาพของคุณ ตรวจสอบให้แน่ใจว่าได้ปรับรูปภาพของคุณให้เหมาะสมเพื่อให้โหลดเร็วขึ้น 5. ใช้ปลั๊กอินแคช ปลั๊กอินแคชจะช่วยเร่งความเร็วการโหลดหน้าของคุณบนอุปกรณ์ทั้งหมดรวมถึงจอเรตินา เมื่อปฏิบัติตามคำแนะนำเหล่านี้ คุณจะมั่นใจได้ว่าธีม WordPress ของคุณพร้อมสำหรับเรตินา

เนื่องจาก การสนับสนุน Retina จะพร้อมใช้งานสำหรับธีม WordPress ของเราในอีกไม่กี่สัปดาห์ข้างหน้า ฉันต้องการแชร์ว่าเราสร้างธีมเหล่านี้กับคุณอย่างไร การปรับปรุงธีมของคุณจะเพิ่มขนาดอุปกรณ์ Retina เป็นสองเท่า (โดยมีขนาดเท่ากัน) โดยการแสดงผลรูปภาพเป็นสองเท่า (แต่มีขนาดเท่ากัน) หากต้องการแสดงรูปภาพขนาด 100×200 เบราว์เซอร์จะต้องบีบอัดรูปภาพให้เหลือ 100×400 ภาพพื้นหลัง CSS และ Sprite ไม่สามารถแทนที่ด้วย Retina.js เนื่องจากไม่ได้ใช้แท็ก HTML ต้องอัปเดตไอคอนและปุ่มเพื่อให้เว็บไซต์ของคุณดูคมชัดและตอบสนองบนจอแสดงผลเรตินา เอกสารประกอบสำหรับ Font Awesome นั้นยอดเยี่ยม และเป็นหนึ่งในไลบรารีไอคอนฟอนต์ที่แข็งแกร่งที่สุด ไอคอนแบบอักษรส่วนใหญ่ได้รับการติดตั้งโดยเพียงแค่อัปโหลดไฟล์และเพิ่มการประกาศ @Font-face

คุณยังสามารถเพิ่มไอคอนฟอนต์เจ๋งๆ เช่น โลโก้ Facebook ลงในเทมเพลตนี้ ซึ่งสามารถปรับขนาดและปรับแต่งได้ วิธีที่ง่ายที่สุดในการสร้าง favicon พร้อมเรตินาคือการใช้จาวาสคริปต์อย่างง่าย เพียงสร้างเอกสาร Photoshop ขนาด 32×32 เพิ่มรูปภาพของคุณ และบันทึกเป็น png24 (แบบโปร่งใส) โดยใช้ Photoshop

ฉันจะสร้างรูปภาพพร้อม Retina ได้อย่างไร

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

สามารถเปิดใช้งาน FooGallery ในแท็บรูปภาพเพื่อแสดงรูปภาพที่พร้อมใช้เรตินา เมื่อเลือกขนาด Retina และคลิกใช้ค่าเริ่มต้นกับแกลเลอรีทั้งหมด รูปภาพที่พร้อมสำหรับแสดงในรูปแบบ Retina จะถูกสร้างขึ้นสำหรับแกลเลอรีที่มีอยู่ทั้งหมด หากคุณเพิ่มแกลเลอรีใหม่ แกลเลอรีจะสร้างรูปภาพขนาดเรตินาโดยอัตโนมัติ เมื่อรูปภาพ FooGallery แสดงบนหน้าจอปกติหรือหน้าจอ Retina HTML ของรูปภาพจะถูกปรับให้แสดงเป็น 300*300 พิกเซลโดยอัตโนมัติ หากคุณเปิดใช้งานขนาดภาพ Retina สำหรับแกลเลอรีของคุณ ตรวจสอบให้แน่ใจว่าภาพใดๆ ที่คุณจะแสดงใน FooGallery มีขนาดใหญ่พอที่จะแสดงบนอุปกรณ์ Retina ตัวอย่างเช่น หากคุณต้องการแสดงรูปภาพ 600600 อย่างชัดเจนบนอุปกรณ์เรตินาสองมิติ คุณจะต้องอัปโหลดรูปภาพในแกลเลอรีที่มีความละเอียด 12001,200 เมื่อคุณเปิดใช้งานการตั้งค่าเรตินา 2x และ 3x คุณจะสามารถสร้างนิ้วหัวแม่มือของคุณได้สามแบบ

ทำให้เว็บไซต์ของคุณพร้อม Retina-ready

เมื่อดูเว็บไซต์ที่พร้อมใช้เรตินา รูปภาพจะแสดงที่ความละเอียดสูงกว่าที่แสดงบนจอแสดงผลความละเอียดมาตรฐานบนอุปกรณ์ความละเอียดสูง ความละเอียดที่สูงขึ้นนี้ช่วยให้การนำเสนอภาพมีรายละเอียดมากขึ้น ทำให้เข้าใจและมองเห็นได้ง่ายขึ้น
หากคุณต้องการใช้ซอฟต์แวร์ที่พร้อมใช้เรตินาสำหรับเว็บไซต์ของคุณ ขอแนะนำให้ใช้ Scalable Vector Graphics (SVG) ให้มากที่สุด รูปแบบกราฟิกนี้เป็นแบบ XML และมีรูปภาพคุณภาพสูง ในการดูภาพ SVG สามารถเข้าถึงไฟล์ XML หรือโทรศัพท์มือถือที่แสดงไฟล์เหล่านั้นได้ผ่านทางอินเทอร์เน็ตเบราว์เซอร์
ขอแนะนำให้ใช้ภาพที่พร้อมเรตินาก่อนใช้งาน คุณสามารถทำได้โดยใช้ภาพขนาด 1920×1920 พิกเซล ซึ่งเรียกว่า “2x” เนื่องจากรูปภาพจะยังคงอยู่บนเว็บไซต์ที่มีความกว้าง 640 พิกเซล คุณกำลังเพิ่มความหนาแน่นของพิกเซลโดยใช้รูปภาพที่มีขนาดเป็นสองเท่า
หากคุณใช้รูปภาพที่ไม่พร้อมสำหรับเรตินา ให้ปรับให้เหมาะสมเพื่อแสดงบนเรตินา ซึ่งสามารถทำได้โดยใช้ภาพความละเอียด 4x หรือที่เรียกว่า “ความละเอียด 4x” แม้ว่ากราฟิกจะมีขนาดกว้าง 1024 พิกเซล แต่ภาพจะยังคงปรากฏบนไซต์ของคุณเนื่องจากมีขนาดใหญ่กว่าสี่เท่า

ธีม WordPress พร้อม Retina คืออะไร?

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

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

เครื่องมือปรับแต่งธีมทำให้ง่ายต่อการติดตั้งและปรับแต่ง Pin Maker – ธีมบล็อก WordPress ที่ตอบสนอง ธีม WordPress นี้มีเนื้อหา HTML5 / CSS3 และอิงตาม Twitter Bootstrap รองรับเรตินา ใช้งานข้ามเบราว์เซอร์ได้ และตอบสนองได้อย่างเต็มที่ ธีม Prothoma – Business WordPress สามารถใช้ได้กับธุรกิจหลากหลายประเภท รวมถึงเอเจนซีและธุรกิจดิจิทัล Pin Auto Spa เป็นธีม WordPress ที่ให้รายละเอียดอัตโนมัติ ธีม WordPress ที่พร้อมใช้จอประสาทตานี้เหมาะสำหรับธุรกิจล้างรถ อู่ซ่อมรถ และอู่ซ่อมรถ ตลอดจนบริการด้านรถยนต์ Legatus เป็นตัวเลือกที่เหมาะสำหรับบล็อก นิตยสารออนไลน์ หนังสือพิมพ์ออนไลน์ และสิ่งพิมพ์อื่นๆ เนื่องจากมีการออกแบบที่ตอบสนองได้ดี

เปิดใช้งานภาพ Retina สำหรับเว็บไซต์ที่ชัดเจน

คลิกที่แท็บ "ลักษณะที่ปรากฏ" หลังจากติดตั้งปลั๊กอินในแผงผู้ดูแลระบบ WordPress ตัวเลือก “ Retina Images ” จะอยู่ในส่วน “WP Retina 2x” ของหน้า หากต้องการเปิดใช้งานภาพเรตินา ให้ไปที่ปุ่ม "เปิดใช้งาน"

ฉันจะเพิ่มรูปภาพ Retina ให้กับ WordPress ได้อย่างไร

การเพิ่มรูปภาพเรตินาใน WordPress เป็นกระบวนการสองขั้นตอน: ขั้นแรก คุณต้องเพิ่มรูปภาพที่มีความละเอียดสูงกว่าในไลบรารีสื่อของคุณ จากนั้นคุณต้องเพิ่มโค้ดหนึ่งบรรทัดลงในไฟล์ functions.php ของธีมของคุณ หากต้องการเพิ่มรูปภาพที่มีความละเอียดสูงลงในไลบรารีสื่อของคุณ เพียงอัปโหลดสำเนารูปภาพที่มีขนาดเป็นสองเท่าของรูปภาพปกติ ตัวอย่างเช่น หากรูปภาพปกติของคุณคือ 400x300px รูปภาพเรตินาของคุณควรมีขนาด 800x600px เมื่อคุณมีภาพเรตินาในไลบรารีสื่อของคุณแล้ว คุณต้องเพิ่มโค้ดหนึ่งบรรทัดลงในไฟล์ functions.php ของธีมของคุณ โค้ดบรรทัดนี้จะบอกให้ WordPress ให้บริการภาพเรตินากับอุปกรณ์เรตินา: add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); ฟังก์ชัน retina_support_src( $image ) { $image[0] = str_replace( '.jpg', '@2x.jpg', $image[0] ); ส่งคืนรูปภาพ $; } ด้วยรหัสนี้ WordPress จะแสดงภาพเรตินาโดยอัตโนมัติไปยังอุปกรณ์เรตินาที่เข้าชมไซต์ของคุณ

รูปภาพ WordPress Retina

สมมติว่าคุณต้องการคำแนะนำเกี่ยวกับวิธีการสร้างภาพเรตินาสำหรับ WordPress: เมื่อสร้างภาพสำหรับเว็บไซต์ WordPress ของคุณ อย่าลืมสร้างเวอร์ชันที่มีขนาดใหญ่เป็นสองเท่าของภาพมาตรฐานของคุณ ตัวอย่างเช่น หากรูปภาพมาตรฐานของคุณกว้าง 400px ให้สร้างภาพเรตินาที่มีความกว้าง 800px ตั้งชื่อภาพตามสิ่งที่เป็น แล้วใส่ “@2x” ต่อท้ายชื่อไฟล์ภาพเรตินา ดังนั้น หากภาพมาตรฐานของคุณมีชื่อว่า “logo.jpg” ภาพเรตินาของคุณจะมีชื่อว่า “[email protected]” อย่าลืมบีบอัดภาพเรตินาเพื่อไม่ให้เว็บไซต์ของคุณช้าลง แค่นั้นแหละ! เมื่อทำตามคำแนะนำง่ายๆ เหล่านี้ คุณจะมั่นใจได้ว่ารูปภาพของคุณจะดูดีบนอุปกรณ์ทุกเครื่อง รวมถึงอุปกรณ์เรตินาด้วย

หากคุณไม่ได้ใช้ภาพ Retina เว็บไซต์ของคุณจะช้าลงสำหรับผู้ใช้ทั้งหมด พื้นที่ของพิกเซลจะเหมือนกับในภาพมาตรฐาน ทำให้ได้ภาพที่คมชัดและสว่างขึ้น เมื่ออุปกรณ์สมัยใหม่ที่ไม่ใช่ของ Apple แสดงภาพ @2x จะถือว่าเป็นภาพที่ใหญ่ขึ้น ภาพ Retina สร้างขึ้นโดยใช้ WP Retina 2X ซึ่งเป็นโปรแกรม สร้างภาพ Retina ที่ใช้กันอย่างแพร่หลายมากที่สุดสำหรับไซต์ WordPress บริการนี้ยังให้ภาพปกติสำหรับผู้ใช้ที่ไม่มีหน้าจอเรตินา คุณจะทราบได้อย่างไรว่าภาพมีให้ใช้งานบนจอแสดงผลเฉพาะหรือไม่ หากคุณไม่มีอุปกรณ์ Apple ให้ทดสอบ เครื่องมือพัฒนา Chrome ช่วยคุณได้

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ – วิธีที่ดีที่สุดในการสร้างภาพ Retina สำหรับเว็บไซต์ของคุณ

รูปภาพเรตินาของ WordPress เป็นภาพ ความละเอียดสูงที่สามารถเห็นได้บนจอภาพ 4K, แล็ปท็อป Windows 10 หรือแท็บเล็ต คุณสามารถสร้างภาพเรตินาของเว็บไซต์ของคุณได้อย่างง่ายดายโดยใช้ Scalable Vector Graphics (SVG) ทุกครั้งที่ทำได้ เมื่อพูดถึงการปรับภาพให้เหมาะสมสำหรับการแสดงเรตินา คุณสามารถขยายภาพให้ใหญ่สุดได้โดยใช้ภาพกว้าง 1920 × 130 พิกเซลที่ได้รับการปรับให้เหมาะสม