WordPress復(fù)制框3秒自動(dòng)關(guān)閉功能實(shí)現(xiàn)方法

來(lái)自：素雅營(yíng)銷研究院

方知筆記

2025年06月27日 23:44

在WordPress網(wǎng)站開(kāi)發(fā)中，有時(shí)我們需要為用戶提供一些可復(fù)制的代碼片段或文本內(nèi)容，但又不希望復(fù)制框一直顯示在頁(yè)面上影響用戶體驗(yàn)。本文將介紹如何實(shí)現(xiàn)WordPress復(fù)制框3秒后自動(dòng)關(guān)閉的功能。

實(shí)現(xiàn)原理

這個(gè)功能主要通過(guò)以下技術(shù)實(shí)現(xiàn)：

使用JavaScript的setTimeout函數(shù)設(shè)置3秒的定時(shí)器
結(jié)合WordPress的短代碼功能或直接在主題文件中添加代碼
利用CSS實(shí)現(xiàn)復(fù)制框的顯示/隱藏動(dòng)畫效果

具體實(shí)現(xiàn)步驟

方法一：通過(guò)短代碼實(shí)現(xiàn)

在主題的functions.php文件中添加以下代碼：

function auto_close_copy_box($atts, $content = null) {
$content = do_shortcode($content);
return '<div class="copy-box" onclick="copyToClipboard(this)">'.$content.'</div>';
}
add_shortcode('copybox', 'auto_close_copy_box');

function add_copy_script() {
echo '<script>
function copyToClipboard(element) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();

setTimeout(function(){
element.style.display = "none";
}, 3000);
}
</script>';
}
add_action('wp_footer', 'add_copy_script');

在文章中使用短代碼：

[copybox]這里是要復(fù)制的內(nèi)容[/copybox]

方法二：通過(guò)插件實(shí)現(xiàn)

安裝并激活”WP Copy & Share”或類似插件
在插件設(shè)置中啟用”自動(dòng)關(guān)閉”選項(xiàng)
設(shè)置關(guān)閉延遲時(shí)間為3000毫秒(3秒)

CSS樣式優(yōu)化

為了讓復(fù)制框的顯示/隱藏更加平滑，可以添加以下CSS樣式：

.copy-box {
padding: 10px;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: opacity 0.3s ease;
}

.copy-box:hover {
background: #e9e9e9;
}