WordPress强化:实现网站一键复制 详细教程

演示效果

自定义占位符图片

详细教程

首先,在WordPress主题的<head>部分引入clipboard.js库。将以下代码添加到header.php文件中:

<!-- 引入 clipboard.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

在WordPress主题中创建一个短代码,用于显示带有复制按钮的文本。在functions.php文件中添加以下代码:

此内容查看价格为5积分(VIP免费),请先
关注微信公众号“ds17wp”不迷路

这段代码定义了一个名为[copy_to_clipboard]的短代码,它将显示一个带有复制按钮的文本输入框。

在WordPress主题的<script>标签或外部JavaScript文件中添加以下代码以初始化clipboard.js

document.addEventListener('DOMContentLoaded', function() {
    // 初始化 clipboard.js
    const clipboard = new Clipboard('.clipboard-btn');

    // 监听复制成功事件
    clipboard.on('success', function(e) {
        alert('已复制到剪贴板: ' + e.text);
        e.clearSelection();
    });

    // 监听复制失败事件
    clipboard.on('error', function(e) {
        alert('无法复制到剪贴板,请手动复制文本: ' + e.text);
    });
});

这段代码将在页面加载完成后初始化clipboard.js,并监听复制成功和失败的事件。

现在,您可以在WordPress文章或页面中使用[copy_to_clipboard]短代码来实现一键复制功能。例如:

[copy_to_clipboard]这是要复制的文本[/copy_to_clipboard]

为了在复制成功后显示提示,我们可以使用alert()函数弹出一个提示框。以下是修改后的JavaScript代码,实现了在复制成功后显示提示的功能:

document.addEventListener('DOMContentLoaded', function() {
    // 初始化 clipboard.js
    const clipboard = new Clipboard('.clipboard-btn');

    // 监听复制成功事件
    clipboard.on('success', function(e) {
        alert('已复制到剪贴板: ' + e.text); // 显示复制成功的提示
        e.clearSelection();
    });

    // 监听复制失败事件
    clipboard.on('error', function(e) {
        alert('无法复制到剪贴板,请手动复制文本: ' + e.text); // 显示复制失败的提示
    });
});

为了美化输入框和按钮,您可以使用CSS来定义它们的样式。以下是一个简单的示例,展示如何为输入框和按钮添加样式:

/* 美化输入框 */
.copy-container input {
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
}

/* 美化按钮 */
.clipboard-btn {
    padding: 10px 15px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 鼠标悬停在按钮上时的效果 */
.clipboard-btn:hover {
    background-color: #0056b3;
}

/* 按钮被点击时的效果 */
.clipboard-btn:active {
    transform: scale(0.98);
}

最后注意:输入框和按钮之间的距离,加空格就能实现

尊重版权丨本站注明原创的插件,购买者不得随意分享传播,仅限个人使用,一旦发现拉黑用户,删除使用权限。大神建站-WordPress插件开发 » WordPress强化:实现网站一键复制 详细教程

相关文章

评论 (0)