博客 / WordPress/ WordPress 实现用户登录后显示隐藏内容的完整指南

WordPress 实现用户登录后显示隐藏内容的完整指南

WordPress 实现用户登录后显示隐藏内容的完整指南

一、创建登录保护短代码

在 WordPress 中,可以通过创建一个自定义短代码来实现“仅登录用户可见”的功能。将以下代码添加到您主题的 functions.php 文件中,或通过代码片段插件添加。

/**
 * WordPress 短代码:仅限登录用户查看内容
 * @param array $atts 短代码属性
 * @param string|null $content 短代码包裹的内容
 * @return string 返回给用户的内容
 */
function wp_members_only_shortcode( $atts, $content = null ) {
    // 检查用户是否已登录、内容非空且非Feed输出
    if ( is_user_logged_in() && ! empty( $content ) && ! is_feed() ) {
        return do_shortcode( $content ); // 返回并解析内部短代码
    }
    // 未登录用户看到的消息
    return __( '此内容仅对登录用户开放,请登录后查看。', 'your-text-domain' );
}
add_shortcode( 'members_only', 'wp_members_only_shortcode' );

二、使用短代码隐藏内容

创建文章或页面时,在需要隐藏的内容前后使用短代码标签。

[members_only]
这里是仅限登录用户查看的隐藏内容,可以包含文本、图片、链接等。
[/members_only]

效果:

  • 已登录用户:将正常看到包裹的内容。
  • 未登录用户/访客:将看到预设的提示信息:“此内容仅对登录用户开放,请登录后查看。”

三、在文本编辑器中添加短代码按钮

为了方便在经典编辑器(文本模式)中插入短代码,可以添加一个自定义按钮。

方法:通过 functions.php 添加 TinyMCE 按钮

将以下代码添加到主题的 functions.php 文件中:

/**
 * 在经典编辑器(文本模式)工具栏添加自定义短代码按钮
 */
function add_members_only_shortcode_button() {
    // 检查用户权限和当前编辑器页面
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( get_user_option( 'rich_editing' ) == 'true' ) {
        add_filter( 'mce_external_plugins', 'add_members_only_tinymce_plugin' );
        add_filter( 'mce_buttons', 'register_members_only_button' );
    }
}
add_action( 'admin_init', 'add_members_only_shortcode_button' );

// 注册TinyMCE插件脚本
function add_members_only_tinymce_plugin( $plugin_array ) {
    $plugin_array['members_only_shortcode'] = get_template_directory_uri() . '/js/tinymce-shortcode.js'; // 请根据实际路径调整
    return $plugin_array;
}

// 在工具栏注册按钮
function register_members_only_button( $buttons ) {
    array_push( $buttons, 'members_only_shortcode' );
    return $buttons;
}

创建 TinyMCE 按钮的 JavaScript 文件

在您的主题目录下(例如 /js/)创建 tinymce-shortcode.js 文件,并添加以下内容:

(function() {
    tinymce.PluginManager.add( 'members_only_shortcode', function( editor, url ) {
        editor.addButton( 'members_only_shortcode', {
            title: '插入仅登录可见内容',
            icon: 'icon lock', // 或使用 'dashicon-lock' 等CSS类
            onclick: function() {
                // 在光标处插入短代码
                editor.insertContent( '[members_only]n在此处插入仅登录用户可见的内容。n[/members_only]' );
            }
        });
    });
})();

说明:此方法适用于 WordPress 经典编辑器。对于古腾堡区块编辑器,建议创建自定义区块来实现相同功能,体验更佳。

四、进阶优化与注意事项

  • 安全性:此短代码仅控制前端显示,不保护附件或通过直接URL访问的文件。
  • 缓存兼容性:如果网站使用了全页缓存(如 WP Rocket, W3 Total Cache),此功能可能失效,因为缓存页面对所有用户显示相同内容。需配合缓存插件的“按用户角色排除缓存”功能使用。
  • 提示信息定制:可以通过短代码属性自定义提示语,例如:[members_only message="请登录后查看完整教程"],并在函数中解析 $atts['message']
  • 古腾堡区块:对于现代 WordPress 编辑体验,建议开发一个自定义“会员内容”区块,提供更直观的编辑界面。

发表评论

您的邮箱不会公开。必填项已用 * 标注。