{ "version": "https://jsonfeed.org/version/1", "title": "Frankelin Docs & Blog Blog", "home_page_url": "https://frankelinli.github.io/blog", "description": "Frankelin Docs & Blog Blog", "items": [ { "id": "https://frankelinli.github.io/blog/sticky粘性", "content_html": "

1️⃣ 使用 CSS position: sticky​

\n

现代浏览器都支持 position: sticky，基本用法：

\n
.docs-sidebar {
    position: sticky;
    top: 20px; /* 距离顶部 20px */
}
\n

解释：​

\n\n

2️⃣ 保证父容器高度足够​

\n\n

关键点：​

\n
提示
    \n
  1. position: sticky 的粘性只在父元素范围内生效\n
      \n
    • 也就是说 <aside class=\"docs-sidebar\"> 只能在它的直接或间接父元素（这里是 .ast-container）内“粘住”
      • \n
    • 一旦滚动超出了父元素的底部，它就不再固定，而是跟随父元素自然停止
      • \n
    \n
    2. \n
  2. 为什么会这样\n
      \n
    • sticky 并不是固定在整个窗口，而是“相对父容器的相对定位”
      • \n
    • 父容器边界就是它的限制范围
      • \n
    \n
    3. \n
", "url": "https://frankelinli.github.io/blog/sticky粘性", "title": "sticky粘性", "summary": "1️⃣ 使用 CSS position: sticky", "date_modified": "2025-09-11T22:44:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/WordPress自带JQuery，不需要自己额外加载", "content_html": "

WordPress 核心已经自带了 jQuery，您不需要在子主题中专门 enqueue jQuery。

\n

具体来说：

\n
    \n
  1. WordPress 自带的 jQuery 文件位于：
    2. \n
\n
wp-includes/js/jquery/jquery.js
\n
    \n
  1. WordPress 自动注册了以下 jQuery 相关的脚本：
    2. \n
\n\n
    \n
  1. 很多 WordPress 核心功能依赖 jQuery，所以它会自动加载。
    2. \n
\n

如果您要在子主题中写 jQuery 代码，只需要这样：

\n
// functions.php 中添加自己的 JS 文件
function my_theme_scripts() {
    wp_enqueue_script('my-custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
\n

然后在 custom.js 中直接使用 jQuery 即可：

\n
jQuery(document).ready(function($) {
    // 您的代码
});
\n

不需要这样做：

\n
// ❌ 不需要这样
wp_enqueue_script('jquery');  // 不需要，WordPress 已经加载了
\n

小提示：

\n\n
wp_enqueue_script('my-custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
", "url": "https://frankelinli.github.io/blog/WordPress自带JQuery，不需要自己额外加载", "title": "WordPress自带JQuery，不需要自己额外加载", "summary": "WordPress 核心已经自带了 jQuery，您不需要在子主题中专门 enqueue jQuery。", "date_modified": "2024-12-25T18:17:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/JQuery减轻心智负担，更容易阅读和理解代码", "content_html": "

JQuery减轻心智负担，更容易阅读和理解代码.

\n

对很多开发者来说，jQuery的代码更容易阅读和理解。这里有几个原因：

\n
    \n
  1. \n

    jQuery语法更直观

    \n\n
    2. \n
  2. \n

    链式操作更优雅

    \n
    // jQuery
    $('.element').hide().addClass('hidden').text('新内容');

    // 原生JS
    const element = document.querySelector('.element');
    element.style.display = 'none';
    element.classList.add('hidden');
    element.textContent = '新内容';
    \n
    3. \n
\n

jQuery 的选择器语法统一且直观，这种一致性确实能减轻心智负担：

\n
// jQuery 选择器，直观清晰
$('.announcement-bar')    // 类
$('#header')             // ID
$('div')                 // 标签
$('[data-type=\"news\"]')  // 属性
$('ul li:first')         // 第一个li
$('p:contains(\"Hello\")') // 包含文本的p标签

// 原生 JavaScript 要记很多不同的方法
document.querySelector('.announcement-bar')
document.getElementById('header')
document.getElementsByTagName('div')
document.querySelector('[data-type=\"news\"]')
document.querySelector('ul li:first-child')
// 包含文本还得自己写判断...
\n

jQuery 的选择器语法统一且直观，这种一致性确实能减轻心智负担：

\n\n

这就是为什么即便在现代前端开发中，很多人仍然喜欢用 jQuery 的原因之一 - 它让代码更易写易读！

", "url": "https://frankelinli.github.io/blog/JQuery减轻心智负担，更容易阅读和理解代码", "title": "JQuery减轻心智负担，更容易阅读和理解代码", "summary": "JQuery减轻心智负担，更容易阅读和理解代码.", "date_modified": "2024-12-25T17:53:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/CSS伪元素经典应用案例2", "content_html": "

我来展示几个实用且常见的伪元素应用案例：

\n
    \n
  1. 必填表单标记：用于标记必填字段
    2. \n
  2. 外部链接标识：区分外部链接和内部链接
    3. \n
  3. 引用样式：美化引用内容
    4. \n
  4. 文件类型标识：根据文件类型显示不同图标
    5. \n
  5. 步骤指引：自动编号的步骤指示器
    6. \n
  6. 工具提示：无需JavaScript的简单提示框
    7. \n
\n

\"image-20241223125504548\"

\n

\"image-20241223125515957\"

\n
实时编辑器
<!DOCTYPE html>\n<html>\n<head>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n            padding: 2rem;\n            background: #f5f7fa;\n            line-height: 1.6;\n        }\n\n        .demo {\n            margin: 2rem auto;\n            max-width: 600px;\n            background: white;\n            padding: 2rem;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n\n        /* 1. 必填表单标记 */\n        .form-group {\n            margin-bottom: 1rem;\n        }\n        .required-field::after {\n            content: '*';\n            color: #e53e3e;\n            margin-left: 4px;\n        }\n        .input {\n            width: 100%;\n            padding: 0.5rem;\n            border: 1px solid #e2e8f0;\n            border-radius: 4px;\n            margin-top: 0.5rem;\n        }\n\n        /* 2. 外部链接标识 */\n        .external-link {\n            color: #4a5568;\n            text-decoration: none;\n        }\n        .external-link::after {\n            content: '↗';\n            margin-left: 4px;\n            font-size: 0.9em;\n            color: #718096;\n        }\n\n        /* 3. 引用样式 */\n        .quote {\n            position: relative;\n            padding: 1.5rem;\n            background: #f7fafc;\n            border-radius: 8px;\n        }\n        .quote::before {\n            content: '\"';\n            position: absolute;\n            top: -0.5rem;\n            left: 1rem;\n            font-size: 4rem;\n            color: #cbd5e0;\n            font-family: Georgia, serif;\n            line-height: 1;\n        }\n\n        /* 4. 文件类型标识 */\n        .file-link {\n            display: inline-block;\n            padding: 0.5rem 1rem;\n            text-decoration: none;\n            color: #4a5568;\n            background: #edf2f7;\n            border-radius: 4px;\n        }\n        .file-link[data-type]::before {\n            margin-right: 8px;\n            font-weight: bold;\n        }\n        .file-link[data-type=\"pdf\"]::before {\n            content: '[PDF]';\n            color: #e53e3e;\n        }\n        .file-link[data-type=\"doc\"]::before {\n            content: '[DOC]';\n            color: #2b6cb0;\n        }\n\n        /* 5. 步骤指引 */\n        .steps {\n            counter-reset: step;\n        }\n        .step {\n            position: relative;\n            padding-left: 3rem;\n            margin-bottom: 1.5rem;\n        }\n        .step::before {\n            counter-increment: step;\n            content: counter(step);\n            position: absolute;\n            left: 0;\n            width: 2rem;\n            height: 2rem;\n            background: #4299e1;\n            color: white;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: bold;\n        }\n        .step::after {\n            content: '';\n            position: absolute;\n            left: 1rem;\n            top: 2.5rem;\n            bottom: -1.5rem;\n            width: 2px;\n            background: #e2e8f0;\n        }\n        .step:last-child::after {\n            display: none;\n        }\n\n        /* 6. 工具提示 */\n        .tooltip {\n            position: relative;\n            display: inline-block;\n            border-bottom: 1px dotted #4a5568;\n            cursor: help;\n        }\n        .tooltip::before {\n            content: attr(data-tip);\n            position: absolute;\n            bottom: 100%;\n            left: 50%;\n            transform: translateX(-50%) translateY(-8px);\n            padding: 0.5rem 1rem;\n            background: #2d3748;\n            color: white;\n            font-size: 0.875rem;\n            border-radius: 4px;\n            white-space: nowrap;\n            visibility: hidden;\n            opacity: 0;\n            transition: 0.3s ease;\n        }\n        .tooltip:hover::before {\n            visibility: visible;\n            opacity: 1;\n            transform: translateX(-50%) translateY(-4px);\n        }\n    </style>\n</head>\n<body>\n    <!-- 1. 必填表单 -->\n    <div class=\"demo\">\n        <div class=\"form-group\">\n            <label class=\"required-field\">用户名</label>\n            <input type=\"text\" class=\"input\">\n        </div>\n        <div class=\"form-group\">\n            <label class=\"required-field\">密码</label>\n            <input type=\"password\" class=\"input\">\n        </div>\n    </div>\n\n    <!-- 2. 外部链接 -->\n    <div class=\"demo\">\n        <a href=\"#\" class=\"external-link\">访问 GitHub</a><br>\n        <a href=\"#\" class=\"external-link\">查看文档</a>\n    </div>\n\n    <!-- 3. 引用样式 -->\n    <div class=\"demo\">\n        <div class=\"quote\">\n            生活中最重要的不是所处的位置，而是所朝的方向。\n        </div>\n    </div>\n\n    <!-- 4. 文件类型标识 -->\n    <div class=\"demo\">\n        <a href=\"#\" class=\"file-link\" data-type=\"pdf\">产品说明书.pdf</a><br>\n        <a href=\"#\" class=\"file-link\" data-type=\"doc\">使用手册.doc</a>\n    </div>\n\n    <!-- 5. 步骤指引 -->\n    <div class=\"demo\">\n        <div class=\"steps\">\n            <div class=\"step\">注册账号</div>\n            <div class=\"step\">完善信息</div>\n            <div class=\"step\">开始使用</div>\n        </div>\n    </div>\n\n    <!-- 6. 工具提示 -->\n    <div class=\"demo\">\n        <span class=\"tooltip\" data-tip=\"这是一个帮助提示\">hover我查看提示</span>\n    </div>\n</body>\n</html>\n
结果
Loading...
\n

这些都是实际开发中非常常用的案例：

\n
    \n
  1. 必填表单标记：用于标记必填字段
    2. \n
  2. 外部链接标识：区分外部链接和内部链接
    3. \n
  3. 引用样式：美化引用内容
    4. \n
  4. 文件类型标识：根据文件类型显示不同图标
    5. \n
  5. 步骤指引：自动编号的步骤指示器
    6. \n
  6. 工具提示：无需JavaScript的简单提示框
    7. \n
\n

这些效果的特点是：

\n\n

需要我详细解释某个效果的实现原理吗？

", "url": "https://frankelinli.github.io/blog/CSS伪元素经典应用案例2", "title": "CSS伪元素经典应用案例2", "summary": "我来展示几个实用且常见的伪元素应用案例：", "date_modified": "2024-12-23T12:46:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/精美的CSS伪元素制作价格标签页", "content_html": "

这里是一个实用的价格卡片设计示例，包含多个精美的伪元素效果。价格标签是伪元素应用的经典案例。

\n

\"image-20241223124218808\"

\n
<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f5f7fa;
            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem;
            max-width: 1200px;
            width: 100%;
        }

        .card {
            position: relative;
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        /* 1. 精美的价格标签 */
        .price {
            position: relative;
            font-size: 1.5rem;
            color: #2d3748;
            font-weight: bold;
        }

        .price::before {
            content: '¥';
            font-size: 1rem;
            position: relative;
            top: -0.5rem;
            margin-right: 0.2rem;
        }

        .price::after {
            content: '/月';
            font-size: 0.9rem;
            color: #718096;
            margin-left: 0.2rem;
        }

        /* 2. 优雅的链接下划线 */
        .fancy-link {
            position: relative;
            color: #4a5568;
            text-decoration: none;
            font-weight: 500;
        }

        .fancy-link::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -2px;
            left: 0;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        .fancy-link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        /* 3. 高级特性标记 */
        .feature {
            position: relative;
            padding-left: 1.5rem;
            margin: 0.8rem 0;
            color: #4a5568;
        }

        .feature::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 50%;
            opacity: 0.2;
        }

        .feature::after {
            content: '✓';
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            color: #4a5568;
            font-size: 0.8rem;
        }

        /* 4. 热门标签 */
        .popular {
            position: relative;
            overflow: hidden;
        }

        .popular::before {
            content: 'HOT';
            position: absolute;
            top: 20px;
            right: -24px;
            background: #ed64a6;
            color: white;
            padding: 4px 30px;
            font-size: 0.75rem;
            transform: rotate(45deg);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 5. 分割线 */
        .divider {
            position: relative;
            margin: 1.5rem 0;
            height: 1px;
        }

        .divider::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent,
                rgba(0,0,0,0.1) 50%,
                transparent
            );
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background: linear-gradient(90deg, #667eea, #764ba2);
            color: white;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            transition: transform 0.2s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

    </style>
</head>
<body>
    <div class=\"container\">
        <div class=\"card\">
            <div class=\"price\">199</div>
            <div class=\"divider\"></div>
            <div class=\"feature\">无限存储空间</div>
            <div class=\"feature\">实时多端同步</div>
            <div class=\"feature\">个性化定制</div>
            <div class=\"divider\"></div>
            <a href=\"#\" class=\"fancy-link\">查看详情</a>
        </div>

        <div class=\"card popular\">
            <div class=\"price\">299</div>
            <div class=\"divider\"></div>
            <div class=\"feature\">企业级支持</div>
            <div class=\"feature\">高级数据分析</div>
            <div class=\"feature\">专属客服服务</div>
            <div class=\"feature\">优先级解决问题</div>
            <div class=\"divider\"></div>
            <a href=\"#\" class=\"btn\">立即购买</a>
        </div>
    </div>
</body>
</html>
\n

这个示例展示了5个实用的伪元素应用：

\n
    \n
  1. 价格标签：使用::before和::after添加货币符号和时间单位
    2. \n
  2. 链接特效：渐变色下划线动画
    3. \n
  3. 特性列表：用伪元素创建优雅的复选标记
    4. \n
  4. 热门标签：角标设计
    5. \n
  5. 分割线：渐变分隔符
    6. \n
\n

这些效果都是实际开发中常用的，可以直接应用到实际项目中。

", "url": "https://frankelinli.github.io/blog/精美的CSS伪元素制作价格标签页", "title": "精美的CSS伪元素制作价格标签页", "summary": "这里是一个实用的价格卡片设计示例，包含多个精美的伪元素效果。价格标签是伪元素应用的经典案例。", "date_modified": "2024-12-23T12:39:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/CSS伪元素", "content_html": "

CSS伪元素并没有真正生成HTML元素，它们只是在视觉呈现层面上的效果。

\n

关键区别：

\n
    \n
  1. 用JavaScript获取DOM时，无法直接获取到伪元素
    2. \n
  2. 伪元素不会出现在HTML结构中
    3. \n
  3. 伪元素不会影响文档的语义结构
    4. \n
  4. 不能给伪元素绑定事件监听器
    5. \n
\n

举个例子：

\n
<div class=\"box\">你好</div>
\n
.box::after {
  content: \"世界\";
}
\n

虽然页面上会显示\"你好世界\"，但：

\n\n

所以更准确地说，伪元素是CSS提供的一种视觉效果机制，而不是真正的DOM元素。这也是为什么叫\"伪\"元素。

", "url": "https://frankelinli.github.io/blog/CSS伪元素", "title": "CSS伪元素解释", "summary": "CSS伪元素并没有真正生成HTML元素，它们只是在视觉呈现层面上的效果。", "date_modified": "2024-12-23T11:17:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/astra header页眉下划线动画", "content_html": "

对于Astra主题头部菜单导航的hover下划线动画效果，CSS伪元素即可实现：

\n

CSS代码：​

\n

.main-header-menu a {
    position: relative;
}

.main-header-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.2s ease-out;
    opacity: 1;
}

.main-header-menu a:hover::after {
    width: 100%;
}

\n

position: relative不可以去掉​

\n

.main-header-menu a { position: relative; }

\n

不可以去掉。position: relative 是必需的，因为它建立了一个定位上下文，是下划线动画正常工作的关键。

\n

原因是：

\n
    \n
  1. ::after 伪元素使用了 position: absolute
    2. \n
  2. 没有 position: relative 的父元素，绝对定位的下划线将相对于最近的已定位祖先元素定位
    3. \n
  3. 这可能导致下划线出现在错误的位置
    4. \n
\n

使用currentColor​

\n

使用currentColor，这样下划线颜色会自动跟随Astra主题设置的菜单颜色

", "url": "https://frankelinli.github.io/blog/astra header页眉下划线动画", "title": "astra header页眉下划线动画", "summary": "对于Astra主题头部菜单导航的hover下划线动画效果，CSS伪元素即可实现：", "date_modified": "2024-12-22T12:56:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/WordPress管理后台设置里添加维护模式开关", "content_html": "\n


// 添加维护模式功能
function csrwiki_maintenance_mode() {
    // 添加设置菜单 - 放到\"设置\"下
    add_action('admin_menu', function() {
        add_options_page(
            '维护模式设置', 
            '维护模式', 
            'manage_options', 
            'maintenance-settings', 
            'csrwiki_maintenance_settings_page'
        );
    });

    // 注册设置
    add_action('admin_init', function() {
        register_setting('maintenance-settings-group', 'maintenance_mode_active');
    });

    // 在wp加载早期检查维护模式
    add_action('wp', 'csrwiki_check_maintenance_mode');
}
// 检查维护模式状态
function csrwiki_check_maintenance_mode() {
    // 如果维护模式已启用且当前用户不是管理员
    if (get_option('maintenance_mode_active') && !current_user_can('manage_options')) {
        // 确保不是wp-admin页面
        if (!is_admin() && !wp_doing_ajax()) {
            wp_die(
                '<div style=\"text-align: center; padding: 50px 20px;\">
                    <h1>网站维护中</h1>
                    <p>我们正在进行系统维护，请稍后再访问。</p>
                </div>',
                '网站维护中',
                array(
                    'response' => 503,
                    'back_link' => false,
                )
            );
        }
    }
}

// 设置页面HTML
function csrwiki_maintenance_settings_page() {
    ?>
    <div class=\"wrap\">
        <h1>维护模式设置</h1>
        <form method=\"post\" action=\"options.php\">
            <?php settings_fields('maintenance-settings-group'); ?>
            <?php do_settings_sections('maintenance-settings-group'); ?>
            <table class=\"form-table\">
                <tr>
                    <th scope=\"row\">维护模式状态</th>
                    <td>
                        <label>
                            <input type=\"checkbox\" name=\"maintenance_mode_active\" value=\"1\" <?php checked(1, get_option('maintenance_mode_active'), true); ?> />
                            启用维护模式
                        </label>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// 初始化维护模式功能
csrwiki_maintenance_mode();
\n

如果开关不开启，代码就不工作，不会影响性能​

\n

是的，性能影响可以忽略不计。让我解释代码执行过程：

\n
    \n
  1. \n

    插件注册了两个主要行为：

    \n\n
    2. \n
  2. \n

    具体分析维护模式关闭时的执行流程：

    \n
    3. \n
\n
function csrwiki_check_maintenance_mode() {
    // 当维护模式未开启时，这个if判断直接返回
    if (get_option('maintenance_mode_active') && !current_user_can('manage_options')) {
        // 维护模式关闭时，这里面的代码完全不会执行
    }
}
\n

性能开销极小，原因：

\n\n

所以你完全不用担心性能问题。这是一个非常轻量级的功能实现。

", "url": "https://frankelinli.github.io/blog/WordPress管理后台设置里添加维护模式开关", "title": "WordPress管理后台设置里添加维护模式开关", "summary": "- 维护模式下返回503状态码，对SEO更友好", "date_modified": "2024-12-21T18:17:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/文章编辑后台为某个块设置仅管理员可见", "content_html": "

WordPress文章后台编辑页面，选中一个块时，右侧出现设置仅管理员可见的选项

\n

完整步骤：

\n

首先创建编辑器专用的JS文件：editor-custom.js​

\n
// editor-custom.js
wp.domReady(() => {
    // 获取所有块类型
    const blockTypes = wp.blocks.getBlockTypes();
    
    blockTypes.forEach(blockType => {
        // 扩展现有的块属性
        wp.blocks.unregisterBlockType(blockType.name);
        
        const settings = {
            ...blockType,
            attributes: {
                ...blockType.attributes,
                adminOnly: {
                    type: 'boolean',
                    default: false,
                }
            },
            edit: function(props) {
                const { attributes, setAttributes } = props;
                
                // 创建原始的编辑界面
                const originalEdit = blockType.edit;
                
                return wp.element.createElement(
                    wp.element.Fragment,
                    null,
                    originalEdit(props),
                    wp.element.createElement(
                        wp.blockEditor.InspectorControls,
                        {},
                        wp.element.createElement(
                            wp.components.PanelBody,
                            { title: '访问控制' },
                            wp.element.createElement(
                                wp.components.ToggleControl,
                                {
                                    label: '仅管理员可见',
                                    checked: attributes.adminOnly,
                                    onChange: (value) => setAttributes({ adminOnly: value })
                                }
                            )
                        )
                    )
                );
            }
        };
        
        wp.blocks.registerBlockType(blockType.name, settings);
    });
});
\n

在functions.php中加载编辑器脚本、处理前端显示逻辑：​

\n
// 加载编辑器脚本
add_action('enqueue_block_editor_assets', 'my_editor_scripts');
function my_editor_scripts() {
    wp_enqueue_script(
        'my-editor-custom-js', 
        get_stylesheet_directory_uri() . '/editor-custom.js', 
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'), 
        '1.0', 
        true
    );
}

// 处理前端显示逻辑
add_filter('render_block', 'filter_admin_only_blocks', 10, 2);
function filter_admin_only_blocks($block_content, $block) {
    // 如果块没有设置adminOnly属性，直接返回原内容
    if (empty($block['attrs']) || !isset($block['attrs']['adminOnly'])) {
        return $block_content;
    }
    
    // 只有设置了adminOnly时才检查权限
    if ($block['attrs']['adminOnly'] && !current_user_can('manage_options')) {
        return '';
    }
    
    return $block_content;
}
\n

这个方案的特点：

\n
    \n
  1. 为所有块类型都添加了管理员可见选项
    2. \n
  2. 在块的右侧面板中显示控制开关
    3. \n
  3. 前端会自动过滤非管理员的访问
    4. \n
  4. 代码组织清晰，维护方便
    5. \n
\n

使用方法：

\n
    \n
  1. 在编辑器中选择任意块
    2. \n
  2. 在右侧面板中找到\"访问控制\"选项
    3. \n
  3. 打开\"仅管理员可见\"开关即可
    4. \n
\n

这样就完成了所需功能的实现！

\n
\n

前端显示逻辑代码解释​

\n

这个过滤器的工作方式是这样的：

\n
    \n
  1. WordPress在渲染页面时，会逐个处理每个块
    2. \n
  2. 对每个块，WordPress都会触发一次render_block过滤器
    3. \n
  3. 我们的函数会被调用，但只处理当前块，不是循环
    4. \n
\n

页面内容：\n[块1] -> 没有adminOnly属性 -> 直接返回原内容\n[块2] -> 有adminOnly=true -> 检查权限\n[块3] -> 没有adminOnly属性 -> 直接返回原内容

\n

当普通访客访问时，该块不会输出到客户端浏览器：​

\n
    \n
  1. 服务器端处理：
    2. \n
\n
if ($block['attrs']['adminOnly'] && !current_user_can('manage_options')) {
    return ''; // 返回空字符串
}
\n

这里直接返回空字符串，意味着：

\n\n

举个例子，假设页面有3个段落块：

\n
<!-- 管理员看到的 -->
<p>第一段（公开）</p>
<p>第二段（仅管理员）</p>
<p>第三段（公开）</p>

<!-- 访客看到的 -->
<p>第一段（公开）</p>
<p>第三段（公开）</p>
\n

这样做的好处是：

\n
    \n
  1. 更安全 - 敏感内容完全不会传输到客户端
    2. \n
  2. 更轻量 - 减少了页面大小
    3. \n
  3. 无痕迹 - 查看源码也看不到任何相关信息
    4. \n
\n

创建个“仅管理员可见”的区块​

\n

啊,这是个非常聪明的解决方案!确实更简单高效。让我们创建一个\"管理员可见\"区块：

\n
// admin-only-block.js
wp.blocks.registerBlockType('csrwiki/admin-only', {
    title: '仅管理员可见',
    icon: 'lock',
    category: 'common',
    description: '此区块中的内容仅管理员可见',
    
    edit: function(props) {
        return wp.element.createElement(
            'div',
            { className: 'wp-block-csrwiki-admin-only' },
            [
                wp.element.createElement(
                    'div',
                    { className: 'admin-only-header' },
                    '🔒 仅管理员可见'
                ),
                wp.element.createElement(
                    'div',
                    { className: 'admin-only-content' },
                    wp.element.createElement(
                        wp.blockEditor.InnerBlocks,
                        {
                            template: [
                                ['core/paragraph', {}]
                            ],
                            allowedBlocks: true,
                            templateLock: false
                        }
                    )
                )
            ]
        );
    },
    
    save: function(props) {
        return wp.element.createElement(
            'div',
            { className: 'wp-block-csrwiki-admin-only' },
            wp.element.createElement(wp.blockEditor.InnerBlocks.Content)
        );
    }
});
\n
/* 在style.css中 */
.wp-block-csrwiki-admin-only {
    border: 2px dashed #666;
    padding: 20px;
    background: #f9f9f9;
}

.admin-only-header {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* 编辑器中的样式 */
.editor-styles-wrapper .wp-block-csrwiki-admin-only {
    border: 2px dashed #ff5722;
    background: #fff3e0;
}
\n
// 在functions.php中
function register_admin_only_block() {
    wp_register_script(
        'admin-only-block',
        get_stylesheet_directory_uri() . '/js/admin-only-block.js',
        array('wp-blocks', 'wp-element', 'wp-editor')
    );

    register_block_type('csrwiki/admin-only', array(
        'editor_script' => 'admin-only-block',
        'render_callback' => 'render_admin_only_block'
    ));
}
add_action('init', 'register_admin_only_block');

// 渲染回调函数
function render_admin_only_block($attributes, $content) {
    if(current_user_can('administrator')) {
        return $content;
    }
    return ''; // 非管理员看不到内容
}
\n

这个方案的优点：

\n
    \n
  1. 一次性解决问题，不用遍历检查每个块
    2. \n
  2. 使用更直观，直接把需要保护的内容放在这个块里
    3. \n
  3. 在编辑器中有明显的视觉提示（虚线边框）
    4. \n
  4. 可以嵌套任何其他块
    5. \n
  5. 维护更简单
    6. \n
\n

使用方法就是在编辑器中插入\"仅管理员可见\"块，然后在里面放入需要保护的内容即可。非管理员访问时这些内容会自动隐藏。

", "url": "https://frankelinli.github.io/blog/文章编辑后台为某个块设置仅管理员可见", "title": "文章编辑后台为某个块设置仅管理员可见", "summary": "WordPress文章后台编辑页面，选中一个块时，右侧出现设置仅管理员可见的选项", "date_modified": "2024-12-21T11:24:00.000Z", "tags": [] }, { "id": "https://frankelinli.github.io/blog/如何给wordpress文章设置自定义字段 is doc=true", "content_html": "

有几种设置自定义字段 is_doc 的方法：

\n

使用WordPress原生自定义字段（最简单）：​

\n
// 添加到functions.php，显示自定义字段框
function show_is_doc_meta_box() {
    // 确保自定义字段模块可见
    add_post_type_support('post', 'custom-fields');
    
    add_meta_box(
        'is_doc_meta_box',           // ID
        '文档类型设置',              // 标题
        'is_doc_meta_box_callback',  // 回调函数
        'post'                       // 显示位置
    );
}
add_action('add_meta_boxes', 'show_is_doc_meta_box');

// meta box的内容
function is_doc_meta_box_callback($post) {
    wp_nonce_field('is_doc_save', 'is_doc_nonce');
    $value = get_post_meta($post->ID, 'is_doc', true);
    ?>
    <label>
        <input type=\"checkbox\" name=\"is_doc\" value=\"true\" <?php checked($value, 'true'); ?> />
        这是一篇文档类文章
    </label>
    <?php
}

// 保存meta值
function save_is_doc_meta($post_id) {
    if (!isset($_POST['is_doc_nonce']) || 
        !wp_verify_nonce($_POST['is_doc_nonce'], 'is_doc_save')) {
        return;
    }
    
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    
    if (isset($_POST['is_doc'])) {
        update_post_meta($post_id, 'is_doc', 'true');
    } else {
        delete_post_meta($post_id, 'is_doc');
    }
}
add_action('save_post', 'save_is_doc_meta');
\n

效果：

\n\n

使用Quick Edit（快速编辑）方式：​

\n
// 在文章列表添加自定义列（已有）
function add_is_doc_column($columns) {
    $new_columns = array();
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'title') {
            $new_columns['is_doc'] = __('文档类型', 'csrwiki');
        }
    }
    return $new_columns;
}
add_filter('manage_posts_columns', 'add_is_doc_column');

// 显示自定义列的内容（已有）
function show_is_doc_column_content($column, $post_id) {
    if ($column === 'is_doc') {
        $is_doc = get_post_meta($post_id, 'is_doc', true);
        if ($is_doc) {
            echo '<span style=\"color: #2271b1;\">📚 文档</span>';
        } else {
            echo '<span style=\"color: #666;\">📰 普通</span>';
        }
    }
}
add_action('manage_posts_custom_column', 'show_is_doc_column_content', 10, 2);

// 添加快速编辑字段
function add_quick_edit_is_doc($column_name, $post_type) {
    if ($column_name !== 'is_doc') return;
    ?>
    <fieldset class=\"inline-edit-col-right\">
        <div class=\"inline-edit-col\">
            <label class=\"alignleft\">
                <input type=\"checkbox\" name=\"is_doc\" value=\"true\">
                <span class=\"checkbox-title\"><?php _e('标记为文档类文章', 'csrwiki'); ?></span>
            </label>
        </div>
    </fieldset>
    <?php
}
add_action('quick_edit_custom_box', 'add_quick_edit_is_doc', 10, 2);

// 保存快速编辑的值
function save_quick_edit_is_doc($post_id) {
    // 安全检查
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    
    // 保存is_doc值
    if (isset($_POST['is_doc'])) {
        update_post_meta($post_id, 'is_doc', 'true');
    } else {
        delete_post_meta($post_id, 'is_doc');
    }
}
add_action('save_post', 'save_quick_edit_is_doc');

// 添加必要的JavaScript来处理快速编辑
function add_quick_edit_js() {
    ?>
    <script type=\"text/javascript\">
    jQuery(document).ready(function($) {
        // 保存原始的inlineEditPost.edit函数
        var $wp_inline_edit = inlineEditPost.edit;
        
        // 重写inlineEditPost.edit函数
        inlineEditPost.edit = function(id) {
            // 调用原始的edit函数
            $wp_inline_edit.apply(this, arguments);
            
            // 获取post ID
            var post_id = 0;
            if (typeof(id) == 'object') {
                post_id = parseInt(this.getId(id));
            }
            
            // 获取行数据并设置复选框
            if (post_id > 0) {
                var edit_row = $('#edit-' + post_id);
                var post_row = $('#post-' + post_id);
                
                // 检查是否是文档
                var is_doc = post_row.find('.is_doc span').text().indexOf('文档') !== -1;
                
                // 设置复选框状态
                edit_row.find('input[name=\"is_doc\"]').prop('checked', is_doc);
            }
        };
    });
    </script>
    <?php
}
add_action('admin_footer-edit.php', 'add_quick_edit_js');
\n

这将：

\n
    \n
  1. 在快速编辑面板中添加复选框
    2. \n
  2. 正确保存快速编辑的值
    3. \n
  3. 正确加载现有的is_doc状态
    4. \n
  4. 处理JavaScript交互
    5. \n
\n

现在当你点击快速编辑时，应该可以看到：

\n\n

\"image-20241221095140527\"

\n

这样就提供了两种设置方式：

\n
    \n
  1. 在编辑文章时通过右侧面板设置
    2. \n
  2. 在文章列表页通过快速编辑设置
    3. \n
\n

使用建议：

\n\n

我的文档类型设置\"面板为何在编辑页面底部？我想放到右侧​

\n

要将文档类型设置面板移到右侧，需要在 add_meta_box 函数中设置正确的 context 参数。修改代码如下：

\n
function show_is_doc_meta_box() {
    add_post_type_support('post', 'custom-fields');
    
    add_meta_box(
        'is_doc_meta_box',           // ID
        '文档类型设置',              // 标题
        'is_doc_meta_box_callback',  // 回调函数
        'post',                      // 显示位置
        'side',                      // 设置为side表示显示在右侧
        'high'                       // 优先级设为high，让它显示在较上方
    );
}
\n

关键变化：

\n
    \n
  1. 添加了第5个参数 'side' - 指定显示位置在右侧栏
    2. \n
  2. 添加了第6个参数 'high' - 设置较高优先级
    3. \n
\n

这样修改后，\"文档类型设置\"面板就会：

\n", "url": "https://frankelinli.github.io/blog/如何给wordpress文章设置自定义字段 is doc=true", "title": "如何给wordpress文章设置自定义字段 is doc=true", "summary": "有几种设置自定义字段 is_doc 的方法：", "date_modified": "2024-12-21T09:47:00.000Z", "tags": [] } ] }