Trang chủ WordpressHướng dẫn Wordpress Quản trị hình ảnh trên WordPress toàn tập

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

bởi Thạch Phạm
51 bình luận 7249 views

Việc lưu trữ và quản lý các file hình ảnh có trên website không phải là một vấn đề lớn đối với bạn nếu website bạn chỉ có số lượng vài trăm tấm ảnh. Thế nhưng đợi đến lúc bạn tự nhận ra mình phải bắt tay vào việc tối ưu lại hình ảnh, tìm cách quản lý nó thì chắc cũng trễ rồi, dĩ nhiên lúc đó bạn sẽ cực hơn rất nhiều.

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

I. Kiểm soát các size ảnh có trên website

1.1) Tìm hiểu size ảnh

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

Mặc định WordPress có 3 size ảnh như thế này:

wpmedia-size

Và điều này có nghĩa là một tấm ảnh sẽ có 4 files khác nhau. Hãy cùng mở thư mục /wp-content/uploads ra mà xem nhé.

wpmedia-sizeexport

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

Mặc định WordPress có 3 size hình ảnh được tao ra bởi hàm add_image_size() với 3 key là:

  • thumbnail
  • medium
  • large

Nếu trong theme có hàm gọi file media tương ứng với tên size hoặc số size của nó thì nó sẽ tự được lôi ra, chẳng hạn như họ muốn lôi ảnh với size dạng thumbnail thì là:

the_post_thumbnail( 'thumbnail' );

Ngoài ra khi chèn ảnh vào bài, bạn cũng có thể lựa chọn size cần chèn để tránh chèn các ảnh to qua làm 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à khiến website bạn hiển thị ảnh gọn hơn, load nhẹ hơn.

1.2) Xóa size ảnh

Nhưng nó có một nhược điểm là về lâu dài khi nó tự sinh ra quá nhiều ảnh thì nó sẽ làm bạn tốn nhiều dung lượng ổ cứng hơn. Mình đã từng gặp một 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 tới gần 30GB cho một website, dĩ nhiên toàn là ảnh.

Vậy thì làm sao để WordPress không sinh thêm ảnh ra nữa? Cách đơn giản nhất là bạn hãy vào Settings -> Media và đưa tất cả các thông số về 0 như trong ảnh dưới.

Đưa các tham số về 0 để tắt tự động sinh ra ảnh.

Đưa các tham số về 0 để tắt tự động sinh ra ảnh.

Nhưng không chỉ dừng lại ở đó. Nếu bạn có cài thêm một số plugin mà trong đó họ có khai báo một size ảnh mới thì nó sẽ tiếp tục tạo ảnh ra, chẳng hạn như plugin NextGen Gallery, Yet Another Related Posts,…Vậy làm thế nào để ngăn chặn chúng không sinh thêm size ảnh nữa? Đó là hãy cài plugin AJAX Thumbnail Rebuild.

Sau đó bạn truy cập vào phần Tools -> Rebuild Thumbnail là bạn sẽ thấy danh sách các key size ảnh đang có trên website là các ký tự in nghiêng.

wpmedia-allimagesize

Bạn chèn đoạn code sau vào file functions.php trong theme để 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');

Nhớ thay đổi lại tên key của size ảnh cho phù hợp với bạn và mỗi size là một dòng unset nhé. Kể từ bây giờ khi bạn upload ảnh lên thì nó sẽ không tự cắt ra các size mà bạn đã xóa nữa.

Thế khi xóa size ảnh rồi thì các file ảnh cũ của size đó có được xóa không? Câu trả lời đơn giản là không, nhưng bạn có thể xóa nó. Hãy xem tiếp phần 1.3.

1.3) Xóa các ảnh không sử dụng

Ảnh không sử dụng ở đây nghĩa là file ảnh đó không được đính kèm vào bài viết nào cả. Để xóa các ảnh đó, bạn có thể sử dụng plugin miễn phí Image Cleanup.

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

II. Tạo gallery ảnh trên WordPress

Mặc định WordPress không chỉ cho phép bạn chèn từng tấm ảnh vào bài mà còn hỗ trợ bạn tạo cho nó một gallery riêng – nghĩa là sẽ hiển thị nhiều hình ảnh cùng lúc trong bài viết.

Để tạo Gallery, bạn ấn vào nút Add Media trên khung soạn thảo và chọn Create Gallery, sau đó chọn các tấm ảnh cần thêm vào gallery và ấn nút Create New Gallery.

wpmedia-creategallery

Sau khi tạo gallery, bạn có thể thay đổi thứ tự hình ảnh và ấn nút Insert Gallery phía dưới là xong. Sau khi chèn gallery vào bài thì ảnh sẽ hiển thị theo dạng thế này.

Hình ảnh hiển thị dạng grid.

Hình ảnh hiển thị dạng grid.

Nếu bạn muốn có thêm hiệu ứng click vào sẽ mở hình ảnh với size lớn bằng popup thì cài thêm plugin Responsive Lightbox.

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

III. Tối ưu dung lượng hình ảnh

Hình ảnh trên web có thể sẽ có dung lượng và chất lượng ảnh vượt quá nhu cầu sử dụng của bạn mà trong khi đó bạn có thể giảm dung lượng hình ảnh xuống mà không bị mất đi chất lượng ảnh.

Để làm việc đó hoàn toàn tự động, bạn cần cài plugin EWWW Image Optimizer hoàn toàn miễn phí và có hỗ trợ giảm dung lượng ảnh hàng loạt, đồng thời khi bạn upload ảnh lên bài thì nó cũng sẽ tự giảm dung lượng luôn.

wpmedia-optimizeimage

Cái hay của plugin này đó là có hỗ trợ nén ảnh thông qua dịch vụ Cloud của họ nếu host của bạn yếu không thể nén ảnh được. Khi sử dụng tính năng cloud, 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 lần nén.

IV. 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 sửa ảnh trực tiếp ngay 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 tấm ảnh bất kỳ và ấn Edit.

Tại đây bạn có thể đảo chiều ảnh, crop ảnh hoặc thay đổi kích thước của ảnh.

wpmedia-editimage

Sau khi sửa xong và save lại, WordPress sẽ tự động xuất ra một tấm ảnh là kết quả sau khi chỉnh sửa.

V. Tăng tốc thời giạn load ảnh với cache

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

Để làm việc này trên host, bạn mở file .htaccess ở thư mục gốc website ra và chèn đoạn dưới đây vào:


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

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

Lời kết

Đó là những kinh nghiệm của mình trong việc tối ưu hóa quy trình quản lý và sử dụng hình ảnh trên website WordPress và hy vọng nó cũng sẽ có ích cho bạn. Hãy nhớ rằng mặc dù lưu hình ảnh trên host sẽ làm bạn tốn băng thông và dung lượng hơn nhưng nó lại an toàn cho bạn thay vì sử dụng các liên kết hình ảnh trỏ ra bên ngoài vì không ai biết được các ảnh đó có bị gì sau này hay không. Hơn nữa, các cấu hình hosting hiện đại bây giờ đều 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 lo lắng.

51 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
51 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
hong vi

mình dùng theme newspaper nó sinh ra tận 20 ảnh… 1 số plugin mình cài nó không tự sinh ra ảnh nhưng tại sao nhiều ảnh quá vậy ạ (chắc do theme). mong được a hỗ trợ,nếu làm như anh thì nó có hiển thị ảnh trên mọi trình duyệt không

plugin mình cài : EWWW Image Optimizer, Image Cleanup,S EO Auto Links, UpdraftPlus – Backup/Restore, WP Rocket, Yoast SEO

Do Thanh Ha

Hi anh Thạch!
E có 1 trang wp khi đăng hình ảnh trong giao diện đăng bài thì vẫn thấy hình, nhưng khi view bài viết thì ko thấy hình, bấm vào hình thì nó bảo lỗi “Sorry, the parameters you provided were not valid”
Nhờ anh chỉ giúp e cách khắc phục
Cảm ơn anh nhiều

nguyen van ba

Anh ơi giúp em với
em đang tập làm web
em dùng themes Storefront
Hình ảnh hiển thị trong trang là 3 hình 1 dòng
http://donghodw.org/danh-muc/dong-ho-nam/
em muốn lến 4 hoặc 5 hình 1 dòng thì phải làm thế nào?
Lần mò mãi mà không tìm được.
mong anh giúp em

thang nhôm

bạn thạch ơi cho mình hỏi với. Mình hỏi trên hoidap.thachpham mà ko thấy bạn nào hướng dẫn được dùm mình hay minh không hiểu mình chỉnh ảnh mà nó ko đều nhau thì mình sửa ở đâu được hả bạn !
Site của mình là http://giuongbenhyte.com/
Cảm ơn bạn nhé !

hong vi

cho mình hỏi Xóa size ảnh có làm chậm đến tốc độ load của trang… mình nhớ có bạn từng nói,wp tự sinh ra ảnh để khi người dùng xem sẽ hiện ảnh phù hợp, xóa đi đỡ tốn dung lượng nhưng tốc độ load lâu hơn….. có phải như vậy không ad.

Lực

Anh ơi cho em hỏi cái tối ưu ảnh.
Em mở SEO Quake lên kiểm tra tối ưu page
Ngay chổ mục images nó để dấu cảnh báo ! màu đỏ báo là ” 8 images without ALT ”
Làm thế nào để cải thiện cái này anh.

Lực

Anh ơi cho em hỏi cái tối ưu ảnh.
Em mở SEO Quake lên kiểm tra tối ưu page
Ngay chổ mục images nó để dấu cảnh báo ! màu đỏ báo là ” 8 images without ALT ”
Làm thế nào để cải thiện cái này anh.

Trang

mình cùng có chung câu hỏi, làm thế nào để cải thiện đây ạ?

thái ngọc tuấn

sẵn đây bạn cho mình hỏi chút. trong slider revolution của mình có các hình ảnh thay đổi ,mình muốn là khi ai đó click vào 1 trong các hình đó thì nó sẽ dẫn đến 1 bài viết trong website của mình thì làm thế nào do mới học được 2 tuần và cũng lớn tuổi nên nhớ kém,mong bạn có hướng dẫn chi tiết giúp mình nhé,mình đang rất cần cảm ơn bạn nhiều

thái ngọc tuấn

mình thì không xăm mình nhưng cũng nghiện cafe và rất thích nhạc dân ca và hòa tấu,cảm ơn bài viết hữu ích của bạn.hy vọng sẽ học hỏi được nhiều từ bạn.cảm ơn nhiều

Hạo Thiên

web mình có 1 số sản phẩm bị mất ảnh nên mình muốn up lại nó, khổ nỗi số lượng sp quá lớn nên mình cứ phải lọc thủ công từng sp.
k biết có cách nào sàng lọc được luôn ra tất cả những sp thiếu ảnh đại diện k mong các b giúp

Will Nguyễn

Chào anh Thạch Phạm, anh cho em hỏi chút ạ. Làm thế nào để ảnh khi upload lên và insert lên luôn ở tình trạng full size ạ. Em đã chỉnh sửa kích thước ở ngoài rồi mới up lên. Nhưng khi insert thì ảnh toàn ở size medium, và toàn phải edit lại từng ảnh để chuyển sang full size

Dũng Hoàng

Thạch cho mình hỏi chút. Mình cũng sử dụng theme của Orange, nhưng Theme của nó tự động crop ra rất nhiều size ảnh (khoảng 10-12 cái). Mình có sử dụng Shortpixel hoặc Imagify plugin để nén ảnh nhưng nó chỉ nén được những size ảnh do WordPress tự sinh ra, các size còn lại (có dạng size ảnh _c) không thấy để nén. Có cách nào không Thạch?

Cường

Chào Thạch, cho mình hỏi chút ngoài lề của chủ đề nhé: Mình muốn thêm 1 ảnh và nó tự động hiển thị ở tất cả các bài viết như ảnh ở trên phần “Để lại bình luận” (ảnh ads bí quyết seo hiệu quả) của Thạch vậy.
Có cách nào làm chỉ giúp mình với. Tks!

Hồng

Anh ơi cái phần đăng ký nhận thông báo cuối màn hình làm thế nào vậy anh

Thinh Nguyen Van

Có phải công cụ trong bài này không: https://thachpham.com/tools/onesignal-push-notification-wordpress.html

Nguyễn Cao Tiến

Anh Thạch ơi, Cái Contents trên website của anh sử dụng plugin hay anh code thế ạ. Hướng dẫn em với. Nhìn nó hay hay. tiết kiệm không gian trong bài viết rất nhiều 🙂

Thinh Nguyen Van

Ý bạn là cái plugin fixed toc à https://goo.gl/dQ4CQa 🙂

Thuan

ACE giúp mình với. Tình hình là mình muốn chuyển web sang host mới, thay dổi cả tên miền và host luôn. tất cả mọi thứ có vẻ thuận lợi,Nhưng những hình ảnh của web mới lại lấy từ host của web cũ. Mình gửi lên 2 trang, ACE nào giúp mình với. http://dienhathe.vn – trang cũ http://diensaigon.xyz – trang mới. ACE vào thử một sản phẩm thì link hình và khi view image từ trang mới, thì dường dẫn vẫn là trang cũ. Help

tieuyeu.com

Velvet Blues Update URLs

kapkaa

thử cái plug này rồi , không được.Trang nay luc truoc nho một anh làm giúp cái giao diện.
không biết anh ấy có sửa gì không mà phần thêm hình ảnh sản phẩm không giống những trang WP thông thường.Nó có thể lấy hình trực tiếp hoặc lấy hình từ link bên ngoài

tiep

Bạn ơi cho mình hỏi trong phần quản trị ảnh của WP mình muốn tạo những folder con để quản lý ảnh cho tiện thì làm thế nào nhỉ. Cám ơn bạn

aee

fgfdgfdg

Hân

Bạn cho mình hỏi, sao mình đã chèn đúng code mà vẫn sinh ra rất nhiều ảnh (tầm 20 ảnh): function remove_unused_image_size( $sizes) { unset( $sizes[‘thumbnail’]); unset( $sizes[‘medium’]); unset( $sizes[‘large’]); unset( $sizes[‘medium_large’]); unset( $sizes[‘shop_thumbnail’]); unset( $sizes[‘shop_catalog’]); unset( $sizes[‘shop_single’]); unset( $sizes[‘post-thumbnail’]); unset( $sizes[‘kt-post-thumb’]); unset( $sizes[‘kt-post-thumb-small’]); unset( $sizes[‘kt_post_blog_268x255’]); unset( $sizes[‘lookbook-thumb’]); unset( $sizes[‘lookbook-thumb-masonry ‘]); unset( $sizes[‘colection-thumb’]); unset( $sizes[‘colection_small_thumb’]); unset( $sizes[‘testimonial-thumb’]); unset( $sizes[‘kt_shop_catalog_131’]); unset( $sizes[‘kt_shop_catalog_142’]); unset( $sizes[‘kt_shop_catalog_164’]); unset( $sizes[‘kt_shop_catalog_175’]); unset( $sizes[‘kt_shop_catalog_193’]); unset( $sizes[‘kt_shop_catalog_200’]); unset( $sizes[‘kt_shop_catalog_204’]); unset( $sizes[‘kt_shop_catalog_214’]); unset( $sizes[‘kt_shop_catalog_248’]); unset( $sizes[‘kt_shop_catalog_260’]); unset( $sizes[‘kt_shop_catalog_270’]); unset( $sizes[‘yith-woocompare-image’]); ); return $sizes; } add_filter(‘intermediate_image_sizes_advanced’, ‘remove_unused_image_size’);

Hân

Rất cám ơn anh đã chia sẻ bài viết rất bổ ích. Nhưng cho em hỏi một chút, tại sao em có dùng plugin để xóa bớt các ảnh không sử dụng, nhưng plugin lại xóa cả các ảnh hiện thị trong các phần sản phẩm thu nhỏ (ví dụ trong các phần ảnh thumbnail của danh sách sản phẩm, ảnh của sản phẩm mới….) và cũng không thấy gọi ra ảnh gốc khi cần? Có cách nào để không tự tạo ra ảnh mới mà chỉ tự tạo ra ảnh đó khi cần thiết không ạ? Mong nhận được… Xem thêm »

Nguyên Hào

Đoạn code của anh Thạch đưa ra mình đã test , nhưng nó ko hiệu quả hoàn toàn , nó vẫn tạo ra một đống hình ảnh thumb . Mình có tham khảo trên blog wordpress.org , có 1 anh nào đó người nước ngoài hưởng dẫn đoạn code này , mình cài vào thì thấy hiệu quả . Anh Thách và anh em test thử xem nhé , có gì bổ sung vào bài viết cho nó chính xác . Nguồn : http://wordpress.stackexchange.com/questions/91166/how-to-disable-wordpress-from-creating-thumbnails function mxdCustomImageSizes($sizes) { unset( $sizes[‘thumbnail’]); unset( $sizes[‘medium’]); unset( $sizes[‘large’]); unset( $sizes[‘full’] ); $myimgsizes = array( 'full-size'… Xem thêm »

Duong.Truong

Mình đã thêm code xóa size ảnh nhưng cource của mình nó vẫn còn sinh thêm 2 file có kích thướng 414×350 và 180×80 không biết nó ở đâu ra. Đã cài plugin kiểm tra size ảnh như bên trên. Mong Thạch Phạm hỗ trợ giúp với.

Trương Quốc Dương

Chào anh. Theo như hướng dẫn của anh em đã chèn code như thế này. vì cài plugin nó liệt kê ra cái danh sách size anh như thế. Nhưng Sau Khi thêm code vào thì không upload ảnh lên được báo lỗi ” Lỗi khi tải ảnh lên, hãy thử lại” Nhờ anh hỗ trợ xem em đã làm đúng chưa hay còn sai sót chỗ nào. Chứ của em khi dưa ảnh lên thì nó chia ra làm hơn 15 cái ảnh với kích thước khác nhau. Thank anh nhiều. // Xoa size anh function remove_unused_image_size( $sizes) {… Xem thêm »

Trương Quốc Dương

sory mình đã biết chỗ sai.

Suneo

Mình chèn code này vào và thay đổi cái key rồi mà ko được, vào data nó vẫn tự sinh ra rất nhiều ảnh

function remove_unused_image_size( $sizes) {

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

pham phu luan

Upload Error: File upload stopped by extension. ,mình úp ảnh bị thông báo lỗi này, giờ khắc phục ra sao ha bạn ?

Pham Phu Luan

mình úp đuôi jpg, mà bị như vậy đó

phạm phú luân

bạn cho mình hỏi làm sao để những bức ảnh úp lên mà không bị nhân đôi, tức là mình úp ảnh lên trong galary tồn tại 2 ảnh giống nhau?

pham phu luan

ok cam on ban rat nhieu

Nguyên Hào

Thạch Phạm cho mình hỏi , có thể cài đặt thư mục chứa ảnh nằm ở một VPS khác , ko phải VPS mình đang sử dụng nhưng mình vẫn kiểm soát được các chức năng của nó ko Luân

TTRKHA

: ) khổ cho trò đang phải chạy đôn chạy đáo để học nên vậy

Nguyên Hào

Hihi sr Thạch Phạm , tại tớ chạy đôn chạy đáo học hỏi tùm lum từ bên anh Luân HOCVPS qua tới bên đây nên nhiều lúc nhầm lẫn , thông cảm nhé ^^

tracv

Nếu không cho phép tạo các kích cỡ hình ảnh thumbnail thì khi các plugin sử dụng đến kích cỡ hình đó có bị lỗi ko ạ. Ví dụ như mình sử dụng plugin yith-woocommerce-zoom-magnifier để zom hình và tạo ảnh thu nhỏ sản phẩm ở dưới ảnh chính ? Ví dụ như bài này sao ạ ?
http://meolun-store.com/shop/thoi-trang-nu/dam-suong-nu-ann-dress-m31

Quốc

Mình đã áp dụng hết những cách ở trên, kết hợp cả dùng image cleanup xóa thì 1 lúc sau nó lại tự sinh ra nữa. Có những hình kích thước 1000, 2000 pixel không dùng tới mà vẫn bị. Web mình là: http://chothueaodaihcm.com/ nhờ Ads xem giúp mình. Thanks!

http://i821.photobucket.com/albums/zz140/baoquyen3005/QUOCTOAN/SNAG-02_zpshndvchbr.jpg

tien nguyen

Hi Thạch, nếu xóa file ảnh tự sinh ra như trong mục 1.2 thì các hình ảnh khác trên theme có bị lỗi gì ko nhỉ ?

Chang

Anh cho em hỏi.Nếu nó load hình gốc thì tốc độ website có chậm đi không anh.Cái lợi cái hại của cách xóa hết các size như này anh.Như em thấy thì toàn cái lợi à

taigameapk

Hèn chi dung lượng ổ cứng tăng nhanh, cảm ơn vì bài viết

Nguyễn Văn Hải

những bài giảng của thầy thật tuyệt vời – em xin được gọi thầy bằng thầy vì co nhiều bài giảng quá tuyệt vời – em muốn học hỏi thầy nhiều hơn vế wordpress

51
0
Would love your thoughts, please comment.x
()
x