Zalo

WordPress 7.1: Responsive Không Cần CSS, Media Editor Mới Và Nhiều Tính Năng Mới

wordpress 7 1 responsive khong can css media editor moi va nhieu tinh nang moi

WordPress 7.1 mang đến một loạt thay đổi đáng chú ý cho trình biên tập website, tập trung vào thiết kế responsive, chỉnh sửa hình ảnh, quản lý media, cộng tác và khả năng tùy biến giao diện.

Điểm đáng chú ý nhất của phiên bản mới là người dùng có thể thiết lập nhiều kiểu responsive trực tiếp trong trình chỉnh sửa mà không cần viết CSS cho những nhu cầu phổ biến.

WordPress 7.1 cũng bổ sung công cụ chỉnh ảnh chuyên dụng, admin bar thống nhất trong các trình biên tập, Notes hỗ trợ @mentions và rich text, breakpoint tùy chỉnh, Tab, icon tùy chỉnh cùng nhiều cải tiến về hiệu suất và accessibility.

WordPress 7.1 có gì mới?

WordPress 7.1 tập trung vào việc giúp quá trình xây dựng và quản trị website trở nên trực quan hơn.

Các điểm nổi bật gồm:

  • Thiết lập responsive cho từng kích thước màn hình.
  • Tùy chỉnh trạng thái hover, focus và active.
  • Media Editor mới.
  • Hỗ trợ crop, rotate, flip và chỉnh metadata hình ảnh.
  • Admin bar xuất hiện nhất quán trong các editor.
  • Notes hỗ trợ rich text và @mentions.
  • Tạo playlist âm thanh.
  • Tùy chỉnh breakpoint mobile và tablet.
  • Block Tabs.
  • Hệ thống icon tùy chỉnh.
  • Hỗ trợ AVIF, HEIC và HDR gain maps.
  • Xử lý nén và resize hình ảnh ngay trên trình duyệt.
  • Cải thiện accessibility.
WordPress 7.1 tập trung vào responsive, media và trải nghiệm chỉnh sửa website.
WordPress 7.1 tập trung vào responsive, media và trải nghiệm chỉnh sửa website.

Thiết lập Responsive trực tiếp, không cần CSS

Một trong những thay đổi đáng chú ý nhất của WordPress 7.1 là khả năng thiết lập responsive styles trực tiếp trong trình chỉnh sửa.

Trước đây, khi muốn một block hiển thị khác nhau trên desktop, tablet và mobile, người phát triển website thường phải sử dụng CSS media query hoặc các công cụ responsive riêng của theme/page builder.

Với WordPress 7.1, nhiều tùy chỉnh responsive có thể được thực hiện trực tiếp thông qua giao diện editor.

Người dùng có thể điều chỉnh cách block hiển thị trên từng kích thước màn hình mà không cần viết CSS thủ công.

Điều này đặc biệt hữu ích với:

  • Kích thước chữ.
  • Khoảng cách.
  • Padding và margin.
  • Bố cục block.
  • Hiển thị nội dung theo thiết bị.
  • Các thiết lập responsive khác được block hỗ trợ.
WordPress 7.1 cho phép điều chỉnh kiểu hiển thị responsive trực tiếp trong editor.
WordPress 7.1 cho phép điều chỉnh kiểu hiển thị responsive trực tiếp trong editor.

Responsive trở thành một phần của thiết kế WordPress

Responsive Design ngày càng quan trọng khi phần lớn người dùng truy cập website bằng smartphone.

Thay vì thiết kế desktop trước rồi bổ sung CSS cho mobile, WordPress đang đưa nhiều tùy chọn responsive trực tiếp vào hệ thống chỉnh sửa.

Đây là hướng phát triển giúp giảm sự phụ thuộc vào CSS tùy chỉnh đối với các nhu cầu thiết kế cơ bản.

Media Editor mới giúp chỉnh sửa hình ảnh thuận tiện hơn

WordPress 7.1 giới thiệu một Media Editor modal chuyên dụng, thay thế cách crop hình ảnh trực tiếp trước đây.

Công cụ mới tập trung các thao tác chỉnh sửa hình ảnh vào một giao diện riêng.

Người dùng có thể thực hiện:

  • Crop tự do.
  • Crop theo tỷ lệ.
  • Flip hình ảnh.
  • Xoay hình ảnh chính xác.
  • Chỉnh sửa metadata.
  • Chuẩn bị hình ảnh trước khi xuất bản.

Nút Crop quen thuộc vẫn được giữ lại nhưng sẽ mở giao diện chỉnh sửa chuyên dụng mới.

Media Editor mới tập trung các công cụ crop, rotate và chỉnh sửa hình ảnh trong một giao diện.
Media Editor mới tập trung các công cụ crop, rotate và chỉnh sửa hình ảnh trong một giao diện.

Admin Bar xuất hiện trong mọi Editor

WordPress 7.1 cũng cải thiện trải nghiệm điều hướng trong khu vực quản trị.

Admin Bar được duy trì xuyên suốt các editor, giúp người dùng dễ nhận biết mình đang ở đâu và truy cập nhanh các khu vực cần thiết.

Thay đổi này tuy không phải tính năng lớn nhưng giúp giao diện quản trị nhất quán hơn.

Admin Bar được duy trì trong các editor để tạo trải nghiệm điều hướng nhất quán.
Admin Bar được duy trì trong các editor để tạo trải nghiệm điều hướng nhất quán.

Notes hỗ trợ Rich Text và @Mentions

Tính năng Notes trong WordPress 7.1 được nâng cấp đáng kể, đặc biệt hữu ích cho website có nhiều người cùng tham gia quản trị nội dung.

Notes hiện hỗ trợ:

  • Bold.
  • Italic.
  • Code.
  • Links.
  • @Mentions.
  • Gửi thông báo qua email.
  • Gắn ghi chú vào một đoạn text cụ thể.
  • Nhiều cuộc hội thoại trên cùng một block.
  • Thu gọn các ghi chú dài.

Khi nhập ký tự @, hệ thống có thể hiển thị danh sách cộng tác viên để lựa chọn người cần được nhắc đến.

Notes trong WordPress 7.1 hỗ trợ rich text và @mentions để cộng tác hiệu quả hơn.
Notes trong WordPress 7.1 hỗ trợ rich text và @mentions để cộng tác hiệu quả hơn.

WordPress hướng đến khả năng cộng tác tốt hơn

Những cải tiến này đặc biệt phù hợp với:

  • Agency thiết kế website.
  • Nhóm SEO.
  • Nhóm content.
  • Đội ngũ marketing.
  • Doanh nghiệp có nhiều người quản trị website.

Thay vì trao đổi toàn bộ feedback qua email hoặc ứng dụng chat bên ngoài, cộng tác viên có thể để lại nhận xét ngay trên nội dung cần chỉnh sửa.

Tạo Playlist Audio

WordPress 7.1 bổ sung khả năng tạo playlist âm thanh.

Người dùng có thể thêm nhiều file audio vào một bài viết hoặc trang và tạo thành một danh sách phát.

Đáng chú ý, playlist có thể sử dụng waveform view, giúp hiển thị hình dạng trực quan của từng track trong quá trình phát.

Tính năng này có thể hữu ích với:

  • Website âm nhạc.
  • Podcast.
  • Website nghệ sĩ.
  • Website giáo dục.
  • Website chia sẻ audio.
WordPress 7.1 bổ sung playlist audio với tùy chọn hiển thị waveform.
WordPress 7.1 bổ sung playlist audio với tùy chọn hiển thị waveform.

Tùy chỉnh Breakpoint Mobile và Tablet

WordPress 7.1 cho phép theme định nghĩa responsive breakpoints riêng trong theme.json.

Thay vì chỉ sử dụng breakpoint mặc định, theme có thể thiết lập các giá trị phù hợp với hệ thống thiết kế của website.

Các thiết lập responsive và khả năng hiển thị block có thể dựa trên những breakpoint này.

Theme có thể định nghĩa breakpoint responsive riêng cho mobile và tablet thông qua theme.json.
Theme có thể định nghĩa breakpoint responsive riêng cho mobile và tablet thông qua theme.json.

Vì sao breakpoint tùy chỉnh quan trọng?

Mỗi website có bố cục khác nhau.

Ví dụ, một website bán hàng có thể cần breakpoint khác với:

  • Website tin tức.
  • Website doanh nghiệp.
  • Landing page.
  • Website portfolio.
  • Website thương mại điện tử.

Khả năng kiểm soát breakpoint giúp developer xây dựng hệ thống responsive phù hợp hơn với từng dự án.

Block Tabs giúp tổ chức nội dung gọn gàng

WordPress 7.1 bổ sung khả năng tổ chức nội dung bằng Tabs.

Thay vì hiển thị tất cả nội dung cùng lúc, các nội dung liên quan có thể được chia thành nhiều tab.

Ví dụ:

Tab 1: Thông tin sản phẩm
Tab 2: Thông số kỹ thuật
Tab 3: Hướng dẫn sử dụng
Tab 4: Chính sách bảo hành

Cách trình bày này giúp trang web gọn hơn và hạn chế việc người dùng phải cuộn qua quá nhiều nội dung.

Tabs giúp chia nội dung thành nhiều khu vực và tạo giao diện gọn gàng hơn.
Tabs giúp chia nội dung thành nhiều khu vực và tạo giao diện gọn gàng hơn.

Plugin và Theme có thể đăng ký Icon riêng

WordPress 7.1 mở rộng hệ thống icon trong editor.

Plugin và theme developer có thể đăng ký custom icon sets, sau đó cung cấp chúng trong thư viện icon cùng với các icon mặc định của WordPress.

Điều này mở ra nhiều khả năng tùy biến giao diện cho các theme và plugin chuyên biệt.

Theme và plugin có thể đăng ký bộ icon riêng để sử dụng trong WordPress Editor.
Theme và plugin có thể đăng ký bộ icon riêng để sử dụng trong WordPress Editor.

Upload hình ảnh được tối ưu ngay trên trình duyệt

Một thay đổi quan trọng khác nằm ở cách WordPress xử lý hình ảnh.

WordPress 7.1 đưa quá trình:

  • Nén hình ảnh.
  • Resize.
  • Tạo thumbnail.

về phía trình duyệt thông qua WebAssembly build của libvips.

Điều này giúp giảm áp lực xử lý trên server.

Đặc biệt với hosting chia sẻ, việc xử lý hình ảnh ngay trên trình duyệt có thể giúp hạn chế các vấn đề liên quan đến:

  • PHP memory limit.
  • PHP timeout.
  • CPU server.
  • Tài nguyên hosting.
WordPress 7.1 chuyển nhiều tác vụ xử lý hình ảnh sang trình duyệt để giảm tải server.
WordPress 7.1 chuyển nhiều tác vụ xử lý hình ảnh sang trình duyệt để giảm tải server.

Hỗ trợ AVIF, HEIC và HDR Gain Maps

WordPress 7.1 mở rộng khả năng xử lý media với các định dạng hình ảnh hiện đại hơn.

Các định dạng và công nghệ được hỗ trợ gồm:

  • AVIF
  • HEIC
  • HDR gain maps

AVIF đặc biệt đáng chú ý đối với website quan tâm đến tốc độ tải trang vì định dạng này có thể tạo hình ảnh chất lượng tốt với dung lượng thấp trong nhiều trường hợp.

Đối với website SEO, tối ưu hình ảnh vẫn là một yếu tố quan trọng trong việc cải thiện trải nghiệm người dùng và hiệu suất trang.

WordPress 7.1 mở rộng khả năng xử lý các định dạng hình ảnh hiện đại như AVIF và HEIC.
WordPress 7.1 mở rộng khả năng xử lý các định dạng hình ảnh hiện đại như AVIF và HEIC.

Thiết lập trạng thái Hover, Focus và Active

WordPress 7.1 đưa thêm các tùy chọn thiết kế interactive states vào editor.

Đối với Button và Navigation Link, người dùng có thể thiết lập cách hiển thị khi:

  • Hover.
  • Focus.
  • Active.

Trước đây, những hiệu ứng này thường được xử lý bằng CSS.

Với các tùy chọn mới, người dùng có thể thực hiện nhiều thiết lập trực tiếp trong editor mà không cần chỉnh code.

WordPress 7.1 cho phép thiết lập trạng thái hover, focus và active trực tiếp trong editor.
WordPress 7.1 cho phép thiết lập trạng thái hover, focus và active trực tiếp trong editor.

Cải thiện Accessibility

Accessibility tiếp tục là một trọng tâm trong WordPress 7.1.

Phiên bản mới mang đến nhiều cải tiến liên quan đến khả năng sử dụng và điều hướng cho người dùng.

Một số thay đổi đáng chú ý gồm:

  • Accessible tooltips API mới.
  • Cải thiện khả năng dự đoán của screen reader.
  • Cải thiện labeling trong khu vực quản trị.
  • Cải thiện navigation trong editor.
  • Cải thiện interaction trong editor.

Những thay đổi này góp phần giúp website WordPress dễ tiếp cận hơn với nhiều nhóm người dùng.

WordPress 7.1 tiếp tục cải thiện accessibility trong khu vực quản trị và trình chỉnh sửa.
WordPress 7.1 tiếp tục cải thiện accessibility trong khu vực quản trị và trình chỉnh sửa.

WordPress 7.1 có ý nghĩa gì với website doanh nghiệp?

Với các website doanh nghiệp, WordPress 7.1 mang lại nhiều thay đổi thực tế.

Thiết kế responsive dễ quản lý hơn

Các thiết lập responsive được đưa gần hơn với giao diện editor, giúp content team có thể thực hiện nhiều thay đổi mà không cần phụ thuộc hoàn toàn vào developer.

Giảm CSS tùy chỉnh

Những nhu cầu phổ biến như responsive hoặc trạng thái tương tác có thể được xử lý trực tiếp trong hệ thống WordPress.

Điều này có thể giúp giảm lượng CSS tùy chỉnh trong một số dự án.

Tối ưu hình ảnh tốt hơn

Việc xử lý resize, compression và thumbnail trên trình duyệt giúp giảm áp lực cho server, đặc biệt hữu ích với website có lượng hình ảnh lớn.

Hỗ trợ quy trình làm việc nhóm

Notes với rich text và @mentions giúp designer, developer, SEO và content team trao đổi trực tiếp trên nội dung.

WordPress 7.1 có thay đổi gì với website sử dụng Flatsome?

Đối với các website đang sử dụng Flatsome và UXBuilder, cần phân biệt rõ giữa tính năng của WordPress Core và tính năng do theme cung cấp.

WordPress 7.1 bổ sung nhiều khả năng mới cho WordPress Editor và hệ thống block, nhưng không đồng nghĩa toàn bộ giao diện UXBuilder sẽ tự động sử dụng mọi tính năng mới.

Nếu website đang sử dụng Flatsome, trước khi cập nhật WordPress nên kiểm tra:

  • Phiên bản Flatsome hiện tại.
  • UXBuilder.
  • WooCommerce.
  • Plugin đang sử dụng.
  • Custom code trong child theme.
  • CSS/JS tùy chỉnh.
  • Các plugin tạo block.
  • Plugin cache và tối ưu hiệu suất.

Đặc biệt với website thương mại điện tử đang chạy thực tế, không nên cập nhật WordPress Core trực tiếp trên website production mà chưa backup và kiểm tra tương thích.

Website sử dụng Flatsome nên kiểm tra khả năng tương thích theme và plugin trước khi cập nhật WordPress 7.1.
Website sử dụng Flatsome nên kiểm tra khả năng tương thích theme và plugin trước khi cập nhật WordPress 7.1.

Có nên cập nhật lên WordPress 7.1 ngay không?

WordPress 7.1 mang đến nhiều cải tiến đáng chú ý, nhưng thời điểm cập nhật nên phụ thuộc vào hệ thống website.

Website mới

Có thể cân nhắc sử dụng WordPress 7.1 ngay sau khi kiểm tra theme và plugin cần thiết.

Website doanh nghiệp đang hoạt động

Nên:

  1. Backup toàn bộ website.
  2. Backup database.
  3. Kiểm tra theme.
  4. Kiểm tra plugin.
  5. Kiểm tra WooCommerce nếu có.
  6. Kiểm tra PHP version.
  7. Test trên staging.
  8. Kiểm tra giao diện desktop và mobile.
  9. Kiểm tra form liên hệ.
  10. Kiểm tra chức năng đặt hàng và thanh toán.

Website đang chạy nhiều custom code

Nên thận trọng hơn.

Các website có nhiều hook, filter, shortcode, custom template hoặc plugin tự phát triển cần được kiểm tra kỹ trước khi cập nhật.

Kết luận

WordPress 7.1 đánh dấu một bước tiến đáng chú ý trong việc đưa responsive design, chỉnh sửa media, interactive states và collaboration trực tiếp vào WordPress Editor.

Những điểm nổi bật nhất gồm:

  • Responsive trực tiếp không cần CSS cho nhiều thiết lập.
  • Media Editor mới.
  • Crop và chỉnh sửa ảnh trong workflow riêng.
  • Notes hỗ trợ rich text và @mentions.
  • Breakpoint mobile và tablet tùy chỉnh.
  • Tabs.
  • Custom icons.
  • Interactive styles.
  • Xử lý hình ảnh ngay trên trình duyệt.
  • Hỗ trợ AVIF, HEIC và HDR gain maps.
  • Cải thiện accessibility.

Đối với developer, agency thiết kế website và người quản trị WordPress, đây là những thay đổi đáng theo dõi vì chúng có thể làm thay đổi cách xây dựng và quản lý website WordPress trong thời gian tới.

Tuy nhiên, với website đang vận hành thực tế, đặc biệt là website WooCommerce, Flatsome hoặc có nhiều plugin và custom code, nên backup và kiểm tra tương thích trước khi cập nhật WordPress Core.

WordPress 7.1 tập trung vào responsive, media, cộng tác và trải nghiệm quản trị website.
WordPress 7.1 tập trung vào responsive, media, cộng tác và trải nghiệm quản trị website.
5/5 - (1 bình chọn)

Để lại một bình luận