อะไรคือทางเลือกที่ดีในการใช้ $ content_width สำหรับการปรับภาพให้เหมาะสม

$content_widthระดับโลกในด้านผลกระทบธีม WordPress จำนวนมากและยังปลั๊กอินบางส่วนโดยการ จำกัด ขนาดของภาพและการฝังในการโพสต์ก็เป็นความต้องการสำหรับรูปแบบที่ส่งไปยัง wordpress.org

มันถูกตั้งค่าโดยใช้:

$content_width = 584; // Twenty Twelve example

หากคุณแทรกภาพขนาดใหญ่ (ค่าเริ่มต้น 1024x1024) ลงในโพสต์จะส่งผลให้:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

หากคุณลบการตั้งค่าส่วนกลางนี้และใส่ขนาดภาพจริงให้ตั้งค่าโดยadd_image_sizeใช้ผลลัพธ์:

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

การลบภาพขนาดใหญ่ทั่วโลกและแทรกภาพขนาดใหญ่ซึ่งเป็นเรื่องปกติมากมักส่งผลให้ประหยัดได้มากกว่า 2x ในหน้าเว็บที่มีภาพหลายภาพฉันเห็นการบันทึกหลายร้อย KBเมื่อโหลดหน้าเว็บ

การใช้add_image_sizeและการลบความสามารถในการแทรกภาพขนาดเต็มไม่ใช่ตัวเลือกที่ดีกว่าหรือไม่

PS ฉันเขียนถึงที่นี่พร้อมกับข้อมูลที่แม่นยำยิ่งขึ้น

โปรดทราบว่า$content_widthทั่วโลกไม่เพียง แต่ใช้สำหรับรูปภาพ แต่ยังรวมถึงวัตถุที่ฝังเช่นวิดีโอ ดังนั้นการแก้ปัญหาใด ๆ จะไม่เพียง แต่เป็นกรณีของการลดการใช้ / การสนับสนุนของ$content_widthตัวเอง

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

1. ขนาดภาพใหญ่: การกำหนด$content_widthสิ่งที่เหมาะสมสำหรับการออกแบบธีม
2. ขนาดภาพต้นฉบับ / เต็ม : การกำหนดกฎ CSS #content img { max-width: XXX; height: auto; }เพื่อให้แน่ใจว่าภาพขนาดเต็มที่ถูกแทรกไม่ทำให้เค้าโครงเสียหาย
3. ขนาดรูปภาพขนาดย่อ : การโทรset_post_thumbnail_size()เพื่อกำหนดขนาดเริ่มต้นของรูปภาพthumbnailขนาดเล็ก (หมายเหตุ: ฉันไม่แนะนำให้ใช้วิธีนี้เป็นการส่วนตัวกำหนดขนาดรูปภาพที่กำหนดเองที่เฉพาะเจาะจงกับตำแหน่งที่กำหนดสำหรับรูปภาพที่แนะนำแล้วเรียกขนาดที่กำหนดเองนั้นในตำแหน่งเทมเพลตเฉพาะผ่านthe_post_thumbnail( $size ))

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

ค่ากำหนดธีมสำหรับรูปภาพขนาดใหญ่

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

การตั้งค่ามิติภาพขนาดใหญ่ถูกจัดเก็บเป็น:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

ดังนั้นคุณสามารถตั้งค่าเหล่านั้นตามค่าของคุณ$content_width:

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(แน่นอนว่าคุณต้องการทำให้เกิดความผิดพลาด / การตรวจสอบข้อผิดพลาดตามความเหมาะสม)

ลบตัวเลือกเพื่อแทรกภาพขนาดเต็ม

หากคุณต้องการป้องกันไม่ให้ผู้ใช้แทรกภาพขนาดเต็ม (อีกครั้ง: ดำเนินการด้วยความระมัดระวังนี่อาจเป็นอาณาเขตของปลั๊กอิน) คุณสามารถกรอง'image_size_names_choose':

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

อีกครั้ง: คุณอาจต้องการเพิ่มร้านกาแฟที่ผิดพลาดที่นี่เนื่องจากตัวกรองนี้ใช้มากกว่าหนึ่งแห่ง

กำหนดขนาดภาพที่กำหนดเองสำหรับภาพเต็มความกว้างโพสต์

เกี่ยวข้องกับตัวเลือกก่อนหน้านี้คุณสามารถกำหนด'full-post-width'ขนาดภาพ:

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

จากนั้นเพิ่มลงในรายการตัวเลือกที่มี:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

ใช่ฉันก็คิดว่าอย่างนั้น. เพื่อ$content_widthแก้ไขปัญหาสำหรับชุดรูปแบบที่ส่งไปยัง repo ฉันใช้ตัวกรองตัวเลือกเพื่อบังคับขนาดที่ฉันเลือกสำหรับการออกแบบ

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...