Tạo nút COPY đơn giản không cần cài plugin trong wordpress

Trong hướng dẫn này, bạn sẽ học cách tự động thêm nút “Copy” bên trong thẻ <pre> để sao chép nội dung của thẻ vào clipboard. Điều này rất hữu ích cho các trang web chia sẻ mã nguồn hoặc đoạn văn bản dài cần sao chép dễ dàng.

Thêm Mã vào Tệp functions.php của Theme

Mở tệp functions.php của theme bạn đang sử dụng. Bạn có thể tìm thấy tệp này trong thư mục của theme, thông thường nằm trong /wp-content/themes/”tên-theme”/functions.php

Chèn Mã PHP và JavaScript

Thêm đoạn mã sau vào cuối tệp functions.php. Đoạn mã này sẽ tạo một hàm để thêm nút “Copy” và các kiểu CSS cần thiết (đoạn code dưới đây cũng là mẫu khi hiển thị của nút copy đó bạn hãy đặt nội dung trong cặp thẻ <pre>Nội dung cần sao chép…</pre>)

/*
* Author: Lutaweb - https://lutaweb.com
* Đoạn code hướng dẫn thêm nút "copy" trong WordPress
*/
// Thêm mã JavaScript vào footer
add_action('wp_footer', 'add_copy_button_script');

function add_copy_button_script() {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Tìm tất cả các thẻ <pre> trên trang
    var pres = document.querySelectorAll('pre');

    pres.forEach(function (pre) {
        // Tạo container cho <pre> và nút
        var container = document.createElement('div');
        container.className = 'pre-container';

        // Tạo nút Copy
        var button = document.createElement('button');
        button.innerHTML = 'Copy';
        button.className = 'copy-button';

        // Thêm sự kiện click cho nút
        button.addEventListener('click', function () {
            // Lấy nội dung từ thẻ <pre>
            var content = pre.textContent || pre.innerText;
            navigator.clipboard.writeText(content).then(() => {
                // Hiển thị "Đã Copy" sau khi sao chép
                button.innerHTML = 'Đã Copy';
                button.classList.add('copied');
                // Reset lại nội dung nút sau 4 giây
                setTimeout(() => {
                    button.innerHTML = 'Copy';
                    button.classList.remove('copied');
                }, 4000);
            });
        });

        // Bao thẻ <pre> vào container và thêm nút
        pre.parentNode.insertBefore(container, pre);
        container.appendChild(pre);
        container.appendChild(button);
    });
});
</script>
<style>
/* Container cho thẻ <pre> và nút Copy */
.pre-container {
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Style cho thẻ <pre> */
pre {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-x: auto;
    border-radius: 8px 8px 0 0;
    margin: 0;
}

/* Style cho nút Copy */
.copy-button {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.copy-button:hover {
    background-color: #0056b3;
}

/* Khi nút được bấm */
.copy-button.copied {
    background-color: #28a745;
    color: #fff;
}
</style>
<?php
}

Lưu Tệp và Kiểm Tra Kết Quả

Sau khi thêm mã vào functions.php, lưu tệp và tải lại trang web của bạn.

Sử dụng

Khi muốn tạo lệnh copy cho nội dung nào đó, bạn chỉ cần đặt nội dung vào giữa thẻ <pre> như sau:

<pre>Nội dung cần sao chép...</pre>

JavaScript sẽ tự động thêm nút “Copy” vào bên trong thẻ <pre>, và khi người dùng nhấp vào nút này, nội dung sẽ được sao chép vào clipboard.

Kết Luận

Bằng cách làm theo hướng dẫn này, bạn đã thêm một tính năng tiện lợi vào trang web WordPress của mình, giúp người dùng dễ dàng sao chép nội dung từ các thẻ <pre>. Điều này đặc biệt hữu ích cho các trang web chia sẻ mã nguồn hoặc đoạn văn bản cần sao chép nhanh chóng. Với việc sử dụng JavaScript và CSS, bạn có thể tùy chỉnh thêm để phù hợp với giao diện và trải nghiệm người dùng của trang web.