WordPress子比主题文章内容密码可见功能美化图文教程

在WordPress网站运营中，我们常常有这样的需求：某些特定内容只希望分享给指定的用户，比如付费资源、内部资料或是私密笔记。虽然WordPress自带的文章密码保护功能很实用，但在视觉呈现上略显单调。今天，主题铺就来分享一个特别的教程，教你如何为WordPress子比主题的文章内容添加一个既美观又实用的密码查看功能。

这个功能通过简码（Shortcode）实现，你可以在文章的任意位置插入一个加密区域。未输入密码的访客会看到一个设计精美的密码输入框，只有输入正确的密码后，隐藏的内容才会优雅地展现出来。据主题铺观察，这种方式不仅提升了网站的专业感，也极大地优化了用户获取加密信息的体验，尤其适合用于发布付费下载链接或会员专属内容。

效果预览

实现步骤

本教程主要针对WordPress子比主题，但其核心逻辑同样适用于其他主题，你只需根据自己主题的CSS类进行适当调整即可。

第一步：添加核心PHP代码

这段代码的作用是创建一个名为[secret] 的简码，用于处理密码验证和内容显示的逻辑。

请将以下PHP代码完整复制，并添加到你子比主题目录下的 functions.php 文件末尾。通常路径为：/wp-content/themes/zibll/functions.php。

/**
 * WordPress子比主题给文章内容添加密码可见功能
 * 主题铺www.zhutipu.com
 */
function e_secret($atts, $content=null){
    extract(shortcode_atts(array('key'=>null), $atts));

    if(isset($_POST['e_secret_key']) && $_POST['e_secret_key']==$key){
        return '<div class="e-secret">' . do_shortcode($content) . '</div>';
    } else {
        return '
        <form class="post-password-form" action="'.get_permalink().'" method="post" name="e-secret">
            <div class="mizhi_boy">
                <div class="mz-bg">
                    <div class="mz-bg-d">
                        <div class="mz-main">
                            <span class="mz-ico">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <rect data-fill="1" data-stroke="1" height="12" rx="1.5" stroke-linecap="round" stroke-linejoin="round" width="14.67" x="5" y="10"></rect>
                                    <path d="M7.667 10V6.667a4.667 4.667 0 1 1 9.333 0V10M12.333 14.667v2.666" data-stroke="1" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </span>
                            <label for="pwbox-142" style="color:#fff;">请输入密码查看加密内容</label> 
                            <div class="relative line-form mb10 mizhi_w">
                                <input type="password" name="e_secret_key" size="20" class="line-form-input" placeholder="文章密码" />
                                <i class="line-form-line"></i>
                            </div>
                            <input type="submit" class="euc-y-s mz-button" value="确定" />
                            <h6><a data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1" href="javascript:;" data-toggle="RefreshModal">怎么获取密码？</a></h6>
                        </div>
                    </div>
                </div>
            </div>
        </form>';
    }
}
add_shortcode('secret','e_secret');

提示：代码中“怎么获取密码？”的链接默认调用了子比主题的私信站长弹窗功能，如果你使用其他主题或有不同需求，可以自行修改该链接。

第二步：添加自定义CSS样式

为了让密码输入框看起来更酷，我们需要添加一些CSS代码来美化它。

请登录你的WordPress后台，进入 子比主题设置 -> 自定义代码 -> 自定义CSS样式，将以下代码粘贴进去并保存。

/* 文章内容加密CSS样式 */
.mizhi_boy {
    margin: 0 auto;
    padding-bottom: 2em;
}
.mizhi_boy .mz-bg {
    height: 300px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://p9.qhimg.com/bdr/__85/t016fdb7fe821d106c1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 8px;
    cursor: pointer;
}
.mizhi_boy .mz-bg-d {
    height: 100%;
    align-items: center;
    place-content: flex-start space-around;
    display: flex;
}
.mizhi_boy .mz-main {
    text-align: center;
    width: 100%;
}
.mizhi_boy .mz-ico, .mizhi_boy .mz-ico svg {
    height: 4rem;
    width: 4rem;
}
.mizhi_boy .mz-ico {
    display: flex;
    margin: 0 auto;
    opacity: 0.8;
}
.mizhi_boy .mz-ico svg {
    align-self: center;
    fill: transparent;
    stroke-width: 1.2px;
}
.mizhi_boy .mz-ico svg [data-stroke] {
    stroke: rgb(255, 255, 255);
}
.mizhi_boy .mz-button {
    width: 80px;
    margin: 1rem;
    border-radius: 10px;
    font-weight: 700 !important;
    border: 1px solid rgb(255, 255, 255);
    padding: 0.46875rem 1rem;
    color: #fff !important;
    background-color: transparent;
}
.mizhi_boy .mz-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.mizhi_w {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
@media screen and (max-width: 980px) {
    .mizhi_w {
        width: 80%;
    }
}

自定义提示：如果你想更换背景图片，只需在上述CSS代码中找到 background-image 属性，将其中的图片URL替换为你自己的图片链接即可。

第三步：在文章中使用简码

现在，一切准备就绪！当你在编辑文章时，只需切换到代码编辑器，或者在古腾堡编辑器中添加一个“简码”或“自定义HTML”区块，然后插入以下格式的代码：

[secret key="123456"]这里是需要输入密码后才能看到的加密内容。[/secret]

• key=”123456″：这里的 123456 就是你为这部分内容设置的访问密码，你可以随意修改。
• 中间的内容：这部分就是被加密的区域，可以是文字、图片、下载链接等任何你想要隐藏的内容。

通过这简单的三步，你就为你的网站增添了一个既安全又极具个性的功能。主题铺认为，这种对细节的打磨，正是提升网站品质、留住用户的关键所在。快去试试吧！