关于WordPress实现后台编辑器添加自定义字段给内容页调用的方法步骤-宋大江

前言

博主近日需要实现一个功能：该功能为在后台输入一个网盘提取码，前台会员登录后可以使用按钮点击复制功能！

博主从度娘口中搜索到了众多版本的实现步骤，其中最通俗易懂的为使用 ADD_META_BOX 函数和使用主题模板函数 模板函数 functions.php 来实现，奈何博主为多年dede老用户，深知后者只需一个自定义字段即可实现！于是乎本文记录的是历经多番搜寻后找到的实现最简单的实现方法。

一、后台编辑器添加自定义字段

进入后台 文章发布 页面-点击 显示选项 -勾上 自定义字段 如图：

在页面底部 找到自定义字段，填写需要的 字段名称 和 字段值，并添加自定义栏目，如图：

填写合适的文章内容并保存至数据库

二、内容页调用添加自定义字段

在网页文章中显示这些信息，定位到：根目录\wp-content\themes\模板主题名\single.php，（如果是在其他位置，需以本文为参考找到正确的内容页php文件）。然后在内容页里面合适的位置加上一行代码：

<p>点击复制提取码：<?php echo get_post_meta($post->ID, '提取码', true); ?></p>

内容页效果

于是乎此项功能已经完成，接下来实现点击复制按钮的功能了

三、添加点击复制按钮

首先在前台合适位置 建立一个文本+按钮

提取码：<span id="user_ref_id">待复制内容</span>
<input style="margin-left: 20px;" type="button" onclick="cp(document.getElementById('user_ref_id'));" value="点击复制提取码" >

把上面的 待复制的内容 替换成  <?php echo get_post_meta($post->ID, ‘提取码’, true); ?> 

在页面底部</html>前面加入js脚本

<script>  
    function selectText(x) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(x);
            range.select();
        } else if (window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();
            selection.removeAllRanges();
            range.selectNodeContents(x);
            selection.addRange(range);
        }
    }
    function cp(x)
    {
        selectText(x);
        document.execCommand("copy");
        alert("恭喜发财，复制成功！")
    }
</script>  

前台效果

本文为站长亲测无误后发表，转载请注明出处！

至此WordPress后台编辑器添加自定义字段给内容页调用的方法已全部完成，本文由博主边操作边写记录并亲测无误，如您在过程中遇到什么问题，请联系我QQ：726322022  微信：hb6958 （请注明来意）

参考链接：

① https://blog.csdn.net/yumon321/article/details/82227843

② https://blog.csdn.net/halaoda/article/details/81079074