Quản trị hình ảnh trên WordPress toàn tập [NEW]

Lưu trữ và quản lý các tập tin hình ảnh trên trang web không phải là vấn đề lớn đối với bạn nếu trang web của bạn chỉ có vài trăm hình ảnh. Nhưng đến khi bạn nhận ra rằng bạn phải bắt đầu tối ưu hóa hình ảnh, tìm cách quản lý nó thì tất nhiên đã quá muộn, khi đó bạn sẽ cực hơn rất nhiều.

Vì vậy, để giúp các bạn mới hiểu thêm về tính năng Media Library trên WordPress, mình xin viết một bài đầy đủ những điều cần biết liên quan đến quản lý hình ảnh trên website.

I. Kiểm soát kích thước hình ảnh có sẵn trên trang web

1.1) Tìm hiểu kích thước hình ảnh

Trong WordPress, để tối ưu hóa việc hiển thị hình ảnh, nó hỗ trợ chức năng tự động cắt một hình ảnh thành nhiều kích thước khác nhau, tất nhiên mỗi kích thước hình ảnh sẽ là một hình ảnh.

Theo mặc định, WordPress có 3 kích thước hình ảnh như sau:

Quản trị hình ảnh trên WordPress toàn tập [NEW]

Và điều này có nghĩa là một hình ảnh sẽ có 4 tệp khác nhau. Hãy mở thư mục / wp-content / uploads ra ngoài và xem.

wpmedia-sizeexport

Nếu nó được sinh ra, nó sẽ được sử dụng như thế nào?

Theo mặc định, WordPress có 3 kích thước hình ảnh được tạo bởi. hàm số add_image_size() với 3 chìa khóa là:

  • hình nhỏ
  • vừa phải
  • lớn

Nếu trong chủ đề có một chức năng gọi tệp phương tiện tương ứng với tên kích thước hoặc số kích thước của nó, nó sẽ tự động được kéo ra, ví dụ: nếu họ muốn kéo một hình ảnh có kích thước hình thu nhỏ, đó là:

the_post_thumbnail( ‘thumbnail’ );

Ngoài ra khi chèn ảnh vào bài viết bạn cũng có thể tùy chọn kích thước để chèn tránh chèn ảnh lớn khiến bài viết tải lâu hơn.

wpmedia-insertmedia

Nhìn chung, chức năng này có một ưu điểm là giúp trang web của bạn hiển thị hình ảnh nhỏ gọn hơn, tải nhẹ hơn.

1.2) Xóa kích thước hình ảnh

Nhưng nó có một nhược điểm là về lâu dài khi tự tạo ra quá nhiều ảnh sẽ làm tốn dung lượng ổ cứng hơn. Tôi đã từng gặp trường hợp giúp di chuyển dữ liệu WordPress từ máy chủ này sang máy chủ khác với dung lượng lên đến gần 30GB cho một trang web, tất nhiên là tất cả ảnh.

sau đó Làm cách nào để ngăn WordPress tạo thêm hình ảnh? ra một lần nữa? Cách dễ nhất là nhập Cài đặt -> Phương tiện và đặt tất cả các thông số thành 0 như trong hình bên dưới.

Đặt các thông số thành 0 để tắt tính năng tạo ảnh tự động.

Đặt các thông số thành 0 để tắt tính năng tạo ảnh tự động.

Nhưng mọi chuyện không chỉ dừng lại ở đó. Nếu bạn cài đặt một số plugin mà họ khai báo kích thước hình ảnh mới, nó sẽ tiếp tục tạo hình ảnh, chẳng hạn như plugin Thư viện NextGen, Tuy nhiên, một bài viết liên quan khác… Vậy làm thế nào để ngăn chúng tạo ra nhiều kích thước hình ảnh hơn? Đó là, cài đặt plugin AJAX Thumbnail Rebuild.

Sau đó, bạn truy cập vào phần Công cụ -> Xây dựng lại hình thu nhỏ là bạn sẽ thấy danh sách các hình ảnh kích thước chính có trên trang web được in nghiêng.

wpmedia-allimagesize

Bạn chèn đoạn mã sau vào tệp functions.php trong chủ đề của mình để vô hiệu hóa nó.


function remove_unused_image_size( $sizes) {

unset( $sizes[‘thumbnail’]);
unset( $sizes[‘medium’]);
unset( $sizes[‘large’]);
unset( $sizes[‘post-thumbnail’]);
unset( $sizes[‘twentyfourteen-full-width’]
);
}
add_filter(‘intermediate_image_sizes_advanced’, ‘remove_unused_image_size’);

Hãy nhớ thay đổi tên khóa của kích thước hình ảnh cho phù hợp với bạn và mỗi kích thước là một dòng chưa đặt. Kể từ bây giờ khi bạn tải lên một hình ảnh, hình ảnh đó sẽ không còn cắt ra các kích thước bạn đã xóa nữa.

Vậy khi xóa kích thước ảnh thì các file ảnh cũ có kích thước đó có bị xóa không? Câu trả lời đơn giản là không, nhưng bạn có thể xóa nó. Vui lòng xem tiếp phần 1.3.

1.3) Xóa hình ảnh không sử dụng

Hình ảnh không được sử dụng ở đây có nghĩa là tệp hình ảnh không được đính kèm vào bất kỳ bài đăng nào. Để xóa những ảnh đó, bạn có thể sử dụng plugin miễn phí Media Cleaner

Cách sử dụng plugin Image Cleanup bạn có thể tham khảo trong bài viết này.

II. Tạo thư viện ảnh trên WordPress

Theo mặc định, WordPress không chỉ cho phép bạn chèn từng hình ảnh vào bài viết mà còn cho phép bạn tạo thư viện riêng – tức là nó sẽ hiển thị nhiều hình ảnh cùng lúc trong bài đăng.

Để tạo Thư viện, hãy nhấp vào nút Thêm Phương tiện trên trình chỉnh sửa và chọn Tạo Thư viện, sau đó chọn ảnh bạn muốn thêm vào thư viện và nhấn nút Tạo Thư viện Mới.

wpmedia-creategallery

Sau khi tạo bộ sưu tập, bạn có thể thay đổi thứ tự của các hình ảnh và nhấn nút Chèn bộ sưu tập bên dưới. Sau khi chèn bộ sưu tập vào bài viết, hình ảnh sẽ hiển thị như thế này.

Hình ảnh được hiển thị dưới dạng lưới.

Hình ảnh được hiển thị dưới dạng lưới.

Nếu bạn muốn có nhiều hiệu ứng hơn khi nhấp vào sẽ mở ảnh với kích thước lớn kèm theo cửa sổ bật lên, hãy cài đặt plugin Responsive Lightbox.

Nhưng bộ sưu tập này chỉ là dạng cơ bản, nếu bạn muốn chèn một bộ sưu tập chuyên nghiệp với nhiều tùy chọn hơn như hiển thị slide thì nên sử dụng plugin NextGen Gallery mà mình đã hướng dẫn tại đây.

III. Tối ưu hóa kích thước hình ảnh

Hình ảnh trên web có thể có kích thước và chất lượng hình ảnh vượt quá nhu cầu của bạn, trong khi bạn có thể giảm kích thước hình ảnh mà không làm giảm chất lượng hình ảnh.

Để làm điều đó hoàn toàn tự động, bạn cần cài đặt plugin Trình tối ưu hóa hình ảnh EWWW Nó hoàn toàn miễn phí và hỗ trợ giảm dung lượng ảnh hàng loạt, khi bạn tải ảnh lên bài viết thì nó cũng sẽ tự động giảm dung lượng.

wpmedia-tối ưu hóa hình ảnh

Cái hay của plugin này là nó hỗ trợ nén ảnh thông qua dịch vụ Cloud của họ nếu máy chủ của bạn yếu và không nén được ảnh. Khi sử dụng tính năng đám mây, bạn cần phải trả một số tiền nhỏ hàng tháng, nhưng bù lại tài nguyên của máy chủ sẽ không bị tiêu hao mỗi khi nén.

IV. Chỉnh sửa ảnh trực tiếp trên WordPress

Trong WordPress có rất nhiều tính năng giúp bạn chỉnh sửa ảnh trực tiếp trên website mà có thể nhiều người đã bỏ qua. Để sử dụng chức năng này, bạn vào Media -> chọn một bức ảnh bất kỳ và nhấn Edit.

Tại đây bạn có thể đảo ngược hình ảnh, cắt hình ảnh hoặc thay đổi kích thước.

wpmedia-editimage

Sau khi chỉnh sửa và lưu, WordPress sẽ tự động xuất ra một hình ảnh sau khi chỉnh sửa.

V. Tăng tốc thời gian tải hình ảnh với bộ nhớ đệm

Hầu hết các hình ảnh trên website sẽ không cần chỉnh sửa mà chỉ cần tải lên hoặc xóa đi, vì vậy tốt nhất bạn nên thiết lập bộ nhớ đệm của trình duyệt cho các tệp hình ảnh để khách truy cập website nhanh hơn trong lần truy cập thứ 2 trở đi. vì bộ nhớ đệm đã được lưu trong máy tính trong một khoảng thời gian nhất định.

Để thực hiện việc này trên máy chủ, hãy mở tệp .htaccess trong thư mục gốc của trang web và chèn đoạn mã sau:

<FilesMatch "(?i)^.*.(ico|flv|jpg|jpeg|png|gif|js|css|woff)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

Con số 2592000 có nghĩa là số giây sẽ được lưu trữ trong bộ nhớ cache của trình duyệt và nó sẽ tự làm mới sau thời gian này. Bạn có thể đặt một số khác dài hơn.

Phần kết

Đó là những kinh nghiệm của tôi trong việc tối ưu hóa quá trình quản lý và sử dụng hình ảnh trên website WordPress và hy vọng nó cũng hữu ích với bạn. Hãy nhớ rằng mặc dù lưu ảnh trên máy chủ lưu trữ sẽ tốn nhiều băng thông và dung lượng hơn, nhưng bạn có thể yên tâm sử dụng các liên kết ảnh bên ngoài vì không ai biết ảnh có bị lỗi hay không. sau này hoặc không. Hơn nữa, các cấu hình lưu trữ hiện đại ngày nay thừa khả năng cung cấp dung lượng và băng thông cho một số lượng hình ảnh khá lớn nên bạn không cần quá lo lắng.

4.4 / 5 – (5 phiếu bầu)