Code ẩn/hiện nội dung theo trạng thái đăng nhập trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách ẩn/hiện nội dung theo trạng thái đăng nhập trong Elementor nhé.

Trang của bạn có những nội dung chỉ muốn thành viên đã đăng nhập mới thấy, như link tải tài liệu hay ưu đãi riêng, và ngược lại có những nội dung chỉ muốn hiện với khách chưa đăng nhập, như nút kêu gọi tạo tài khoản. Elementor mặc định không có điều kiện hiển thị theo trạng thái đăng nhập, muốn nội dung tự ẩn/hiện theo việc khách đã đăng nhập hay chưa thì bạn phải code thêm nhé.

Thêm code ẩn/hiện nội dung theo đăng nhập

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Ẩn/hiện nội dung theo trạng thái đăng nhập
// Dùng [nn_an_hien_dang_nhap hien="thanh-vien"]...[/nn_an_hien_dang_nhap]
// cho nội dung chỉ thành viên thấy, và hien="khach" cho nội dung chỉ khách chưa đăng nhập thấy
add_shortcode('nn_an_hien_dang_nhap', 'nn_an_hien_dang_nhap_shortcode');
function nn_an_hien_dang_nhap_shortcode($atts, $content = '') {
    $atts = shortcode_atts(array('hien' => 'thanh-vien'), $atts, 'nn_an_hien_dang_nhap');
    $da_dang_nhap = is_user_logged_in();
    if ('thanh-vien' === $atts['hien'] && !$da_dang_nhap) {
        return '';
    }
    if ('khach' === $atts['hien'] && $da_dang_nhap) {
        return '';
    }
    return do_shortcode($content);
}

Code trên đăng ký một shortcode [nn_an_hien_dang_nhap] có thuộc tính hien nhận 2 giá trị. Với hien=”thanh-vien”, nội dung kẹp giữa 2 thẻ shortcode chỉ hiện khi khách đã đăng nhập, khách chưa đăng nhập thì đoạn đó biến mất hoàn toàn. Với hien=”khach” thì ngược lại, nội dung chỉ hiện với khách chưa đăng nhập. Hàm kiểm tra bằng is_user_logged_in() của WordPress, còn do_shortcode($content) ở cuối giúp các shortcode khác nằm bên trong đoạn nội dung vẫn chạy bình thường.

Gắn shortcode vào trang trong Elementor

Bạn mở trang đang dựng bằng Elementor, kéo widget Văn bản (Text Editor) vào chỗ muốn đặt nội dung rồi nhập shortcode kèm nội dung vào giữa, ví dụ [nn_an_hien_dang_nhap hien=”thanh-vien”]Link tải tài liệu dành riêng cho thành viên[/nn_an_hien_dang_nhap]. Ngay dưới đó bạn có thể đặt thêm một widget Văn bản nữa với hien=”khach” để hiện câu mời đăng nhập cho khách chưa có tài khoản. Shortcode dùng được trong mọi widget văn bản của Elementor và cả trong bài viết Gutenberg.

Lưu ý khi dùng

Shortcode chỉ ẩn/hiện ở phía hiển thị, nếu nội dung là link tải file thì khách chưa đăng nhập vẫn vào được nếu họ biết thẳng địa chỉ file, muốn chặn hẳn thì bạn cần thêm kiểm tra quyền ở phía file tải về. Với trang có bật cache thì nội dung theo trạng thái đăng nhập có thể bị cache nhầm, bạn cần loại trang đó khỏi cache hoặc dùng cache có phân biệt người dùng đã đăng nhập. Thuộc tính hien mặc định là thanh-vien nên nếu bạn quên ghi thuộc tính thì shortcode hiểu là chỉ hiện cho thành viên.

Kết luận

Vậy là chỉ với 1 shortcode bạn đã ẩn/hiện nội dung theo trạng thái đăng nhập trong Elementor rồi nhé. Tính năng này đi chung với bài code thêm nút sao chép link bài viết trong Elementor và bài code hiển thị thời gian tương đối cho ngày đăng trong Elementor là thành combo làm trang blog và trang thành viên linh hoạt hơn khá nhiều.

Nếu cần mình kèm 1-1 về Elementor thì cứ liên hệ mình nhé.