在 WordPress 评论内增加私密评论

棕耳兔更新于308天前WordPress290 热度3 条评论阅读约5分钟

扫一扫手机看

在运营个人博客的过程中，我们时常会遇到这样的场景：读者在评论区提问隐私相关问题，或者博主想针对特定评论者回复私密内容，却不想让其他访客看到。今天就给大家分享一个实用的 WordPress 功能开发 —— 给评论添加 “私密内容” 模块，让指定内容仅评论发布者和站点管理员可见，既保护隐私，又提升评论互动的灵活性。

效果预览

功能核心效果

启用该功能后，评论区会新增一个 “私密评论” 开关按钮：

勾选开关后，评论内容会自动被private短代码包裹，提交后仅评论作者和管理员能看到完整内容；
未勾选或非权限用户查看时，会显示“此内容仅评论双方可见”的提示文字；
开关样式采用渐变滑块设计，交互体验更友好。

功能实现步骤

第一步：添加 PHP 核心逻辑（functions.php）

首先将以下代码添加到主题的functions.php文件中，实现短代码解析和权限判断核心功能：


function wp_private_comment_shortcode($atts, $content = null) {
    if (empty($content)) {
        return '';
    }

    $comment = get_comment();
    if (!$comment || !is_object($comment) || empty($comment->comment_ID)) {
        return '';
    }

    $current_user = wp_get_current_user();
    
    $is_admin = current_user_can('manage_options');
    $is_owner = $current_user->ID == $comment->user_id;

    if ($is_admin || $is_owner) {
        return wpautop($content);
    } else {
        return '<p class="private-comment-hint">此内容仅评论双方可见</p>';
    }
}
add_shortcode('private', 'wp_private_comment_shortcode');

function wp_parse_shortcodes_in_comments($comment_text) {
    if (!is_admin()) {
        $comment_text = do_shortcode($comment_text);
    }
    return $comment_text;
}
add_filter('comment_text', 'wp_parse_shortcodes_in_comments');
add_filter('comment_text_rss', 'wp_parse_shortcodes_in_comments');
add_filter('comment_excerpt', 'wp_parse_shortcodes_in_comments');

function wp_allow_shortcodes_in_comments($data) {
    if (!is_admin() && isset($data&#91;'comment_content'&#93;)) {
        $data&#91;'comment_content'&#93; = htmlspecialchars_decode($data&#91;'comment_content'&#93;);
    }
    return $data;
}
add_filter('preprocess_comment', 'wp_allow_shortcodes_in_comments');

代码说明：

wp_private_comment_shortcode：核心短代码函数，判断当前用户是否为评论作者或管理员，是则显示完整内容，否则显示提示语；
wp_parse_shortcodes_in_comments：让评论内容支持短代码解析；
wp_allow_shortcodes_in_comments：处理评论内容的 HTML 转义，确保短代码正常生效。

第二步：添加交互 JS 代码

在主题的 JS 文件（如custom.js）中添加以下代码，实现开关按钮与评论内容的联动：


jQuery(document).ready(function($) {
    const shortcodeOpen = '&#91;private&#93; ';
    const shortcodeClose = ' &#91;/private&#93;';
    const $commentBox = $('#comment');
    const $privateCheckbox = $('#private-comment');
    const $sliderWrap = $privateCheckbox.prev('.slider-wrap');
    const $hoverTip = $privateCheckbox.next('.hover-tip');
    $privateCheckbox.on('change', function() {
        let content = $commentBox.val().trim();
        if (this.checked) {
            if (!content.startsWith(shortcodeOpen) || !content.endsWith(shortcodeClose)) {
                $commentBox.val(shortcodeOpen + content + shortcodeClose)
            }
            $sliderWrap.addClass('active')
        } else {
            if (content.startsWith(shortcodeOpen) && content.endsWith(shortcodeClose)) {
                content = content.substring(shortcodeOpen.length, content.length - shortcodeClose.length);
                $commentBox.val(content)
            }
            $sliderWrap.removeClass('active')
        }
    });
    const $sliderLabel = $('.private-comment-label');
    $sliderLabel.hover(function() {
        $hoverTip.show();
        const tipWidth = $hoverTip.outerWidth();
        const labelLeft = $sliderLabel.offset().left;
        const windowWidth = $(window).width();
        if (labelLeft + tipWidth / 2 > windowWidth) {
            $hoverTip.css({
                left: 'auto',
                right: 0
            })
        }
    }, function() {
        $hoverTip.hide()
    });
    $('#commentform').on('submit', function() {
        if (!$privateCheckbox.is(':checked')) {
            let content = $commentBox.val().trim();
            if (content.startsWith(shortcodeOpen) && content.endsWith(shortcodeClose)) {
                content = content.substring(shortcodeOpen.length, content.length - shortcodeClose.length);
                $commentBox.val(content)
            }
        }
    })
});

代码说明：

监听私密评论开关的勾选状态，勾选时自动给评论内容包裹private短代码，取消勾选时移除；
处理开关 hover 提示的位置适配，避免超出窗口；
提交评论时二次校验，确保未勾选状态下短代码被移除。

第三步：添加样式 CSS 代码

在主题的 CSS 文件（如style.css）中添加以下样式，美化私密评论开关的显示效果，不同主题需要自行修改适配：


/* 评论 · 隐私评论滑块 · 浅色 */
.comment-frame .comment-post .private-comment-label {
	cursor: pointer;
	font-size: 12px;
	color: #666;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	position: relative
}

.comment-frame .comment-post .slider-wrap {
	width: 108px;
	height: 38px;
	background: #eee;
	border-radius: .25rem;
	position: relative;
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	display: flex;
	align-items: center;
	padding: 0;
	box-sizing: border-box;
	border: 2px solid #d8dae2;
	overflow: hidden;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.05)
}

.comment-frame .comment-post .slider-btn {
	position: absolute;
	top: 50%;
	left: 0!important;
	transform: translateY(-50%);
	width: 36px;
	height: 34px;
	background: #fff;
	border-radius: 10%;
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
	z-index: 2;
	border: 1px solid #e0e6ff
}

.comment-frame .comment-post .slider-text-active,.comment-frame .comment-post .slider-text-inactive {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: .85rem;
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	z-index: 1;
	white-space: nowrap;
	font-weight: 500;
	opacity: 0
}

.comment-frame .comment-post .slider-text-inactive {
	left: 40px;
	color: #86909c;
	opacity: 1
}

.comment-frame .comment-post .slider-text-active {
	right: 40px;
	color: #fff
}

.comment-frame .comment-post .slider-wrap.active .slider-btn {
	left: 70px!important;
	transform: translateY(-50%) scale(1.05);
	box-shadow: 0 3px 8px rgba(64,158,255,.25)
}

.comment-frame .comment-post .slider-wrap.active .slider-text-inactive {
	opacity: 0
}

.comment-frame .comment-post .slider-wrap.active .slider-text-active {
	opacity: 1
}

.comment-frame .comment-post .slider-wrap.active .slider-gradient {
	opacity: 1
}

.comment-frame .comment-post .slider-gradient {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,#409eff,#66b1ff);
	opacity: 0;
	transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
	z-index: 0
}

.comment-frame .comment-post #private-comment {
	display: none
}

如有深色模式适配需要，可添加以下样式到主题的 CSS 文件（如dark.css）


/* 评论 · 隐私评论滑块 · 深色 */
.dark .comment-frame .comment-post .slider-wrap {
	background: #2d2d30;
	border-color: #424247;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.2)
}

.dark .comment-frame .comment-post .slider-btn {
	background: #3f3f46;
	border-color: #535359;
	box-shadow: 0 2px 6px rgba(0,0,0,.25)
}

.dark .comment-frame .comment-post .slider-text-inactive {
	color: #a1a1aa
}

.dark .comment-frame .comment-post .slider-text-active {
	color: #e4e4e7
}

.dark .comment-frame .comment-post .slider-wrap.active .slider-btn {
	box-shadow: 0 3px 8px rgba(80,180,255,.35)
}

.dark .comment-frame .comment-post .slider-gradient {
	background: linear-gradient(90deg,#3685d8,#5599e6)
}

第四步：添加评论区开关 HTML

最后，在主题的评论表单模板（通常是comments.php）中，找到评论输入框附近的位置，添加以下 HTML 代码，显示私密评论开关：


<label for="private-comment" class="private-comment-label">
	<span class="slider-wrap">
		<span class="slider-btn"></span>
		<span class="slider-text-inactive">隐私评论</span>
		<span class="slider-text-active">隐私评论</span>
		<span class="slider-gradient"></span>
	</span>
	<input type="checkbox" id="private-comment" />
</label>