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

/*
* Author: no1vn
* Đ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');