Cách thêm nút “sao chép mã” vào khối mã lệnh trong WordPress – Việc thêm nút “Sao chép mã” vào khối Mã lệnh trong WordPress sẽ nâng cao khả năng sử dụng và sự tiện lợi. Nút này cho phép người dùng dễ dàng sao chép mã được hiển thị chỉ bằng một cú nhấp chuột, loại bỏ cách thức chọn và sao chép thủ công.
Điều này đặc biệt thuận lợi cho những ai muốn thực hiện thao tác nhanh chóng hay đơn giản là không thoải mái với việc sao chép mã theo cách thủ công hoặc cho những ai đang truy cập trên thiết bị di động.
Thêm nút “sao chép mã” vào khối mã lệnh
Bằng cách kết hợp tính năng này vào trang web của bạn sẽ mang đến cho người dùng sự tiện lợi khi họ muốn lấy mã lệnh. Điều này không chỉ nâng cao hiệu quả mà còn làm giảm khả năng xảy ra lỗi khi sao chép mã lệnh.
Trong bài này mình sẽ hướng dẫn các bạn thực hiện 2 phương pháp để thêm nút “sao chép mã” vào khối mã lệnh trong WordPress một cách đơn giản và nhanh nhất.
Phương pháp 1: Sử dụng mã lệnh tùy chỉnh
Phương pháp này khá đơn giản nếu bạn hãy truy cập vào tệp header.php của chủ đề bằng cách đi tới menu Giao diện > Trình chỉnh sửa tệp chủ đề (Theme File Editor) từ bảng điều khiển WordPress của bạn.
Trên trang Chỉnh sửa chủ đề, tìm và chọn header.php từ danh sách. Sau đó chèn đoạn mã sau ngay trước thẻ đóng </head> là được.
<script>
document.addEventListener('DOMContentLoaded', function() {
var codeBlocks = document.querySelectorAll('.wp-block-code');
codeBlocks.forEach(function(block) {
var code = block.querySelector('code');
var button = document.createElement('button');
var buttonText = document.createTextNode('Copy Code');
button.appendChild(buttonText);
button.style.cssText = 'position: absolute; top: 0; right: 0; margin: 8px; padding: 4px 8px; font-size: 12px; background-color: #1d8ab3; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out;';
button.addEventListener('mouseenter', function() {
button.style.backgroundColor = '#cce7e8';
});
button.addEventListener('mouseleave', function() {
button.style.backgroundColor = '#1d8ab3';
});
button.addEventListener('click', function() {
var range = document.createRange();
range.selectNode(code);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
button.innerText = 'Copied!';
button.style.backgroundColor = '#333';
button.style.color = '#fff';
setTimeout(function() {
button.innerText = 'Copy Code';
button.style.backgroundColor = '#1d8ab3';
button.style.color = '#fff';
}, 3000);
});
block.style.cssText = 'position: relative;';
block.insertBefore(button, code);
});
var codeTexts = document.querySelectorAll('.wp-block-code pre');
codeTexts.forEach(function(text) {
text.style.color = '#fff';
});
});
</script>Lưu ý: Tuy nhiên nếu bạn áp dụng phương pháp này nếu chủ đề (theme) có bản cập nhật mới thì bạn phải thực hiện lại các thao tác trên.
Để khắc phục điều này bạn có thể cài Plugin Insert Headers And Footers và tiến hành sao chép mã lệnh bên trên và dán vào phần Header hoặc Footer đều được.
Sau khi cài đặt xong Plugin bạn vào Menu Cài đặt > Chọn WP Headers And Footers sau đó bạn dán đoạn mã bên trên vào phần Header hoặc Footer đều được. Như mình, mình sẽ dán nó ở Footer (như hình dưới).
Cuối cùng, nhấn “Lưu thay đổi” và kiểm tra kết quả, bạn sẽ thấy nút “sao chép mã” trên khối mã lệnh.
Phương pháp 2: Tạo Plugin tùy chỉnh
Đây là một cách cũng khá hữu ích bạn không cần phải lo lắng khi chủ đề (theme) được cập nhật phiên bản mới hoặc bạn không có quyền truy cập vào các tệp của chủ đề hay đơn giản là bạn muốn tránh những phiền phức khi sử dụng mã lệnh trự tiếp. Với cách này bạn sẽ tự tạo Plugin cho riêng tính năng của bạn, bạn không cần phụ thuộc vào Plugin của người khác.
Bước 1: Tạo thư mục Plugin
Đầu tiên bạn tạo một thư mục Plugin để chứa tất cả các tệp của plugin. Bạn có thể đặt tên thư mục với bất kỳ tên gì mà bạn muốn tuy nhiên bạn nên đặt tên Plugin cho “gợi nhớ” đến tính năng của nó, giả sử ở đây tôi đặt là “copy-code-button” làm tên thư mục.
Bước 2: Tạo tệp chính Plugin
Bây giờ, bạn hãy tạo tệp PHP bằng trình soạn thảo văn bản hoặc trình soạn thảo mã lệnh của bạn. Đảm bảo rằng tệp PHP có cùng tên với thư mục plugin (copy-code-button.php).
Sau khi tạp tệp PHP xong bạn hãy sao chép đoạn mã bên dưới và dán vào bên trong nó.
<?php
/*
Plugin Name: copy-code-button
Plugin URI: https://www.wppagebuilders.com
Description: Custom Plugin for adding custom code
Version: 1.0.0
Author: WPPagebuilders
Author URI: https://www.wppagebuilders.com/
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
function wpp_copycode() {
wp_register_script('copy-code-button', plugins_url( '/', __FILE__ ) . 'assets/copycode.js' );
wp_enqueue_script('copy-code-button');
}
add_action('wp_enqueue_scripts', 'wpp_copycode');Cuối cùng hãy lưu lại tệp và tiếp tục thực hiện bước tiếp theo.
Bước 3: Tạo tập lệnh cho nút
Đầu tiên bạn hãy tạo một thư mục có tên “assets“‘, sau đó tiến hành tạo tệp copycode.js trong thư mục này.
Sau đó bạn hãy sao chép đoạn mã bên dưới và dán vào tệp copycode.js là được.
document.addEventListener('DOMContentLoaded', function() {
var codeBlocks = document.querySelectorAll('.wp-block-code');
codeBlocks.forEach(function(block) {
var code = block.querySelector('code');
var button = document.createElement('button');
var buttonText = document.createTextNode('Copy Code');
button.appendChild(buttonText);
button.style.cssText = 'position: absolute; top: 0; right: 0; margin: 8px; padding: 4px 8px; font-size: 12px; background-color: #1d8ab3; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out;';
button.addEventListener('mouseenter', function() {
button.style.backgroundColor = '#cce7e8';
});
button.addEventListener('mouseleave', function() {
button.style.backgroundColor = '#1d8ab3';
});
button.addEventListener('click', function() {
var range = document.createRange();
range.selectNode(code);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
button.innerText = 'Copied!';
button.style.backgroundColor = '#333';
button.style.color = '#fff';
setTimeout(function() {
button.innerText = 'Copy Code';
button.style.backgroundColor = '#1d8ab3';
button.style.color = '#fff';
}, 3000);
});
block.style.cssText = 'position: relative;';
block.insertBefore(button, code);
});
var codeTexts = document.querySelectorAll('.wp-block-code pre');
codeTexts.forEach(function(text) {
text.style.color = '#fff';
});
});Cuối cùng hãy lưu lại tập tin và thực hiện bước tiếp theo.
Bước 4: Tạo tệp và cài đặt
Cuối cùng, bạn hãy sử dụng phần mềm Winrar hoặc Winzip đến nén thư mục “copy-code-button” thành copy-code-button.zip.
Sau khi có được thư mục .zip, bạn có thể tiến hành tải plugin lên trang WordPress của mình bằng cách truy cập menu Plugin > Thêm mới trong bảng điều khiển WordPress của bạn. Nhấp vào nút Tải lên Plugin, sau đó Chọn tệp vừa tạo để cài đặt.
Sau khi quá trình tải lên hoàn tất, bạn chỉ cần cài đặt và kích hoạt plugin. Sau khi kích hoạt, bạn sẽ có nút “sao chép mã” trên khối mã lệnh như hình trên.
- Cách phân trang bài viết trong WordPress giúp tăng Pageview
- Cách chèn từ khóa vào bài viết WordPress tự động
- Cách lấy lại mật khẩu WordPress bằng phpMyadmin
- Cách tạo giao diện con trong WordPress cực kỳ đơn giản
- Chặn truy cập từ các quốc gia bằng cách sử dụng .htaccess
Cập nhật mã tùy chỉnh mới
Đoạn mã bên dưới sẽ có các nút “Sao chép mã” và “Mở mã trong cửa sổ mới” ở góc trên bên phải khối mã lệnh WordPress của bạn. Bạn có hai lựa chọn để thực hiện nó:
- Phương pháp 1: Chèn mã bên dưới theo hướng dẫn phương pháp 1.
- Phương pháp 2: Thay đoạn mã bên dưới trong tệp “copycode.js” ở hướng dẫn phương pháp 2 nhớ hãy bỏ thẻ
<script></script>nhé.
<script>
document.addEventListener('DOMContentLoaded', function() {
var codeBlocks = document.querySelectorAll('.wp-block-code');
codeBlocks.forEach(function(block) {
var code = block.querySelector('code');
var button1 = document.createElement('button');
var button1Text = document.createTextNode('Copy Code');
button1.appendChild(button1Text);
button1.style.cssText = 'position: absolute; top: 0; right: 80px; margin: 8px; padding: 4px 8px; font-size: 12px; background-color: #1d8ab3; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out;';
button1.addEventListener('mouseenter', function() {
button1.style.backgroundColor = '#cce7e8';
});
button1.addEventListener('mouseleave', function() {
button1.style.backgroundColor = '#1d8ab3';
});
button1.addEventListener('click', function() {
var range = document.createRange();
range.selectNode(code);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
button1.innerText = 'Copied!';
button1.style.backgroundColor = '#333';
button1.style.color = '#fff';
setTimeout(function() {
button1.innerText = 'Copy Code';
button1.style.backgroundColor = '#1d8ab3';
button1.style.color = '#fff';
}, 3000);
});
var button2 = document.createElement('button');
var button2Text = document.createTextNode('Open Code');
button2.appendChild(button2Text);
button2.style.cssText = 'position: absolute; top: 0; right: 0; margin: 8px; padding: 4px 8px; font-size: 12px; background-color: #1d8ab3; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out;';
button2.addEventListener('mouseenter', function() {
button2.style.backgroundColor = '#cce7e8';
});
button2.addEventListener('mouseleave', function() {
button2.style.backgroundColor = '#1d8ab3';
});
button2.addEventListener('click', function() {
var codeContent = code.innerHTML;
var newWindow = window.open('', '_blank', 'width=500,height=300');
newWindow.document.body.innerHTML = '<pre>' + codeContent + '</pre>';
});
block.style.cssText = 'position: relative;';
block.insertBefore(button1, code);
block.insertBefore(button2, code);
});
var codeTexts = document.querySelectorAll('.wp-block-code pre');
codeTexts.forEach(function(text) {
text.style.color = '#fff';
});
});
</script>Sau khi thực hiện xong bạn sẽ thấy kết quả như hình bên dưới.
Oke! Vậy là xong, bạn đã có được các nút sao chép rất chuyên nghiệp đúng không?
Kết luận
Khối mã lệnh là một tính năng thiết yếu trong WordPress giúp bạn có thể chia sẻ các đoạn mã lệnh một cách dễ dàng và hiệu quả. Việc bổ sung nút “Sao chép mã” giúp trang Web của bạn trở nên thân thiện hơn và dễ tiếp cận hơn, có thể thấy đây là một tính năng khá hữu ích cho trang Web WordPress của bạn, bạn nên tích hợp ngay cho trang Web của mình đi nhé. Chúc bạn thành công.
