Code thêm nút sao chép link bài viết trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách thêm nút sao chép link bài viết trong Elementor nhé.

Khi đọc xong một bài hay, nhiều người muốn gửi link cho bạn bè nhưng lại phải bôi đen địa chỉ trên thanh trình duyệt rồi copy thủ công, vừa bất tiện vừa dễ copy thiếu. Elementor mặc định không có nút sao chép link bài viết, muốn có thì bạn phải code thêm nhé.

Thêm code nút sao chép link bài viết

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.

function nn_copy_link_button_shortcode() {
    if (!is_singular()) {
        return '';
    }
    $url = get_permalink();
    $html = '<div class="nn-copy-link-wrap">';
    $html .= '<button type="button" class="nn-copy-link-btn" data-url="' . esc_url($url) . '">Sao chép link bài viết</button>';
    $html .= '<span class="nn-copy-link-msg" aria-live="polite"></span>';
    $html .= '</div>';
    $html .= '<script>
    document.addEventListener("DOMContentLoaded", function () {
        var nut = document.querySelector(".nn-copy-link-btn");
        if (!nut) { return; }
        nut.addEventListener("click", function () {
            var link = nut.getAttribute("data-url");
            var thongBao = document.querySelector(".nn-copy-link-msg");
            function hienThongBao(noiDung) {
                if (thongBao) { thongBao.textContent = noiDung; }
            }
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(link).then(function () {
                    hienThongBao("Đã sao chép link!");
                }, function () {
                    hienThongBao("Không sao chép được, bạn hãy copy link trên thanh địa chỉ.");
                });
            } else {
                var oNhap = document.createElement("textarea");
                oNhap.value = link;
                document.body.appendChild(oNhap);
                oNhap.select();
                try {
                    document.execCommand("copy");
                    hienThongBao("Đã sao chép link!");
                } catch (e) {
                    hienThongBao("Không sao chép được, bạn hãy copy link trên thanh địa chỉ.");
                }
                document.body.removeChild(oNhap);
            }
        });
    });
    </script>';
    return $html;
}
add_shortcode('nut_sao_chep_link', 'nn_copy_link_button_shortcode');

Code trên tạo shortcode [nut_sao_chep_link]: khi chạy, nó lấy link của bài viết đang xem bằng hàm get_permalink() rồi in ra một nút bấm kèm đoạn JS. Bấm nút, JS sẽ dùng navigator.clipboard để copy link và hiện dòng “Đã sao chép link!” ngay cạnh nút. Với trình duyệt cũ hoặc trang chưa chạy HTTPS, code tự chuyển sang cách dự phòng bằng document.execCommand(“copy”) nên vẫn copy được. Điều kiện is_singular() giúp nút chỉ hiện ở trang bài viết/trang đơn, không hiện ngoài trang danh sách.

Đưa nút ra giao diện trong Elementor

Bạn mở template bài viết trong Elementor (Theme Builder → Single Post), kéo widget Shortcode vào vị trí muốn đặt nút — thường là ngay dưới tiêu đề hoặc cuối bài — rồi nhập [nut_sao_chep_link] là xong. Nếu muốn nút trông hợp với theme hơn thì thêm đoạn CSS dưới vào Tùy biến → CSS bổ sung nhé.

.nn-copy-link-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nn-copy-link-btn { padding: 8px 16px; border: 1px solid #ddd; border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; }
.nn-copy-link-btn:hover { background: #f5f5f5; }
.nn-copy-link-msg { color: #1a7f37; font-size: 14px; }

Lưu ý khi dùng

API clipboard chỉ chạy đầy đủ trên trang HTTPS; nếu website của bạn vẫn chạy HTTP thì nút vẫn hoạt động nhờ cách dự phòng, nhưng bạn nên chuyển sang HTTPS sớm vì vừa tốt cho SEO vừa an toàn hơn cho người đọc.

Kết luận

Vậy là chỉ với 1 shortcode bạn đã thêm được nút sao chép link bài viết trong Elementor rồi nhé. Tính năng này đi chung với bài code thêm thanh tiến trình đọc bài viết trong Elementor là thành combo giữ chân và lan tỏa bài viết khá tốt cho blog.

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