Trình quản lý hình ảnh của WordPress đã được nâng cấp rất nhiều theo thời gian và hiện giờ nó đã và đang cung cấp các công cụ mạnh mẽ để quản lý, chỉnh sửa hình ảnh trong WordPress, tạo thư viện ảnh cùng với các tính năng khác. Với WordPress phiên bản 4.0 thì các cải tiến còn mạnh mẽ hơn nhờ trình quản lý hình ảnh đa phương tiện tốt hơn với chế độ xem dạng lưới đẹp mắt.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách kiểm soát kích cỡ hình ảnh trên WordPress, cách chỉnh sửa và quản lý hình ảnh sau khi tải lên, cách nén kích cỡ tệp tin để trang có thể tải nhanh hơn cũng như cách tạo thư viện ảnh và kích hoạt chế độ trình chiếu toàn màn hình đẹp mắt cho thư viện ảnh.

1. Quản lý hình ảnh: Kiểm soát kích cỡ hình ảnh trên WordPress

Khi bạn tải lên một hình ảnh, WordPress sẽ tự động tạo các kích cỡ khác cho hình ảnh đó. Bạn có thể chọn kích cỡ các hình ảnh này ở Settings » Media như hướng dẫn dưới đây:

Trong các tùy chọn này, bạn có thể chọn cắt ảnh đại diện về đúng kích cỡ bạn chỉ định hoặc chúng sẽ được cắt theo tỉ lệ.

Cài đặt kích cỡ ảnh đại diện bài viết cũng có thể thực hiện bằng cách chỉnh sửa file fuction.php của bạn. Như vậy. việc thay đổi kích cỡ hình ảnh đại diện sẽ không ảnh hưởng đến cách hiển thị ảnh thumnail bài viết. Tùy chọn này đặc biệt hữu dụng với các nhà phát triển giao diện.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );

Trong đoạn code phía trên, chúng tôi đã thiết lập kích cỡ ảnh đại diện bài viết là 150 x150px. Thiết lập kích cỡ ảnh đại diện bài viết là một tính năng khá hữu dụng. Nó đi kèm với 3 biến số như sau:

Ở đây, $crop sẽ cho WordPress biết liệu nó có nên cắt hình ảnh không, mặc định sẽ là không nên hãy thiết lập để cho phép WordPress cắt hình ảnh.

2. Chọn kích cỡ hình đại diện khác nhau cho các mẫu khác nhau

Có những lúc bạn có thể muốn có hình đại diện nhỏ trên trên trang chủ và to hơn trong archive page, danh mục hay các bài viết đơn lẻ. Bạn có thể thiết lập kích cỡ các hình ảnh này với tính năng thêm kích cỡ hình ảnh.

add_image_size( 'tag-thumb', 200,200 );
add_image_size( 'homepage-thumb', 220, 180 );

Để hiển thị các kích cỡ hình đại diện, bạn sẽ phải thêm 1 vài đoạn code vào template file. Ở ví dụ trên, chúng tôi đã tạo 2 kích cỡ hình đại diện, 1 cho tags template và 1 homepage template. Để hiển thị hình đại diện thẻ, chúng tôi thêm đoạn mã sau vào mẫu tags.php

3. Chỉnh sửa hình ảnh trên WordPress

WordPress có sẵn 1 trình chỉnh sửa hình ảnh để bạn có thể cắt, căn chỉnh tỷ lệ và lật hình ảnh. Có 2 cách để truy cập trình chỉnh sửa hình ảnh này. Khi tải hình ảnh lên từ trang biên tập bài viết, sau khi tải lên, bạn sẽ thấy liên kết “Edit Image” ở bên tay phải.

Bạn cũng có thể đi đến liên kết  Media » Library trong trình bên quản trị WordPress để hiển thị danh sách các hình ảnh mới nhất và di chuột đến hình bạn cần chỉnh sửa và chọn Edit ở đó.

Nhấn vào nút Edit Image và bạn sẽ thấy một vài tùy chọn như cắt hình ảnh, xoay, lật, chỉnh tỷ lệ hoặc thêm các văn bản,nhận xét, tên, mô tả cho hình ảnh ở đó.

Ngăn WordPress tạo quá nhiều bản sao hình ảnh.

Việc tạo nhiều kích cỡ khác nhau cho hình ảnh khá là hữu dụng. Bạn có thể hiển thị hình ảnh với kích cỡ trung bình trong bài viết, ảnh thumbnail trong trang chủ và trang lưu trữ hoặc hình ảnh với kích cỡ lớn khi có người click vào chúng. Tuy nhiên, có người lại không muốn có tất cả các hình ảnh, mà chỉ muốn có 1 hình ảnh gốc. Họ có thể chỉnh sửa hình ảnh theo kích cỡ họ muốn và hiển thị trên đúng kích cỡ đó, hay đơn giản là họ không muốn có các kích cỡ khác. Hoặc họ đã tạo một kích cỡ riêng cho mẫu của mình và không muốn sử dụng bất kỳ kích cỡ nào khác ngoài kích cỡ đó.

Có 2 cách để thực hiện thao tác này, cái đầu tiên khá đơn giản, đi đến Settings » Media và thiết lập tất các các kích cỡ hình ảnh về 0.

Phương pháp thứ 2 đó là thêm mã dưới đây vào tệp tin functions.php

function dieuhau_remove_image_sizes()
{
unset( $sizes['thumbnail']);
unset( $sizes['medium']);
unset( $sizes['large']);

return $sizes;
}

add_filter('intermediate_image_sizes_advanced', 'dieuhau_remove_image_sizes');

Tự dộng nén hình ảnh

Một điều nữa mà có thể bạn muốn làm đó là tự động tối ưu hóa kích cỡ hình ảnh khi tải lên. Điều này sẽ giúp bài viết của bạn tải nhảnh hơn, tức là sẽ cải thiện hiệu năng trang web và cũng sẽ giúp nâng cao thứ hạng trên các công cụ tìm kiếm – những công cụ luôn ưu thích những trang có tốc độ tải nhanh.

Có một plugin miễn phí mà bạn có thể cài đặt đó là WP Smush.it – plugin sử dụng Yahoo Smush.it API. Tôi đã sử dụng nó trên Dieuhau và nó hoạt động rất tốt. Khuyết điểm duy nhất đó là khi bạn tải lên 1 hình ảnh, nó phải được kết nối với Smush.it API, vì vậy sẽ mất một ít thời gian để hình ảnh xuất hiện sau khi tải lên. Nhưng tôi nghĩ các lợi ích của nó thì rất xứng đáng để sử dụng đấy

Bạn cũng có thể lựa chọn Bulk Smush.it plugin sẽ lọc qua tất cả các hình ảnh cũ và tối ưu hóa chúng. Nếu như bạn có 1 ít hình ảnh thì tính năng này rất ổn, nhưng với Dieuhau thì nó thông báo quá trình sẽ mất đến 10 giờ vì vậy tôi không quan tâm đến tính năng này lắm.

Tạo thư viện ảnh

Nếu bạn muốn tạo 1 thư viện hình ảnh trong bài viết của mình, nhấn vào nút Add Media và Create Gallery để tải lên nhiều hình ảnh hoặc bạn chỉ cần di chuột qua và nhấn chọn các hình ảnh mà bạn muốn để vào thư viện ảnh.

Sau khi tải xong, bạn có thể kéo các hình ảnh để hiển thị theo cách mình muốn, và cũng có thể xóa hoặc thêm hình ảnh. Sau khi xong, bạn nhấn nút Insert Gallery và thư viện ảnh sẽ được thêm vào bài viết của bạn.

Giao diện của bạn sẽ hiển thị thư viện ảnh dưới định dạng lưới và khi một hình ảnh được nhấn vào, người xem sẽ được điều hướng đến trang đơn hình ảnh, giúp bạn dễ dàng quản lý hình ảnh hơn

Trình chiếu thư viện ảnh

Nếu bạn muốn nâng cấp hiển thị thư viện ảnh trên , có một tính năng trong Jetpack plugin gọi là Carousel. Khi đã kích hoạt, nhấn vào 1 thư viện ảnh sẽ chạy thư viện ảnh toàn màn hình với nút tiếp theo và trước để người xem có thể duyệt thư viện ảnh toàn màn hình.

Tính năng này cực kì phù hợp với các trang web portfolio và các nhà nhiếp ảnh muốn trưng bày các hình ảnh của mình. Thậm chí nó còn có 1 tùy chọn có thể hiển thị dữ liệu EXIF.

Như vậy với bài viết trên, tôi tin chắc rằng bạn đã nắm rõ cách quản lý hình ành một cách tối ưu nhất cho website của mình. Hi vọng bài viết trên có thể giúp ích cho bạn, có thể bạn cũng quan tâm đến Làm thế nào để khắc phục mất màu sắc của hình ảnh trên WordPress

Ngoài ra chúng tôi cũng muốn giới thiệu đến bạn một plugin quản lý hình ảnh Hướng dẫn sử dụng WP Media Folder để sắp xếp Media Library gọn gàng hơn nó gồm rất nhiều tính năng mạnh mẽ hãy dùng thử nó nhé.