Thêm kích thước ảnh tùy chọn vào WordPress Media Library
Khi bạn upload ảnh lên WordPress nó sẽ tự động tạo ra nhiều ảnh với các kích thước khác nhau được WordPress đăng ký sẵn, tuy nhiên đó là chưa phải tất cả những gì bạn cần, bạn sẽ cần thêm các kích thước ảnh tùy chọn khác để phù hợp với hơn với trang web. Bài sau sẽ hướng dẫn bạn đăng ký kích thước ảnh mới và đưa nó vào danh sách lựa chọn để hiển thị.
Đăng ký kích thước ảnh tùy chọn
Sử dụng hàm hỗ trợ của WordPress add_image_size. Cách sử dụng cơ bản của hàm:
|
1 |
add_image_size( 'new-image-size', $width, $height, $crop_mode ); |
Bạn có thể thay new-image-size bằng tên bạn mong muốn (lưu ý ghi nhớ để sau này gọi nếu cần). Bạn cũng có thể thay $width và $height bằng kích thước bạn cần, đồng thời bạn nên thiết lập $crop_mode cho hình ảnh.
Thông số của $crop_mode được thiết lập như sau:
- Soft crop (Cắt tương đối) – Đây là chế độ mặc định khi bạn đăng ký hình ảnh mà không để $crop_mode, thay thế $crop_mode bằng false để chọn chế độ này. Hình ảnh sẽ được co dãn theo chiều rộng và chiều cao sẽ thay đổi theo tỉ lệ để phù hợp với chiều rộng.
- Hard crop (Cắt chính xác ở trung tâm ảnh) – Để dùng tính năng này, thay thế $crop_mode bằng true. Hình ảnh sẽ được cắt chính xác ở trung tâm theo kích thước bạn đã đăng ký, rất phù hợp cho web của bạn tuy nhiên nó sẽ không được cắt theo tỉ lệ ban đầu của hình ảnh.
- Hard crop with postions (Cắt chính xác với vị trí bạn chọn) – Hình ảnh sẽ được cắt một cách chính xác với các vị trí trên ảnh bạn chọn. Để chọn chế độ này thay thế $crop_mode bằng array(‘x_pos’, ‘y_pos’), và bạn phải thay thế x_pos, y_pos bằng vị trí bạn cần. x_pos là vị trí theo chiều rộng, nó có thể là: ‘left’, ‘center’ hoặc ‘right’, x_pos là vị trí theo chiều cao, nó có thể là: ‘top’, ‘center’ hoặc ‘bottom’.
Mình ví dụ đăng ký 1 kích thước mới 480 x 320 với chế độ cắt chính xác cho sản phẩm. Để đăng ký đầy đủ bạn cần để nó trong hook after_setup_theme của WordPress:
|
1 2 3 4 5 |
function mytheme_setup() { add_image_size( 'product-image-size', 480, 320, true ); // hoặc add_image_size( 'product-image-size', 480, 320, array('top', 'center') ); } add_action( 'after_setup_theme', 'mytheme_setup' ); |
Thêm kích thước ảnh mới vào Media để lựa chọn
Khi bạn xong điều này, bạn tiến hành upload 1 ảnh mới và có thể thấy kích thước ảnh bạn đã đăng ký xuất hiện để bạn lựa chọn.
|
1 2 3 4 5 6 |
add_filter( 'image_size_names_choose', 'add_image_size_to_media' ); function add_image_size_to_media( $sizes ) { return array_merge( $sizes, array( 'product-image-size' => __( 'Product Image Size' ) ) ); } |
Lưu ý: bạn phải để chính xác tên ảnh bạn đã đăng ký ở trên, của mình ví dụ là product-image-size
Sau khi chọn, hình ảnh của bạn sẽ được hiển thị đúng kích thước mong muốn.
Gọi kích thước ảnh đã đăng ký bằng code
Bạn có thể gọi ảnh với kích thước bạn đã đăng ký với bất kỳ đâu ở trong theme nếu bạn mong muốn.
Ví dụ gọi trong trang bài viết chi tiết hoặc trong vòng lặp bài viết:
|
1 2 3 |
if ( has_post_thumbnail() ) { the_post_thumbnail( 'product-image-size' ); } |
Lưu ý: bạn phải gọi chính xác tên ảnh bạn đã đăng ký ở trên, của mình ví dụ là product-image-size
Hoặc ví dụ bạn có thể gọi bất kỳ nơi đâu trong theme nếu bạn có attachment_id (id của media chứa ảnh bạn upload lên):
|
1 |
echo wp_get_attachment_image( 69, 'product-image-size' ); |
Tạo lại ảnh với kích thước mới cho những ảnh đã upload trước đó
Trường hợp bạn đã upload nhiều ảnh trước khi bạn đăng ký size ảnh mới này thì nếu muốn dùng các ảnh cũ đó với kích thước mới này thì bạn cần sẽ phải tạo lại chúng.
Đừng quá lo lắng, bạn chỉ cần cài đặt plugin Regenerate Thumbnails và vào Tools -> Regen. Thumbnails với 1 click bạn sẽ có đầy đủ những hình ảnh với kích thước mới.
Kết luận
WordPress hỗ trợ thật thú vị đúng không nhỉ, tuy nhiên để hình ảnh đẹp và chính xác hơn thì bạn sẽ phải cần làm thêm những thứ trên nữa. Các bạn có thắc mắc cứ vui lòng để lại comment, mình sẽ hướng dẫn. Chúc các bạn thành công!
Nguồn: https://www.phanthanhphu.com/them-kich-thuoc-anh-tuy-chon-vao-wordpress-media-library/