WordPress 站点内容保护：禁用敏感按键与鼠标操作的实战指南

🌐 场景说明

在 WordPress 主题开发中，「一为导航」主题的二次开发者常需要限制普通用户的某些操作（如查看源码、复制内容），以保护站点资源。本文将展示如何通过代码实现这一功能，并适配 WordPress 6.7.2 环境。

📝 核心代码解析

1. PHP 脚本加载逻辑（functions.php）

php

function enqueue_disable_keys_script() {
    $theme_uri = get_stylesheet_directory_uri();
    wp_enqueue_script(
        'disable-keys',
        $theme_uri . '/disable-keys.js',
        array(),
        '1.0',
        true
    );
    
    $current_user = wp_get_current_user();
    $is_admin = $current_user->user_login === '青城资源导航'; // 管理员用户名
    $is_home = is_front_page();
    
    wp_localize_script('disable-keys', 'isAdmin', $is_admin ? 'true' : 'false');
    wp_localize_script('disable-keys', 'isHome', $is_home ? 'true' : 'false');
}
add_action('wp_enqueue_scripts', 'enqueue_disable_keys_script');

• 关键功能：

  • wp_enqueue_script：在页脚加载自定义 JS 脚本

  • wp_localize_script：传递 PHP 变量到 JS 环境

  • 权限判断：仅对非管理员用户生效（!isAdmin）

  • 页面判断：首页不启用禁用规则（!isHome）

2. JavaScript 禁用规则（disable-keys.js）

javascript

document.addEventListener('DOMContentLoaded', function () {
    const isAdmin = window.isAdmin === 'true';
    const isHome = window.isHome === 'true';
    
    if (!isAdmin && !isHome) {
        function isInInput(target) {
            return ['INPUT', 'TEXTAREA'].includes(target.tagName);
        }

        // 禁用开发者工具（F12）
        document.addEventListener('keydown', function (e) {
            if (!isInInput(e.target) && e.keyCode === 123) {
                e.preventDefault();
            }
        }, { capture: true });

        // 禁用右键菜单
        document.addEventListener('contextmenu', function (e) {
            if (!isInInput(e.target)) {
                e.preventDefault();
            }
        });

        // 禁用文本选择
        document.addEventListener('selectstart', function (e) {
            if (!isInInput(e.target)) {
                e.preventDefault();
            }
        });

        // 禁用快捷键组合
        const shortcutMap = [
            { key: 85, desc: 'Ctrl+U' },  // 查看源码
            { key: 80, desc: 'Ctrl+P' },  // 打印
            { key: 65, desc: 'Ctrl+A' },  // 全选
            { key: 67, desc: 'Ctrl+C' },  // 复制
            { key: 88, desc: 'Ctrl+X' },  // 剪切
            { key: 83, desc: 'Ctrl+S' },  // 保存
            { key: 86, desc: 'Ctrl+V' },  // 粘贴
        ];
        shortcutMap.forEach(({ key }) => {
            document.addEventListener('keydown', function (e) {
                if (e.ctrlKey && e.keyCode === key) {
                    e.preventDefault();
                }
            }, { capture: true });
        });
    }
});

• 技术亮点：

  • 事件捕获阶段处理：{ capture: true } 确保事件在冒泡前被拦截

  • 输入框豁免：isInInput 函数排除表单元素的禁用

  • 快捷键映射表：可方便扩展新的禁用规则

🚀 部署步骤

1. 创建 JS 文件

在主题目录下新建 disable-keys.js，粘贴上述 JS 代码。

2. 编辑 functions.php

1. 进入 WordPress 后台 → 外观 → 主题编辑器

2. 找到 functions.php 文件，添加 PHP 代码

3. 替换 '青城资源导航' 为实际管理员用户名

3. 测试验证

• 非管理员用户：在非首页应无法使用禁用功能

• 管理员用户：所有页面功能正常

📸 效果演示

建议截图：展示禁用前后的右键菜单对比（图 1）