侧边栏公告并不只是放一段文字。做得恰当，它可以承担站点通知、资源提示、社群入口或更新说明等任务，并用统一的视觉语言提升页面完整度。本教程以子比主题为例，使用子主题 + WordPress 自定义器 + 小型短代码的方式，制作一张可在后台修改内容的渐变公告卡片。

修改主题文件前请先备份。涉及样式和 functions.php 的调整，建议始终放在子主题中完成，避免主题更新后代码丢失。

实现思路与准备工作

本方案将内容、样式与展示位置分开处理：在 WordPress 自定义器中保存公告标题、正文和按钮；通过短代码输出结构；在子主题的 style.css 中编写渐变卡片样式；最后把短代码放入子比主题正在使用的侧边栏组件。这样以后修改公告文案时，不必反复编辑 PHP 文件。

• 确认当前已启用子主题；没有子主题时，先创建并测试基础继承关系。
• 准备一个可编辑的子主题 functions.php 和 style.css 文件。
• 确认文章页或页面页已启用侧边栏，并记住对应的侧边栏区域。
• 在操作前导出或备份现有的主题自定义设置。

第一步：注册后台可修改的公告内容

将下面代码加入子主题的 functions.php。它会在“外观 → 自定义”中新增“侧边栏渐变公告”面板，包含标题、说明文字、按钮文字与按钮地址四个字段。

add_action( 'customize_register', function( $wp_customize ) {
    $wp_customize->add_section( 'zib_notice_card', array(
        'title' => '侧边栏渐变公告',
        'priority' => 160,
    ) );

    $fields = array(
        'notice_title' => array( '标题', '网站公告' ),
        'notice_text' => array( '说明文字', '在这里填写你想展示的最新消息。' ),
        'notice_button' => array( '按钮文字', '查看详情' ),
        'notice_url' => array( '按钮链接', '#' ),
    );

    foreach ( $fields as $id => $field ) {
        $wp_customize->add_setting( 'zib_' . $id, array(
            'default' => $field[1],
            'sanitize_callback' => $id === 'notice_url' ? 'esc_url_raw' : 'sanitize_text_field',
        ) );
        $wp_customize->add_control( 'zib_' . $id, array(
            'label' => $field[0],
            'section' => 'zib_notice_card',
            'type' => 'text',
        ) );
    }
} );

这里使用了 WordPress 自带的内容过滤函数：普通文本会过滤不安全字符，链接会按 URL 规则处理。公告正文如需换行或富文本，可以后续改为独立设置页并使用编辑器字段；对于简洁的侧边栏提示，单行文本设置通常更稳定。

第二步：用短代码输出公告卡片

继续在 functions.php 中加入以下代码。短代码的好处是展示位置灵活：可以放入侧边栏、页面内容区域，或放在支持短代码的主题模块中。

add_shortcode( 'zib_gradient_notice', function() {
    $title = get_theme_mod( 'zib_notice_title', '网站公告' );
    $text = get_theme_mod( 'zib_notice_text', '在这里填写你想展示的最新消息。' );
    $button = get_theme_mod( 'zib_notice_button', '查看详情' );
    $url = get_theme_mod( 'zib_notice_url', '#' );

    ob_start(); ?>
    <section class="zib-gradient-notice" aria-label="网站公告">
        <span class="zib-gradient-notice__tag">NOTICE</span>
        <h3 class="zib-gradient-notice__title"><?php echo esc_html( $title ); ?></h3>
        <p class="zib-gradient-notice__text"><?php echo esc_html( $text ); ?></p>
        <a class="zib-gradient-notice__button" href="<?php echo esc_url( $url ); ?>"><?php echo esc_html( $button ); ?></a>
    </section>
    <?php return ob_get_clean();
} );

代码中对标题、正文、按钮文字和链接分别进行了转义。这一步不要省略，尤其是当内容来自后台输入时。它既能避免意外的 HTML 破坏页面结构，也能让后续维护更加安心。

第三步：添加渐变风格与响应式样式

把下面样式添加到子主题的 style.css。颜色使用紫蓝渐变，你可以按网站主色调整两个渐变色值。选择器加上了 zib- 前缀，可降低与子比主题原有样式冲突的概率。

.zib-gradient-notice {
    position: relative;
    overflow: hidden;
    margin: 0 0 20px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 12px 28px rgba(93, 78, 160, .22);
    color: #fff;
}
.zib-gradient-notice::after {
    content: '';
    position: absolute;
    top: -45px;
    right: -35px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
}
.zib-gradient-notice__tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.zib-gradient-notice__title { margin: 14px 0 8px; color: #fff; font-size: 19px; line-height: 1.4; }
.zib-gradient-notice__text { margin: 0 0 18px; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.75; }
.zib-gradient-notice__button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    background: #fff;
    color: #6548a1 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}
.zib-gradient-notice__button:hover { transform: translateY(-1px); opacity: .94; }
@media (max-width: 768px) {
    .zib-gradient-notice { padding: 20px; border-radius: 14px; }
    .zib-gradient-notice__title { font-size: 18px; }
}

响应式部分不必追求复杂。侧边栏在移动端通常会变成单列内容，因此重点是控制内边距、标题字号和按钮点击区域。按钮设置最小高度后，手机上的触控体验会更友好。

第四步：将公告放进子比主题侧边栏

保存代码并清理缓存后，进入 WordPress 后台的“外观 → 小工具”或主题提供的侧边栏模块管理位置，在文章侧边栏添加支持短代码的组件，然后填入以下内容：

[zib_gradient_notice]

不同版本的子比主题对侧边栏管理入口和组件名称可能略有不同。优先选择“短代码”“文本”或主题中明确支持短代码解析的模块。如果添加后原样显示短代码，说明当前组件不解析短代码，应更换短代码组件，或在子主题模板中使用 echo do_shortcode( '[zib_gradient_notice]' ); 输出。

常见问题与排查建议

• 卡片没有出现：先检查短代码是否放在当前页面实际调用的侧边栏区域，再确认 functions.php 没有 PHP 语法错误。
• 样式没有生效：检查子主题 style.css 是否已加载，并清理站点缓存、浏览器缓存及可能存在的 CDN 缓存。
• 标题颜色被主题覆盖：可提高选择器针对性，例如使用 .sidebar .zib-gradient-notice__title，但不要一开始就大量使用 !important。
• 按钮链接打不开：在自定义器中填写完整地址，站内链接也建议使用以 https:// 开头的完整 URL。
• 更新主题后失效：检查代码是否误放入父主题。子主题是这类美化长期可维护的基础。

让美化真正服务于内容

一个小小的公告卡片，背后其实是建站时常见的取舍：既希望页面更有辨识度，也不能让装饰抢走内容本身的注意力。渐变、阴影和圆角都只是手段，真正重要的是公告是否清晰、链接是否有用、更新是否及时。

建议把公告控制在一条核心信息以内，并定期替换过期内容。当你能把“视觉效果”“后台维护”和“用户阅读路径”同时考虑进去，主题美化就不再只是复制一段代码，而会逐渐成为一套适合自己网站的内容运营习惯。