Bạn quá nhiều hình ảnh lưu trữ trên web và không biết phải quản lý thế nào cho hiệu quả? Bài viết sau của chúng tôi sẽ giúp bạn giải tỏa sự lo lắng về cách quản trị hình ảnh và media blocks 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.
Sau đây là các hướng dẫn giúp bạn quản trị và tối ưu hình ảnh trên WordPress tốt hơn. Hãy cùng tìm hiểu chi tiết về cách:
Để tối ưu hình ảnh hiển thị trên web. WordPress có tính năng tự động cắt ảnh thành nhiều size khác nhau.
Hệ thống mặc định có 3 size ảnh là:
Như vậy có nghĩa là ngoài file ảnh gốc, trên thư mục /wp-content/uploads của WordPress còn có thêm 3 file ảnh khác với kích thước như trên.
Khi chèn ảnh vào bài viết. Bạn có thể lựa chọn kích thước ảnh theo 3 size này để tối ưu hóa hình ảnh cho website. Ưu điểm lớn của chức năng này khiến cho hình ảnh nhẹ hơn, giảm thời gian upload cho trang web.
Tuy lợi thế như vậy nhưng chức năng tự động này của WordPress lại có nhược điểm là tạo ra quá nhiều hình ảnh, gây tốn dung lượng lưu trữ.
Vậy phải làm sao để WordPress không tự động tạo ra ảnh với các size khác nhau nữa?
Cách đơn giản nhất là bạn hãy vào khu vực Settings -> Media và chuyển tất cả các thông số kích thước của thumbnail size, medium size, large size về 0. Sau đó bấm vào nút “Save Changes” ở bên dưới.
Tuy nhiên với cách làm này, nếu bạn có cài thêm một số plugin có khai báo size ảnh mới như NextGen Gallery, Yet Another Related Posts,… Thì các file ảnh vẫn sẽ tiếp tục được tạo ra. Trong trường hợp này, để ngăn chặn WordPress tự động tạo size ảnh. Bạn cần cài đặt plugin AJAX Thumbnail Rebuild.
Sau khi hoàn thành cài đặt. Hãy vào Tools -> Rebuild Thumbnail, bạn sẽ thấy danh sách các key size ảnh đa có trên trang web. Để vô hiệu hóa những size ảnh được tạo tự động này. Bạn cần chèn đoạn code sau vào file functions.php trong theme:
| 01020304050607080910 | 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’); |
Lưu ý, hãy đổi lại tên key size ảnh cho phù hợp và mỗi size ảnh là một dòng unset. Như vậy, sau này, bất khi nào bạn upload ảnh lên thì nó cũng sẽ không bị chia ra thành các size nhỏ nữa.
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 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.
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.
Để tối ưu dung lượng và chất lượng hình ảnh trên website một cách tự động. Bạn có thể nhờ đến sự trợ giúp của plugin miễn phí EWWW Image Optimizer. Công cụ này có chức năng hỗ trợ giúp giảm dung lượng ảnh hàng loạt. Ngoài ra, nếu bạn chèn ảnh vào bài viết thì EWWW Image Optimizer cũng sẽ tự động giảm dung lượng của các hình ảnh đó về mức tối ưu.
Để chỉnh sửa ảnh trực tiếp trên WordPress. Bạn cần vào mục Media -> chọn một bức ảnh bất kỳ và nhấn nút Edit.
Tại đây, bạn có thể thực hiện rất nhiều thao tác chỉnh sửa ảnh như: crop ảnh, đảo chiều hình ảnh, thay đổi kích thước ảnh,… Sau khi đã điều chỉnh theo ý muốn, bạn chỉ cần save lại. WordPress sẽ tự động tạo ra một file ảnh mới theo kết quả đã chỉnh sửa.
Để người truy cập vào trang nhanh hơn trong lần thứ hai trở đi. Bạn nên thiết lập cache trình duyệt cho các file ảnh trên web.
Các thao tác cần được thực hiện trên file .htaccess ở thư mục gốc của website. Hãy chèn đoạn mã code này vào:
| 01020304 | <FilesMatch “(?i)^.*.(ico|flv|jpg|jpeg|png|gif|js|css|woff)$”>ExpiresActive OnExpiresDefault A2592000</FilesMatch> |
Trong đó, con số 2592000 là số giây được lưu lại trong cache của trình duyệt. Dữ liệu sẽ được tự động update sau quãng thời gian này. Tùy theo nhu cầu, bạn có thể lựa chọn một con số khác lâu hơn hoặc nhanh hơn.
Tham khảo thêm:
Cách tối ưu hình ảnh WordPress tốt nhất cho SEO 2019
Kể từ phiên bản 5.0, WordPress đã thay thế trình soạn thảo classic editor cũ sang thành block editor (hay còn gọi là Gutenberg). Hiện nay, nó đã trở thành một phần chính thức của WordPress trong trình duyệt mặc định.
Với Gutenberg, người dùng sẽ tạo ra bài viết bằng cách sử dụng các khối (block) nội dung và media khác nhau. Tuy hiện nay có nhiều người vẫn còn sử dụng bản classic editor cũ. Tuy nhiên sớm muộn gì bạn cũng phải làm quen với phiên bản block editor mới này.
Trong phần này, chúng ta sẽ cùng tìm hiểu các thao tác liên quan đến Media Blocks trên WordPress gồm:
Dướ đây là thông tin chi tiết!
Image Block (khối hình ảnh) cho phép bạn thêm một hình ảnh bất kỳ vào nội dung của mình. Để add Image Block vào nội dung. Bạn cần nhấp vào biểu tượng dấu cộng (+) trên trình soạn thảo -> chọn nút “Image”.
Sau khi chèn Image Block xong. Bạn có thể nhấp chuột vào nút “Upload” để tải hình ảnh lên từ máy tính lên Media Library hoặc click vào nút “Media Library” để chọn một file bất kỳ trong đó.
Ngoài ra, bạn cũng có thể chèn ảnh từ URL bằng cách nhấp vào nút “Insert from URL”.
Đặc biệt, một cách dễ dàng hơn, hình ảnh có thể được kéo thả trực tiếp vào Image Block trên trang soạn thảo nội dung và hiển thị trực tiếp trên đó.
Khi hình ảnh đã được thêm vào block. Bạn sẽ có thêm các tùy chọn chỉnh sửa ở thanh cài đặt bên phải. Tại đây, bạn có thể điều chỉnh các thông số như: style ảnh, kích thước ảnh, chú thích ảnh,…
Để add Gallery vào block soạn thảo, bạn cần nhấp vào biểu tượng dấu cộng (+) trên trình soạn thảo -> chọn nút “Gallery”.
Gallery Block cho phép bạn cùng một lúc thêm nhiều hình ảnh vào bài viết. Tương tự như Image Block, bạn cũng có thể chỉnh sửa Gallery ở thanh cài đặt bên phải với các thiết lập như: thêm ghi chú cho mỗi hình ảnh hoặc toàn bộ Gallery, cách hiển thị hình ảnh,…
Để add Gallery vào block soạn thảo, bạn cần nhấp vào biểu tượng dấu cộng (+) trên trình soạn thảo -> chọn nút “Video”.
Video block cho phép bạn thêm một đoạn clip bất kỳ vào nội dung. Bạn có thể chọn video có sẵn trong thư viện WordPress hoặc tải lên một video mới. Ngoài ra, bạn cũng có thể chèn video từ URL. Giống như Image Block, bạn cũng có thể kéo thả video vào block và nó sẽ được tự động tải lên.
Để hiển thị chú thích văn bản cho video, bạn chỉ cần nhấp vào phần “Write caption…” bên dưới clip và nhập đoạn text mình muốn.
Sau khi đã thêm video vào block. Bạn có thể chỉnh sửa các tùy chọn có sẵn ở thanh cài đặt bên phải như: cho video tự động phát và lặp lại, tự động tắt âm thanh, hiển thị toàn màn hình, chỉ định hình poster cho video,…
Điều quan trọng cần lưu ý là Video block khác với chức năng nhúng YouTube và Vimeo. Nếu muốn nhúng video từ YouTube hoặc Vimeo, tốt nhất bạn nên sử dụng Embeds block (khối nhúng). Nhưng nếu bạn dáng URL Youtube hoặc Vimeo vào Video Block thì nó cũng sẽ tự động chuyển đổi thành embeds Youtube hoặc embeds Vimeo. Và khi block của bạn bị chuyển đổi thành embeds như vậy thì sẽ không có các tùy chọn về video ở thanh cài đặt nữa.
Cách tuyệt vời để thêm video hoặc nội dung từ một trang khác vào website của bạn là sử dụng Embeds block (khối nhúng). Để thực hiện nhúng một nội dung bất kỳ, bạn chỉ cần nhấp vào biểu tượng dấu cộng (+) trên trình soạn thảo -> chọn nút “Embeds” -> chọn trang web muốn nhúng. Sau đó, copy – paste URL của nội dung bạn muốn nhúng vào và click nút “Embeds” để hoàn thành.
WordPress hiện có chức năng embeds cho nhiều website phổ biến như: Amazon Kindle, DailyMotion, Facebook, Flickr, Instagram, Kickstarter, Meetup.com, MixCloud, Reddit, SlideShare, Spotify, TED, Tumblr, Twitter, Vimeo, WordPress, YouTube,….
Phần này chứa các tiện ích đặc biệt như: Shortcode block, archives block (khối lưu trữ Categories Block, Latest Comments Block (khối bình luận gần nhất) và Latest Posts Block (khối bài đăng mới nhất).
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 ( 
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:
Để 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 đó.
Để 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).
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.
=>> Tham khảo chi tiết gói WordPress Hosting – giải pháp tối ưu nhất cho các website WordPress
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 blocks trên 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!
TRỤ SỞ CHÍNH
12A Núi Thành, P.13, Q. Tân Bình, TP HCM
VĂN PHÒNG MIỀN NAM
12A Núi Thành, P.13, Q. Tân Bình, TP HCM
Điện thoại: (028) 3622 9999
VĂN PHÒNG MIỀN BẮC
Tầng 8, Tòa nhà số 381 Đội Cấn, P.Liễu Giai, Q.Ba Đình, Hà Nội
Điện thoại: (024) 35 123456
Copyright© Mat Bao Company. All Reserved.
Sử dụng nội dung ở trang này và dịch vụ tại Mắt Bão có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách bảo mật của chúng tôi.
Công ty cổ phần Mắt Bão - Giấy phép kinh doanh số: 0302712571 cấp ngày 04/09/2002 bởi Sở Kế Hoạch và Đầu Tư Tp. Hồ Chí Minh.
Giấy phép cung cấp dịch vụ Viễn thông số 247/GP-CVT cấp ngày 08 tháng 05 năm 2018.
