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.

1. 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.

2. 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.

/*
* Author: Lutaweb - https://lutaweb.com
* Đoạn code hướng dẫn thêm nút "copy" trong WordPress
*/
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.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++) {
// Tạo container để chứa <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 = this.parentElement.querySelector('pre').innerText;
// Tạo một thẻ textarea tạm thời
var tempInput = document.createElement('textarea');
tempInput.value = content;
document.body.appendChild(tempInput);
// Chọn và sao chép nội dung
tempInput.select();
tempInput.setSelectionRange(0, 99999);
document.execCommand("copy");
// Loại bỏ thẻ textarea tạm thời
document.body.removeChild(tempInput);
// Hiển thị thông báo
alert("Đoạn mã đã được sao chép vào clipboard!");
});

// Chèn container vào trước thẻ <pre> và di chuyển <pre> vào container
pres[i].parentNode.insertBefore(container, pres[i]);
container.appendChild(pres[i]);
container.appendChild(button);
}
});
</script>
<style>
/* Container cho thẻ <pre> và nút Copy */
.pre-container {
position: relative;
}
pre{
background: #f1f1f1;
border: 1px solid #e1e1e1;
border-radius: 4px;
font-size:16px
}

/* Style cho nút Copy */
.copy-button {
position: absolute;
top: 1px;
right: 0px;
padding: 0px 15px;
font-size: 14px;
cursor: pointer;
background-color: #e1e3e8;;
color: #424242;
font-size: 14px;
border-radius: 0px 0px 4px 4px;
border: 1px solid #e1e1e1;
font-weight:400
}

.copy-button:hover {
background-color: #336aea;
color:#fff
}
</style>
<?php
}
add_action('wp_footer', 'add_copy_button_script');

Giải thích Mã

  1. Hàm add_pre_copy_button:
    • Được gọi trong wp_footer để đảm bảo mã JavaScript được tải sau khi toàn bộ nội dung trang đã được tải.
  2. JavaScript:
    • DOMContentLoaded đảm bảo rằng mã chỉ chạy sau khi DOM đã được tải hoàn toàn.
    • Tìm tất cả các thẻ <pre> và tạo một nút “Copy” bên trong mỗi thẻ.
    • Nút “Copy” sao chép nội dung của thẻ <pre> vào clipboard khi được nhấp.
  3. CSS:
    • .pre-container: Định vị và tạo khoảng cách cho container chứa thẻ <pre> và nút “Copy”.
    • .copy-button: Định dạng nút “Copy” bao gồm vị trí, màu sắc, và hiệu ứng khi di chuột.

3. 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. Kiểm tra bất kỳ trang nào có thẻ <pre> để đảm bảo rằng nút “Copy” đã xuất hiện và hoạt động chính xác.

4. 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.

5/5 - (1 bình chọn)

Trả lời