Cách tạo bài viết có tuất hiện đoạn code bài viết ngoài trang chủ để tiện việc sao chép
Bạn muốn hiển thị một đoạn code trong bài viết (ngoài trang chủ) để người dùng có thể sao chép dễ dàng – ví dụ như đoạn code PHP, HTML, hoặc CSS – thì bạn có thể làm theo các cách dưới đây:
Cách 1: Dán thẳng đoạn code vào bài viết (trong trình soạn thảo)
Bước 1: Viết code trong thẻ <pre><code>
Trong trình soạn thảo Gutenberg hoặc Classic, bạn chèn:
[code copy][codecopy]
function dpm_shortcode_codecopy($atts, $content = null) {
$output = ‘<pre><code id=”code-to-copy”>’ . esc_html($content) . ‘</code></pre>’;
$output .= ‘<button onclick=”copyCode()” style=”margin-top:5px;”>Sao chép</button>’;
$output .= ‘<script>
function copyCode() {
var text = document.getElementById(“code-to-copy”).innerText;
navigator.clipboard.writeText(text).then(function () {
alert(“Đã sao chép!”);
});
}
</script>’;
return $output;
}
add_shortcode(‘codecopy’, ‘dpm_shortcode_codecopy’);
[/codecopy] [/code copy]
Gợi ý: Bạn có thể dùng block “Custom HTML” và Có thể gắn CSS cho đẹp hơn
Cách 2: Dùng shortcode để chèn đoạn code + nút copy
Thêm vào functions.php (trong theme hoặc child theme):
[codecopy]
/*
* Tạo thêm nút sao chép code với mã ngắn [codecopy] đoạn code [/codecopy]
*/
function dpm_shortcode_codecopy($atts, $content = null) {
// Tạo ID duy nhất mỗi lần shortcode chạy (tránh trùng nếu nhiều block code trên cùng 1 trang)
$id = uniqid(‘codeblock_’);
$output = ‘<div style=”position: relative; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; margin-bottom: 1em;”>’;
// Nút sao chép nằm góc trên phải
$output .= ‘<button onclick=”copyCode(\” . $id . ‘\’)” style=”position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; z-index: 10;”>Sao chép</button>’;
// Khung code với cuộn
$output .= ‘<pre style=”margin: 0; padding: 1.5em 1em 1em; overflow: auto; white-space: pre; max-height: 400px;”><code id=”‘ . $id . ‘”>’ . esc_html($content) . ‘</code></pre>’;
// Script JavaScript (chỉ chèn 1 lần nếu muốn tối ưu)
$output .= ‘<script>
function copyCode(id) {
var text = document.getElementById(id).innerText;
navigator.clipboard.writeText(text).then(function () {
alert(“Đã sao chép!”);
});
}
</script>’;
$output .= ‘</div>’;
return $output;
}
add_shortcode(‘codecopy’, ‘dpm_shortcode_codecopy’);
[/codecopy]
Trong nội dung bài viết, chèn đoạn sau:
[code copy]
function hello() {
echo “Xin chào”;
}
[/code copy]
Lưu ý: Chữ code copy đổi thành codecopy thì mới thực hiện được
WordPress sẽ tự hiển thị code và nút “Sao chép” – bạn có thể chèn vào bài viết như bình thường.
Hiển thị trên trang chủ (home, archive)
Đảm bảo rằng theme (ví dụ Soledad) đang dùng the_excerpt() hoặc the_content() trong file home.php, index.php hoặc content.php.
Nếu dùng the_excerpt(), shortcode sẽ không hoạt động
Bạn nên chuyển sang dùng the_content() trong danh sách bài viết để hiển thị đủ nội dung
Hoặc: chèn code vào Trích dẫn (excerpt) thủ công nếu muốn hiển thị ở ngoài trang chủ.
