Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62

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

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

การตอบสนองภาพ-Trac-WordPress

การทำงานของรูปภาพที่ตอบสนองได้ดีเพียงใด

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

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

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

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

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

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

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

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

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

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

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

รหัสแหล่งที่มา-WP-ภาพที่ตอบสนองต่อ

มีการเพิ่มฟังก์ชั่นใหม่สำหรับแอตทริบิวต์ " srcset "และ" ขนาด สามารถเพิ่มลงในรูปภาพที่ถูกเพิ่มลงใน WordPress ผ่าน Media Manager นอกเหนือจากรูปภาพที่เพิ่มเพื่อแสดงเนื้อหา ฟังก์ชั่น wp_get_attachment_image_sizes จะส่งคืนแอตทริบิวต์เริ่มต้น " ขนาด ซึ่งสามารถแก้ไขได้โดยตัวกรองของธีมของคุณในไฟล์ " functions.php " ฟังก์ชั่น wp_get_attachment_image_srcset จะส่งคืนแอตทริบิวต์ srcset »ซึ่งจะมีขนาดทั้งหมดของรูปภาพที่ร้องขอ เอกสารและตัวอย่างการใช้ฟังก์ชันใหม่เหล่านี้สามารถพบได้ ไดเรกทอรีอ้างอิงของนักพัฒนา.

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

ด้วยคุณสมบัติใหม่มาพร้อมกับวงเล็บใหม่หลายตัวที่สามารถใช้เพื่อรองรับระดับใหม่สำหรับภาพที่ตอบสนองซึ่งเหมาะกับธีมของคุณมากที่สุด เบ็ด max_srcset_image_width "จะช่วยให้นักพัฒนาธีมสามารถกรองความกว้างสูงสุดของรูปภาพเพื่อรวมไว้ใน" srcset " เบ็ด wp_calculate_image_srcset »จะกรองคุณสมบัติ« srcset »รูปภาพในขณะที่ขอ (ตัวกรอง) « wp_calculate_image_sizes "จะช่วยให้ผู้พัฒนาธีมสามารถปรับแต่ง" ขนาด เพื่อให้ตรงกับเบรกพอยต์ของรูปภาพในธีมได้ดีขึ้น

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

ตัวกรองภาพที่ตอบสนอง กวดวิชา WordPress#

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

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

 

%d บล็อกเกอร์ชอบหน้านี้: