Một thay thế tốt cho việc sử dụng $ content_creen để tối ưu hóa hình ảnh là gì?


14

Các $content_widthGLOBAL trong WordPress hiệu quả nhiều chủ đề và thậm chí một số plugin bằng cách hạn chế kích thước của hình ảnh và nhúng trong bài viết, nó là một yêu cầu cho các chủ đề trình lên wordpress.org.

Nó được thiết lập bằng cách sử dụng:

$content_width = 584; // Twenty Twelve example

Nếu bạn chèn một hình ảnh lớn (mặc định 1024x1024) vào bài đăng thì kết quả là:

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

Thay vào đó, nếu bạn xóa cài đặt chung này và chèn kích thước hình ảnh thực tế, hãy đặt với add_image_sizenó dẫn đến:

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

Xóa toàn cầu và chèn hình ảnh lớn, rất phổ biến , thường dẫn đến việc tiết kiệm hơn 2 lần, trong các trang có nhiều hình ảnh tôi thấy hàng trăm KB được lưu khi tải trang.

Là sử dụng add_image_sizevà loại bỏ khả năng chèn hình ảnh kích thước đầy đủ không phải là một lựa chọn tốt hơn?

ps. Tôi đã viết về nó ở đây với dữ liệu chính xác hơn


1
Điều này nghe có vẻ như là một cái gì đó để đưa lên danh sách gửi thư của wp-hacker .
eddiemoya

Câu trả lời:


7

Hãy nhớ rằng $content_widthtoàn cầu không chỉ được sử dụng cho hình ảnh, mà còn cho các đối tượng nhúng, chẳng hạn như video. Vì vậy, bất kỳ giải pháp nào sẽ không chỉ là một trường hợp bỏ sử dụng / hỗ trợ của $content_widthchính nó.

Thông thường, một Chủ đề sẽ hạn chế hình ảnh khu vực nội dung theo một số cách:

  1. Lớn kích thước hình ảnh: Xác định $content_widthmột cái gì đó thích hợp cho việc thiết kế Theme
  2. Kích thước hình ảnh gốc / đầy đủ : Xác định quy tắc CSS #content img { max-width: XXX; height: auto; }để đảm bảo rằng hình ảnh kích thước đầy đủ được chèn không phá vỡ bố cục
  3. Hình thu nhỏ Kích thước hình ảnh: Gọi set_post_thumbnail_size()để xác định thumbnailkích thước mặc định của hình ảnh / bài đăng Hình thu nhỏ . (Lưu ý: Cá nhân tôi không khuyên bạn nên sử dụng phương pháp này. Xác định kích thước hình ảnh tùy chỉnh cụ thể cho một vị trí nhất định cho hình ảnh nổi bật và sau đó gọi kích thước tùy chỉnh đó trong vị trí mẫu cụ thể, thông qua the_post_thumbnail( $size ).)

Như bạn đã phát hiện ra, do cách WordPress chọn với kích thước hình ảnh trung gian để sử dụng cho bất kỳ yêu cầu hình ảnh cụ thể nào, yêu cầu đó có thể dẫn đến hình ảnh có tỷ lệ trình duyệt.

Giá trị được xác định theo chủ đề cho hình ảnh lớn

Một lựa chọn sẽ là xác định lại các cài đặt cho kích thước hình ảnh lớn . (Tiếp tục thận trọng. Điều này tốt cho trang web của riêng bạn, nhưng Chủ đề được phân phối công khai gây rối với cài đặt cấu hình người dùng là ... tốt nhất là khu vực màu xám.)

Cài đặt kích thước hình ảnh lớn được lưu trữ dưới dạng:

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

Vì vậy, bạn có thể đặt các giá trị đó theo giá trị của mình $content_width:

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

(Tất nhiên, bạn muốn đặt một số kiểm tra lỗi / an toàn xung quanh vấn đề này, nếu phù hợp.)

Xóa tùy chọn để chèn hình ảnh kích thước đầy đủ

Nếu bạn chỉ đơn giản muốn ngăn người dùng chèn hình ảnh kích thước đầy đủ (một lần nữa: hãy thận trọng; đây có thể là lãnh thổ Plugin), bạn có thể lọc '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' );

Một lần nữa: bạn có thể muốn thêm một số lỗi không lành mạnh ở đây, vì bộ lọc này được sử dụng ở nhiều nơi.

Xác định kích thước hình ảnh tùy chỉnh cho hình ảnh toàn chiều rộng

Liên quan đến tùy chọn trước đó, bạn có thể xác định 'full-post-width'kích thước hình ảnh:

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

Sau đó, thêm nó vào danh sách các tùy chọn có sẵn:

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' );

Cảm ơn Chip vì câu trả lời toàn diện, tôi đã không nghĩ đến việc thiết lập các get_optiongiá trị. Phần còn lại tương tự như ý chính tôi đang sử dụng gist.github.com/wycks/4949242 được liên kết trong liên kết của tôi. Ngoài ra, nó dường như là một khu vực màu xám về cách thực hiện quy mô này thực sự nếu chủ đề được thay đổi.
Wyck

Ngoài ra tôi quên đề cập đến việc loại bỏ $content_width hoặc không cài đặt nó, nó vẫn được áp dụng theo mặc định cho các đối tượng nhúng mà tôi nghĩ.
Wyck

Chưa bao giờ thấy điều đó image_size_names_choose bộ lọc cho đến bây giờ! Bây giờ tôi đã thay thế toàn bộ lĩnh vực đó để có được kích thước tùy chỉnh của mình. Có phải đó là mới trong 3.5 Chip?
sanchothefat

Tôi nghĩ rằng đã có từ ngày 3.3, tôi đã sử dụng nó để tạo ra các nhãn của add_image_size đa ngôn ngữ, và sau đó tôi nghĩ rằng nó cũng sẽ tốt khi sử dụng cho vấn đề kích thước hình ảnh này. Nếu bạn không cần bản địa hóa, bạn có thể chỉ cần bôi nó vào mảng thay vì mã hóa nó.
Wyck

@sanchothefat Tôi không chắc chắn khi nó được thêm vào. Hình như Wyck nói là 3,3? Tôi luôn thích tìm kiếm thông qua nguồn, khi tôi cần mở rộng / sửa đổi một cái gì đó và thấy rằng một bộ lọc đã được thêm vào thứ cụ thể đó. :)
Chip Bennett

2

Vâng tôi cũng nghĩ thế. Để giải $content_widthquyết vấn đề cho các chủ đề được gửi tới repo, tôi sử dụng các bộ lọc tùy chọn để buộc các kích thước mà tôi đã chọn cho thiết kế.

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...
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.