如何为网站Open/closed函数添加带脉冲动画的状态点（PHP短代码）

嘿，刚好折腾过类似的效果，给你一套完整的解决方案，完美匹配你要的需求：

1. PHP短代码实现 #

把这段代码加到你的主题functions.php文件里（或者自定义插件中）：

function open_closed_status_shortcode($atts) {
    // 提取短代码参数，默认状态为关闭
    $atts = shortcode_atts(array(
        'status' => 'closed',
    ), $atts);

    // 验证状态值，确保只有open/closed两种有效选项
    $valid_statuses = array('open', 'closed');
    $status = in_array($atts['status'], $valid_statuses) ? $atts['status'] : 'closed';

    // 根据状态生成对应HTML，同时添加无障碍标签提升可访问性
    $class = $status === 'open' ? 'status-indicator status-open' : 'status-indicator status-closed';
    $label = $status === 'open' ? '开放' : '关闭';

    return '<span class="' . esc_attr($class) . '" aria-label="' . esc_attr($label) . '"></span>';
}
// 注册短代码，方便在页面中调用
add_shortcode('open_closed', 'open_closed_status_shortcode');

这段代码的核心逻辑：

• 支持通过status参数指定状态，默认显示关闭状态
• 做了参数合法性校验，防止无效值导致样式混乱
• 输出带专属类名的span元素，同时加入aria-label适配屏幕阅读器

2. CSS脉冲动画样式 #

把这段CSS加到主题样式文件（比如style.css）或者后台自定义CSS面板里：

/* 基础指示器样式，确保圆点正常显示 */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    position: relative;
    vertical-align: middle;
}

/* 开放状态：实心绿色圆点 */
.status-open {
    background-color: #2ecc71;
}

/* 关闭状态：实心红色圆点 */
.status-closed {
    background-color: #e74c3c;
}

/* 脉冲动画关键帧定义 */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 用伪元素实现扩散的脉冲效果 */
.status-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* 开放状态的半透明脉冲层 */
.status-open::after {
    background-color: rgba(46, 204, 113, 0.4);
}

/* 关闭状态的半透明脉冲层 */
.status-closed::after {
    background-color: rgba(231, 76, 60, 0.4);
}

这个样式和你参考的网站效果一致：

• 实心圆点作为基础状态标识
• 伪元素实现向外扩散的半透明脉冲动画，循环播放
• 开放/关闭状态分别对应绿、红两套配色

3. 页面中调用方式 #

在文章、页面或者主题模板里直接用短代码就行：

• 显示开放状态：[open_closed status="open"]
• 显示关闭状态：[open_closed status="closed"]

如果要搭配文字使用，比如：

店铺当前状态：[open_closed status="open"] 正在营业

额外优化小技巧 #

• 可以根据需求调整圆点大小（修改width/height）、动画速度（修改2s）
• 如果需要动态获取状态（比如从后台设置或数据库读取），可以在短代码函数里替换静态参数，比如：

// 示例：从WordPress选项中读取状态
$status = get_option('store_business_status', 'closed');

内容的提问来源于stack exchange，提问作者Jordan Kellett