Hướng Dẫn Sử Dụng Tính Năng Developers Của Elementor

Tính năng Developers của Elementor cho phép bạn thêm các thuộc tính HTML, Optimized DOM và nhiều lợi ích khác nữa mà tôi sẽ liệt kê bên dưới. 

Khi bạn muốn tạo một trang Web mới. Bạn sẽ có rất nhiều lựa chọn trình tạo trang Web khác nhau. Một trong những trình tạo trang mạnh mẽ và được sử dụng phổ biến hiện nay là Elementor. Trong phạm vi bài viết này, tôi sẽ đi sâu phân tích tính năng Developers của Elementor. Bạn có thể tham khảo để tận dụng trình tạo trang này một cách tối ưu hơn.

Có thể bạn quan tâm:

Hướng dẫn sử dụng tính năng Editor của Elementor

Hướng dẫn sử dụng tính năng Layout của Elementor

Elementor Debugger

Elementor Debugger hay còn gọi là trình gỡ lỗi Elementor. Để kích hoạt hoặc hủy kích hoạt Elementor Debugger, bạn hãy chuyển đến các công cụ của Elementor trên Bảng điều khiển WordPress.

Elementor Debugger nằm bên cạnh “nút chỉnh sửa với Elementor” (Edit With Elementor Button) ở giao diện người dùng. Tôi sẽ đưa ra ví dụ cụ thể hiển thị một trang Authorr.php như sau:

Như bạn có thể thấy, trình gỡ lỗi phần tử cung cấp thông tin tiêu đề được gán cho trang. Mẫu tiêu đề của nó được gọi là tiêu đề với tiện ích Menu điều hướng (Header With Nav Menu Widget), chân trang (New Footer With Global Widget) và mẫu được gán cho trang (New Archive).

Skipped, Is Not Published: Có nghĩa là có một mẫu tiêu đề trong “My Templates” được lưu dưới dạng bản nháp và không được chỉ định cho trang này.

Template File: Location Settings (Override) > Elementor – header-footer.php: Điều này có nghĩa là chân trang và đầu trang của chủ đề đã bị Elementor ghi đè.

No Templates For Conditions: Nếu bạn thấy thông báo này có nghĩa là không có Template nào được chỉ định cho nội dung của trang hay bài đăng cụ thể.

Custom Link Attributes

Bạn có thể thêm các thuộc tính HTML tùy chỉnh vào phần tử <a> của mọi liên kết nhờ tính năng Developers của Elementor. Thông qua đó, bạn có thể bổ sung các thuộc tính ARIA (khả năng truy cập), thuộc tính data- *và các giá trị, đầu trang, chân trang, thanh bên, Rel = *,…

Các trường hợp sử dụng thuộc tính liên kết chung bao gồm:

• Cho phép khách truy cập của bạn tải xuống tệp PDF bằng cách nhấp vào nút được tạo bởi thuộc tính tùy chỉnh Download = “Yourfilename”.
• Triển khai các thuộc tính liên quan đến SEO như Rel = “NoOpener”, Rel = “NoReferrer”, Rel = ”Ugc” và “Rel = Managed ”.
• Thêm thuộc tính tiêu đề vào các phần tử liên kết, chẳng hạn như Title = “Tìm hiểu thêm về chúng tôi”. 

Mách với các bạn một mẹo nhỏ là có thể thêm nhiều thuộc tính liên kết được phân tách bằng dấu phẩy (,).

Thêm các thuộc tính tùy chỉnh vào các phần tử liên kết của một Widget

Nếu tiện ích con có phần tử liên kết, bạn có thể thêm bất kỳ thuộc tính tùy chỉnh nào vào HTML của liên kết. Ví dụ: Rel = “Ugc” hoặc Rel = “Managed”. Bạn có thể thêm thuộc tính tùy chỉnh bằng cách thực hiện lần lượt các bước sau:

• Nhấp chuột phải vào tiện ích, nhấp vào Chỉnh sửa tiện ích để mở bảng cài đặt.
• Nhấp vào biểu tượng bánh răng ở bên phải trường Liên kết để mở các tùy chọn bổ sung. 
• Thêm Code của bạn vào trường Thuộc tính tùy chỉnh, sử dụng định dạng key|value. Ví dụ: Để thêm Rel = “Managed” vào HTML của phần tử, hãy nhập Rel | Managed tại đây. Thay vào đó, để thêm Rel = “Ugc” vào HTML của phần tử, hãy nhập Rel | Ugc tại đây. Để thêm tiêu đề vào phần tử liên kết, hãy nhập tiêu đề | văn bản tiêu đề của bạn ở đây.

Tôi cũng có một lưu ý muốn đề cập đối với tính năng Developers của Elementor. Đó là thuộc tính tùy chỉnh chỉ có sẵn cho các tiện ích con có trường liên kết cụ thể. Bạn sẽ không thể thêm thuộc tính tùy chỉnh vào liên kết được tạo trong tiện ích Trình soạn thảo văn bản. 

What is Optimized DOM?

Bắt đầu với Elementor 3.0, một số cải tiến DOM đáng kể đã được thực hiện để tăng tốc độ và hiệu suất của các trang Web Elementor mới. Một số HTML Wrapper Elements đã được loại bỏ là Elementor-Inner, Elementor-Row và Elementor-Column-Wrap.

Việc xóa các phần tử HTML Wrapper khỏi DOM góp phần làm cho Code đầu ra đơn giản hơn, khả năng đọc tốt và ít phức tạp hơn. DOM nhỏ hơn góp phần làm tăng tốc độ và hiệu suất. Tuy nhiên, đây là một thay đổi không bền vững. Vì vậy theo mặc định, Elementor sẽ chỉ sử dụng đầu ra DOM được tối ưu hóa trên các trang Web mới. 

Theo tôi được biết, sự thay đổi này chỉ ảnh hưởng đến các trang Web mới. Điều này để tránh phá vỡ các trang Web hiện có nâng cấp lên 3.0. Việc sử dụng Đầu ra DOM được tối ưu hóa trên các trang Web hiện có nâng cấp từ trước 3.0 có thể khiến giao diện, chức năng của trang Web của bạn bị hỏng. 

Vì lý do này, Optimized DOM Output bị vô hiệu hóa trên các trang Web được nâng cấp và Legacy DOM vẫn giữ nguyên. Tuy nhiên, nếu bạn nâng cấp lên 3.0 và muốn sử dụng Optimized DOM Output, bạn có thể bật tính năng này. Chỉ cần đi tới Elementor, chọn Settings, nhấn chọn tiếp Advanced. Trong Menu thả xuống của Optimized DOM Output, bạn Click Enable là hoàn thành.

WP-CLI

Elementor tích hợp với WP-CLI. Tính năng Developers của Elementor này cho phép bạn chạy các tác vụ Elementor nhất định thông qua dòng lệnh. Các lệnh Elementor được tích hợp với WP-CLI hiện tại là:

• Flush_CSS: Xóa bộ nhớ Cache CSS của trình tạo trang Web Elementor.
• Import_Library: Nhập tệp mẫu vào thư viện.
• Replace_Urls: Thay các URL cũ bởi các URL mới trong mọi trang Elementor.
• Sync_Library: Thư viện Sync Elementor.
• Kích hoạt hoặc hủy kích hoạt giấy phép Elementor Pro.

Tôi sẽ gợi ý bạn một số lệnh thông dụng để xem danh sách các công cụ Elementor WP-CLI có sẵn nhé.

• Phần tử trợ giúp WP: WP Help Elementor.

• Phần tử trợ giúp WP Pro: WP Help Elementor-Pro.

• Để nhận trợ giúp cho một lệnh riêng lẻ, bạn có thể sử dụng một trong hai định dạng sau: WP Help Elementor <Command_Name> hoặc là WP Help Elementor-Pro <Command_Name>.
• Flush_CSS: WP Help Elementor Flush_CSS.
• Import_Library: WP Help Elementor Import_Library.

Tuy nhiên, tôi cần nhắc bạn rằng đối với lệnh WP Element hoặc Import_Library. Tên của người dùng quản trị phải được thêm vào vì lý do bảo mật. Nếu không có tên người dùng của quản trị viên, nó sẽ gây ra lỗi “truy cập bị từ chối”. Ví dụ, WP Elementor Import_Library Import-Test.zip –User=Admin.

Debugging Safe Mode

Tính năng Developers của Elementor còn cho phép bạn gỡ lỗi của trang. Sau khi gỡ lỗi thành công với Safe Mode. Bạn cần làm theo các bước sau để giải quyết vấn đề của mình:

• Hủy kích hoạt các tất cả Plugin của bạn ngoài Elementor và Elementor Pro. Nếu nó giải quyết được vấn đề, hãy kích hoạt lại từng cái một để tìm ra thủ phạm.
• Chuyển sang chủ đề mặc định của WordPress như Twenty Sixteen hoặc Twenty Seventeen.
• Kiểm tra cấu trúc của liên kết cố định của bạn. Ngoài ra, hãy thử thay đổi cấu trúc liên kết cố định thành “Plain”. 
• Chỉnh sửa ở chế độ ẩn danh với trình duyệt của bạn. 
• Kiểm tra quyền của bạn trên các trang được xây dựng bằng Elementor và các Plugin thành viên xem có xung đột gì không.
• Giải quyết xung đột Theme có thể xảy ra. 
• Giải quyết vấn đề Rocket Loader. 
• Xác minh bạn không có chuyển hướng trên Web.
• Xác minh với nhà cung cấp máy chủ của bạn nếu cài đặt WordPress của bạn có chứa tệp .Htaccess. Ngoài ra, hãy kiểm tra với công ty cung cấp dịch vụ Hosting của bạn nếu máy chủ của bạn xóa biến PHP $ _GET.
• Xóa bất kỳ mã JS tùy chỉnh nào bạn đã thêm thông qua tiện ích HTML với sự trợ giúp của trình điều hướng .

Một lưu ý khác dành cho bạn khi dùng tính năng Developers của Elementor. Đó là chỉ quản trị viên trang Web mới có thể kích hoạt Safe Mode. Nếu không nhận được tùy chọn bật Safe Mode. Hãy liên hệ và yêu cầu quản trị viên kích hoạt chế độ an toàn và khắc phục sự cố. Trong trường hợp thiết lập nhiều trang, chỉ quản trị viên cấp cao mới có thể kích hoạt Safe Mode.

Dynamic Shortcode (Pro)

Tính năng này cho phép bạn sử dụng một Shortcode động cho bất kỳ phần tử nào mà Elementor chưa cung cấp thẻ động. Tôi cho rằng dây thật sự là một tính năng tuyệt vời với khả năng vô hạn như:

• Bạn có thể sử dụng bất kỳ mã ngắn về Plugin Custom Field nào không được Elementor hỗ trợ.
• Chèn một mẫu Elementor thông qua mã ngắn của nó.
• Sử dụng mã ngắn của Plugin bên ngoài.
• Sử dụng Shortcode tự mã hóa. Ví dụ như hiển thị có điều kiện các thông báo khác nhau trên trang dựa trên mã ngắn tùy chỉnh do nhà phát triển tạo ra.

Để thêm Shortcode, bạn thực hiện như sau nhé:

• Nhấp vào biểu tượng Dynamic.
• Chọn Shortcode từ các lựa chọn trang Web.
• Nhập mã ngắn của bạn vào trường Cài đặt => Shortcode.

Elementor kết hợp được với hầu hết mọi chủ đề WordPress hiện có. Nó được trang bị nhiều tiện ích khác nhau và bố cục nội dung được tạo sẵn. Vì vậy, bạn không cần phải xây dựng trang Web của mình từ đầu. Thay vào đó, bạn đang sử dụng các phần tử trang Web được tạo sẵn do các chuyên gia xây dựng. Hãy tận dụng tốt các tính năng của Elementor. Điển hình như tính năng Developers của Elementor để trang Web của bạn chuyên nghiệp và thu hút hơn nhé.

Có thể bạn quan tâm:

Hosting WordPress – giải pháp hỗ trợ tối ưu nhất cho Website WordPress

AskWhat – trang hỏi đáp kiến thức tổng hợp