Elementor 3.8 và Elementor Pro 3.8 đều bao gồm nhiều cập nhật liên quan đến lập trình viên. Chúng tôi khuyến nghị bạn đọc kỹ những cập nhật này vì một số thay đổi này có thể gây hỏng trang web nếu không được giải quyết đúng cách. Bài đăng này bao gồm thông tin mới về chu kỳ phát hành ngắn hơn, một số cải tiến về hiệu suất và cập nhật về khả năng truy cập. Bạn cũng sẽ tìm thấy thông tin bổ sung về thay đổi sắp xảy ra đối với tên lớp của Containers trong Trình soạn thảo và cách những thay đổi này có thể làm hỏng trang web.
Contents
- 1 Lịch Trình Phát Hành Mới
- 2 Phát Hành Thường Xuyên
- 3 Khởi Tạo Nhanh Hơn
- 4 Luồng Chính
- 5 Trì Hoãn Xử Lý Widgets
- 6 Tải Font Google Nhanh Hơn
- 7 Hiển Thị Font Google
- 8 Hỗ Trợ Theme Builder cho wp_body_open
- 9 Tiêm Mã
- 10 Tiện Ích Menu Truy Cập
- 11 Hết Hạn Mã Lỗi
- 12 Chính Sách Hết Hạn
- 13 Kiểm Tra và Gỡ Lỗi
- 14 Thay Đổi Tên Lớp Container
- 15 Thử Nghiệm Containers
- 16 Cải Thiện Hiệu Suất
- 17 Tên Lớp Được Cập Nhật
- 18 Hướng Dẫn Kiểm Tra
- 19 Kết Luận
Lịch Trình Phát Hành Mới
Chúng tôi đã xem xét cách tăng tốc độ phát hành và giảm các vấn đề không tương thích. Kết quả, chúng tôi quyết định phát hành phiên bản chính của Elementor và Elementor Pro cùng một lúc. Phiên bản 3.8 thực hiện quyết định này. Điều này sẽ giúp chúng tôi phát hành các thay đổi cơ sở hạ tầng trong Elementor và triển khai các tính năng nâng cao trong phiên bản Pro, giảm thiểu các tác động phụ.
Phát Hành Thường Xuyên
Thay đổi thứ hai trong lộ trình phát hành của chúng tôi là áp dụng một lịch trình phát hành nhất quán. Chúng tôi sẽ phát hành các phiên bản nhỏ với ít thay đổi hơn, nhưng thường xuyên hơn. Chúng tôi dự định phát hành một phiên bản “beta” mới trong vòng 6 tuần. Giai đoạn thử nghiệm beta thay đổi từ phiên bản này sang phiên bản khác. Do đó, không thể cam kết với một lịch trình cố định cho việc phát hành phiên bản đầy đủ.
Các trang web được lưu trữ trên Elementor Cloud sẽ được tận hưởng các tính năng mới mỗi 2 tuần. Điều này bởi vì chúng tôi có hoàn toàn kiểm soát môi trường, cho phép chúng tôi đảm bảo mọi thứ hoạt động như mong đợi.
Khởi Tạo Nhanh Hơn
Thông thường, một trang web có nhiều phần tử càng nhiều thì thời gian tải trang càng lâu. Để tăng tốc quá trình khởi tạo tổng thể và làm nhanh thời gian tải, chúng tôi đã thực hiện một số thay đổi trong Elementor 3.8 nhằm cải thiện số liệu Time To Interactive (TTI) của trang web của bạn.
Luồng Chính
Trình duyệt sử dụng một luồng chính để chạy JavaScript. Luồng chính xử lý sự kiện của người dùng và hiển thị. Các chức năng tốn thời gian trong luồng chính dẫn đến trải nghiệm người dùng kém khi trang web không đáp ứng được tương tác từ người dùng.
Cho đến nay, trình khởi tạo ban đầu của Elementor trang là đồng bộ, mỗi khi thêm các phần tử vào trang, JavaScript được thêm vào luồng chính. Quá trình này chặn luồng chính và làm chậm quá trình khởi tạo.
Trì Hoãn Xử Lý Widgets
Một trong những người dùng của chúng tôi, Alexander Grimalovsky, đề xuất cải thiện quá trình khởi tạo trang bằng cách tách các thành phần độc lập khỏi luồng chính.
Alexander đã tạo một báo cáo về hiệu suất trên một trong số trang web của khách hàng của mình, phân tích những quy trình làm chặn luồng chính. Anh đã gửi một PR tới kho lưu trữ GitHub của chúng tôi, loại bỏ các xử lý của các widget khỏi luồng chính bằng cách trì hoãn chúng. Thay đổi này giúp giảm thiểu các tác vụ dài và tăng tốc quá trình khởi tạo.
Cảm ơn Alexander đã dành thời gian để cải thiện Elementor.
Tải Font Google Nhanh Hơn
Một cải thiện về hiệu suất khác mà nhà phát triển nên biết là cách tải các Font Google trên trang web được xây dựng bằng Elementor.
Các trang web có thể chọn cách hiển thị phông chữ sau khi trình duyệt tải xong chúng. Mỗi cách hiển thị sẽ áp dụng một chiến lược hiển thị khác nhau.
Nhà phát triển có thể điều khiển chiến lược hiển thị bằng cách sử dụng thuộc tính CSS font-display. Đọc thêm về sự khác biệt trên MDN hoặc tại CSS Specification.
Hiển Thị Font Google
Trước phiên bản 3.8, thuộc tính font-display được đặt thành auto (chiến lược hiển thị được định nghĩa bởi trình duyệt). Người dùng có thể thay đổi cách hiển thị này từ “Cài Đặt” > “Nâng Cao” > “Tải Google Fonts” và nhà phát triển có thể thay đổi điều này theo cách lập trình bằng cách sử dụng hook filter.
Elementor 3.8 đã thay đổi giá trị mặc định trên các trang web mới từ auto thành swap. Lưu ý rằng thay đổi loại này có thể làm hỏng các trang web hiện có, vì vậy chỉ áp dụng cho các trang web mới. Nếu người dùng của các trang web hiện có muốn, họ có thể thay đổi giá trị hiển thị font từ auto thành swap trong bất kỳ lúc nào.
Hỗ Trợ Theme Builder cho wp_body_open
Elementor Pro đã thêm khả năng chèn mã và mã tùy chỉnh vào Theme Builder bằng cách sử dụng hook hành động wp_body_open.
Tiêm Mã
Gần như mọi trang web đều sử dụng các mã bên thứ ba như google analytics và facebook pixel. Các bên thứ ba yêu cầu bạn nhúng mã vào thẻ <head> của trang web và ở đầu hoặc cuối thẻ <body>.
Nhà phát triển WordPress sử dụng hook hành động wp_head, wp_body_open và wp_footer để tiêm mã vào giao diện.
Cho đến nay, Theme Builder của Elementor Pro chỉ hỗ trợ các hook wp_head và wp_footer. Kể từ phiên bản 3.8, chúng tôi đã thêm hỗ trợ cho hook hành động wp_body_open, cho phép nhà phát triển tiêm mã sau thẻ <body>.
Tiện Ích Menu Truy Cập
Người dùng Elementor và các thành viên cộng đồng cung cấp thông tin quý giá về sự tuân thủ theo quy định về quyền riêng tư. Anne-Mieke Bovelett, một nhà phát triển front-end và một nhà vận động về khả năng truy cập, đã đưa ra gợi ý về cách cải thiện việc triển khai hiện tại của một số quy tắc khả năng truy cập trong tiện ích Nav Menu của chúng tôi.
Cấu trúc của tiện ích Nav Menu sử dụng cả <nav> và thuộc tính role=navigation. Điều này không phải là tốt nhất. Sử dụng phần tử <nav> tự động truyền thông cho các công nghệ hỗ trợ bằng giọng nói rằng phần tử có vai trò điều hướng, do đó, thuộc tính vai trò là dư thừa.
Quy tắc tổng quát trong trường hợp này, là ưu tiên sử dụng phần tử HTML ngữ nghĩa chính xác thay vì các thẻ ARIA.
Nhờ Anne, chúng tôi đã sửa chữa một số tiện ích khác với các thành phần phân trang bổ sung ngoài tiện ích Nav Menu.
Hết Hạn Mã Lỗi
Ở thời điểm này, chúng tôi đã quyết định hoãn xóa mã lỗi đã lỗi thời theo kế hoạch cho phiên bản 3.8.
Chính Sách Hết Hạn
Khi chúng tôi xóa mã lỗi, mã cũ và mã mới sống chung với nhau trong 8 phiên bản chính của Elementor, để nhà phát triển bên ngoài có đủ thời gian để cập nhật mã của họ.
Sau tám phiên bản, chúng tôi xóa mã lỗi cũ. Việc xóa mã có thể làm hỏng trang web nếu mã bị xóa vẫn được sử dụng trong các addon bên ngoài. Tại sao nó lại làm hỏng trang web? Bởi vì việc sử dụng các chức năng/phương thức không tồn tại sẽ trả về lỗi nghiêm trọng.
Kiểm Tra và Gỡ Lỗi
Chúng tôi quyết định tránh xóa mã trong phiên bản này. Tuy nhiên, nhà phát triển addon nên monitor debug logs để đảm bảo rằng họ đã cập nhật tất cả mã lỗi đã lỗi thời của mình.
Thay Đổi Tên Lớp Container
Elementor 3.8 có một số thay đổi gây hỏng trang web liên quan đến tính năng Containers. Kể từ phiên bản 3.8, một số tên lớp sẽ bị rút gọn.
Thử Nghiệm Containers
Phiên bản 3.6 chính thức giới thiệu yếu tố Flexbox Container mới để thay thế cấu trúc section/column hiện tại. Tính năng này nhằm cung cấp thêm linh hoạt trong việc thiết kế bố cục nâng cao và cho phép có khả năng lồng nhau.
Thử nghiệm giai đoạn alpha đã được chúng tôi kiểm tra kỹ càng và chúng tôi nhận được rất nhiều phản hồi quý giá từ cộng đồng. Trong thời gian này, chúng tôi cũng đã xem xét rất nhiều trường hợp sử dụng và khả năng, vì có vô số cách sử dụng container trên các trang web khác nhau.
Cải Thiện Hiệu Suất
Một trong những vấn đề được đề cập trong quá trình thử nghiệm là cải thiện hiệu suất. So với các section/column của Elementor, khi chuyển sang containers, trang web sẽ giảm số lượng phần tử DOM, cải thiện tốc độ trang web của bạn trong quá trình này.
Vượt qua các cải thiện mà container mang lại về tốc độ, Elementor còn tiến xa hơn bằng cách giảm số lượng và kích thước của các lớp CSS và các thuộc tính HTML khác. Khi nói đến tốc độ và hiệu suất, từng ký tự đều quan trọng. Đó là lý do tại sao chúng tôi quyết định sử dụng tên lớp ngắn hơn trong containers.
Tên Lớp Được Cập Nhật
Thay đổi chính trong tên lớp là thay thế elementor-*
bằng e-*
và container
bằng con
. Các tên lớp container cập nhật thành các tên ngắn hơn:
e-container
->e-con
e-container-width-boxed
->e-con-boxed
e-container-width-full
->e-con-full
e-container__inner
->e-con-inner
Quan trọng lưu ý rằng các thay đổi này có thể làm hỏng trang web, nếu bạn sử dụng CSS tùy chỉnh của Elementor hoặc Theme’s tùy chỉnh CSS, bạn cần cập nhật mã của mình.
Hướng Dẫn Kiểm Tra
Chúng tôi khuyến nghị chỉ kiểm tra các tính năng thử nghiệm trên môi trường địa phương hoặc phát triển. Bạn không nên sử dụng các tính năng thử nghiệm trên các trang web sản xuất vì chúng có thể thay đổi, phát triển hoặc thậm chí bị xóa hoàn toàn.
Kết Luận
Phiên bản 3.8 mang đến nhiều thay đổi liên quan đến lập trình viên mà bạn cần làm quen. Như những thay đổi về chu kỳ phát hành ngắn hơn và các thay đổi gây hỏng trang web đối với tên lớp của containers. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại bình luận dưới đây.