Quản trị hình ảnh một cách tối ưu trên WordPress

Hình ảnh là yếu tố quan trọng giúp tăng trải nghiệm của người dùng trên web. Tuy nhiên, nhiều người vẫn còn tỏ ra thờ ơ với việc quản lý hình ảnh trên trang web của mình. Để giúp bạn hiểu hơn về vai trò quan trọng, tính năng Media Library trên WordPress đồng thời biết cách lưu trữ, quản lý hình ảnh hiệu quả hơn. Chúng tôi sẽ cung cấp những hướng dẫn chi tiết trong bài viết dưới đây.

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.

Chèn ảnh vào WordPress

Có 3 cách để bạn chèn ảnh vào bài viết:

• Up ảnh trực tiếp lên host
• Lấy ảnh có sẵn trong thư viện các ảnh đã up của bạn
• Lấy ảnh từ một nguồn bên ngoài

1. Up ảnh lên

Để up ảnh lên, bạn nhấn vào biểu tượng Add Media / Thêm Media như bên dưới:

Một cửa sổ như thế này bật ra:

Bạn nhấn Select Files rồi chọn ảnh trên máy tính của bạn:

Nếu up ảnh thành công, bạn sẽ thấy một cửa số hiện lên như sau:

Bạn click vào Insert into post, là ảnh sẽ chèn vào vị trí mà con trỏ chuột trước đó ở trong bài viết.

2. Chèn ảnh có sẵn trong thư viện ảnh đã up của bạn

Thao tác như sau:

Đầu tiên bạn cũng nhấn vào Add Media, cửa sổ bật ra và bạn nhấn vào tab Media Library để vào kho lưu trữ các ảnh đã up, nó giống như thế này:

Bạn có thể dễ dàng chọn ảnh muốn chèn bằng cách click vào ảnh nào mà bạn muốn. Tuy nhiên khi số lượng ảnh nhiều lên, việc tìm ảnh cũ có thể không dễ dàng thông qua tìm bằng mắt. Khi đó bạn nên sử dụng chức năng tìm kiếm bên tay phải ở chỗ Search media items, bạn cũng có tùy chọn lọc ảnh qua ngày tháng up ảnh ở All dates.

Sau khi chọn đúng ảnh mà mình muốn, bạn cũng nhấn Insert into Post để chèn ảnh vào bài viết.

3. Chèn ảnh từ một nguồn bên ngoài

Để sử dụng tính năng này thì trình soạn thảo văn bản của bạn nên cài đặt thêm plugin có tên TinyMCE Advanced, đây cũng là plugin rất nhiều người đang dùng để hỗ trợ việc biên tập nội dung. Bài viết về cách biên tập nội dung trên WordPress mà mình nói ở phần đầu cũng sử dụng plugin này để minh họa các chức năng.

Sau khi cài xong bạn vào khu vực settings của nó để lôi tính năng chèn ảnh vào trình soạn thảo, rồi nhấn save changes:

Trình soạn thảo sẽ hiển thị biểu tượng bạn mới thêm.

Để chèn ảnh bạn chỉ cần click vào nó, cửa sổ sau sẽ bật ra:

Khu vực Source chính là nơi bạn copy và paste link ảnh từ nguồn bên ngoài vào.

Ví dụ mình up ảnh của Messi, sao chép đường dẫn của wikimedia.org (tác giả bức ảnh: Darz Mol):

Kết quả:

Có 2 lưu ý nhỏ về tính năng này:

• Vì chèn ảnh từ nguồn bên ngoài theo kiểu này ảnh hưởng đến SEO cho nên bần cùng bất đắc dĩ bạn mới nên làm, cách hay hơn là copy về và dẫn nguồn.
• Cách chèn ảnh này không chỉ áp dụng với link ảnh bên ngoài, bạn hoàn toàn làm được với ảnh của chính mình up lên, sẽ rất hữu dụng trong trường hợp bạn chỉ nhớ ảnh cũ mình muốn dùng lại đang ở trong bài viết nào (chứ không nhớ tên ảnh, khi ấy tìm ảnh trong thư viện sẽ rất khó khăn). Lúc này chỉ còn giải pháp là vào bài viết cũ, copy link ảnh và paste nó vào bài viết mới.

Với những ai chưa biết cách copy link ảnh, ở trình duyệt Chrome, bạn chuột phải vào bức ảnh, rồi nhấn “Sao chép địa chỉ 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.

Hệ thống mặc định có 3 size ảnh là:

• Thumbnail size: Kích thước hình ảnh thu nhỏ
• Medium size: Kích thước hình ảnh trung bình
• Large size: Kích thước hình ảnh lớn

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:

<?php set_post_thumbnail_size( $width, $height, $crop ); ?>

Ở đâ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.

Tạo Gallery ảnh trên WordPress

Không chỉ cho phép bạn chèn từng hình ảnh vào bài viết mà WordPress còn có chức năng tạo gallery riêng (có thể hiển thị nhiều hình ảnh trong bài cùng một lúc).

Để tạo Gallery rất đơn giản. Bạn chỉ cần nhấn vào nút Add Media trên khung soạn thảo văn bản, chọn mục Create Gallery. Tiếp đến, hãy click các tấm ảnh muốn thêm vào gallery và nhấn nút Create New Gallery bên dưới góc phải.

Sau khi tạo gallery xong, bạn có thể thay đổi, sắp xếp lại thứ tự hiển thị của hình ảnh. Cuối cùng, chỉ cần ấn nút Insert Gallery để chèn tất cả các ảnh trong gallery vào bài viết.

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

unset( $sizes[‘thumbnail’]);
unset( $sizes[‘medium’]);
unset( $sizes[‘large’]);

return $sizes;
}
add_filter(‘intermediate_image_sizes_advanced’, ‘wplift_remove_image_sizes’);

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

Các thao tác cần biết với thư viện ảnh trên WordPress

Media Library là nơi bạn có thể tìm thấy tất cả các file (bao gồm các file hình ảnh, tài liệu, video,…) mà bạn đã tải lên. Có hai loại chế độ xem khác nhau mà bạn có thể chọn khi xem Media Library của mình. Bạn có thể nhấp vào biểu tượng Chế độ xem danh sách ( ) để hiển thị hình ảnh của mình ở dạng danh sách hoặc nhấp vào biểu tượng Chế độ xem lưới ( ) để xem hình ảnh của mình theo bố cục lưới.

Tại đây, bạn có thể thực hiện các thao tác thêm, xóa và thay đổi thông tin, kích thước của ảnh.

Dưới đây là hướng dẫn một số thao tác liên quan đến:

• Cách thêm, xóa hình ảnh trên Media Library
• Cách thay đổi thông tin của hình ảnh

Cách thêm và xóa hình ảnh trên Media Library

• Cách thêm hình ảnh

Để thêm một file mới vào Media Library, đầu tiên cần nhấp vào Media -> Add new. Bạn sẽ thấy một khung để upload media, chỉ cần click vào nút “Select Files” hoặc kéo thả hình ảnh vào khung thì hình ảnh sẽ được tự động upload lên.

Khi hình ảnh hoặc file media của bạn được tải lên, chúng sẽ được liệt kê bên dưới. Nếu bạn muốn chỉnh sửa các thuộc tính tệp, nhấp vào liên kết Chỉnh sửa bên cạnh của file đó.

• Cách xóa hình ảnh

Để xóa tệp khỏi Thư viện phương tiện khi sử dụng Chế độ xem lưới. Đầu tiên, hãy click vào hình ảnh để xem các thuộc tính của file. Sau đó nhấp vào “Delete Permanently”.

Để xóa file khỏi Thư viện phương tiện khi sử dụng Chế độ xem danh sách. Hãy nhấp vào  dòng chữ “Delete Permanently” ở ngay phía dưới file (dòng chữ sẽ xuất hiện khi bạn di con trỏ đến vị trí của hình ảnh mình muốn xóa).

Cách thay đổi thông tin ảnh trên Media Library

Nếu đang xem các file của mình bằng Chế độ xem lưới, chỉ cần click vào một file bất kỳ, bạn sẽ thấy một cửa sổ bật lên, hiển thị các thuộc tính có liên quan đến file đó. Sau khi cập nhật từng trường thông tin (Alt text, title, caption,…), các thay đổi của bạn sẽ được lưu tự động.

Để chỉnh sửa các thuộc tính của file khi sử dụng Chế độ xem danh sách. Hãy di con trỏ đến vị trí file bạn muốn chỉnh sửa và nhấp vào “Edit”. Sau đó, các thuộc tính của file sẽ được hiển thị, bao gồm tiêu đề, URL, tên, loại file, kích thước tệp, mô tả,… Sau khi chỉnh sửa xong, click vào nút “Update” để hoàn thành.

Xóa các ảnh không sử dụng trên WordPress

Sau khi thực hiện các thao tác như phần hướng dẫn trên thì vẫn còn một vấn đề. Đó là đối với các size ảnh cũ đã được WordPress tự động tạo trước đó thì chúng vẫn tồn tại trong bộ nhớ.

Để xóa những ảnh này (các ảnh không sử dụng, không đưa vào bài viết hoặc đính kèm ở bất cứ trang nào). Bạn có thể sử dụng plugin hình ảnh WordPress miễn phí Image Cleanup.

Sau khi cài đặt xong, bạn vào Media -> Cleaner để sử dụng công cụ. Plugin này sẽ tự động scan và hiển thị danh sách các hình ảnh không sử dụng trên website. Bạn có thể chọn “Delete All” để xóa toàn bộ hoặc click chọn xóa từng hình.

Trên đây là những hướng dẫn về cách tối ưu hóa, chỉnh sửa, sử dụng hình ảnh và sử dụng media library trên web WordPress hiệu quả. Hy vọng với các chia sẻ này, bạn sẽ có thể quản lý hình ảnh trên website tốt hơn. Chúc bạn thành công!

Quản lý hình ảnh dễ dàng trên Wordpress cho website của bạn