子比主题美化教程：为文章页添加左侧悬浮快捷操作栏（含点赞/收藏/分享）

在宽屏显示器日益普及的今天，很多站长发现 WordPress 网站在电脑端浏览时，文章内容区域的左侧往往留有大片空白。如何利用好这块区域，既不喧宾夺主，又能提升用户的交互体验？

今天为大家分享一个专为WordPress子比主题（Zibll）定制的美化方案：文章左侧悬浮快捷操作栏。

这个小功能虽然不起眼，但它将“点赞、收藏、评论、分享”这四个最高频的交互按钮，以“Sticky（粘性）”的方式固定在文章左侧。无论读者滚动到文章的哪个位置，都能随时进行互动。

功能亮点与修复

这份代码并非简单的堆砌，而是经过了精细打磨：

1. 智能吸附：采用 position: sticky 属性，当用户向下滚动阅读时，操作栏会自动跟随，始终保持在视线左侧，触手可及。
2. 状态同步：据主题铺观察，网上流传的类似代码经常出现“点赞状态显示错误”的BUG（比如明明没点赞却显示已激活）。这份代码修复了判定逻辑，精准识别当前用户的点赞与收藏状态。
3. 实时数值：内置了 JS 监听脚本。当你点击点赞或收藏时，旁边的小气泡数值会实时变化，无需刷新页面。
4. 智能显隐：代码中集成了判断逻辑，仅在 PC 端宽屏（宽度大于 1200px）显示，移动端自动隐藏，确保小屏幕的阅读体验不受干扰。

代码部署教程

部署非常简单，你不需要修改任何 CSS 文件或 JS 文件，因为我们将所有逻辑都封装在了一段 PHP 代码中。

方法一：直接修改主题文件（推荐小白）

1. 进入 WordPress 后台。
2. 找到 外观 -> 主题文件编辑器。
3. 在右侧文件列表中，找到 functions.php（或者子比主题推荐的 func.php 文件，如果有的话）。
4. 将下方的完整代码复制，粘贴到文件的最末尾。
5. 点击“更新文件”保存即可。

方法二：使用代码片段插件（推荐老手）

如果你安装了Code Snippets或WPCode 等插件，新建一个 PHP 片段，将代码粘贴进去并启用即可。这样可以防止主题更新后代码丢失。可以从本站下载插件的汉化中文版

Code Snippets Pro汉化中文版(更新到3.9.6)-代码片段WordPress函数脚本插件下载

28天前

0796

WPCode Pro汉化中文版(更新到2.3.5)-代码插入WordPress自定义代码片段插件下载

1个月前

0389

具体代码如下

完整代码

/**
 * 子比主题文章页面左侧悬浮快捷按钮
 * 包含：点赞、收藏、评论跳转、分享
 * 优化：修复Active状态判定，增加数值实时监听
 */
function zib_post_fixed_btns() {
    global $post;
    // 判断：如果是移动端、非文章页、或者非标准文章类型，则不显示
    if (wp_is_mobile() || !is_single() || $post->post_type !== 'post') return '';

    $id = $post->ID;
    $logged = is_user_logged_in();
    $btns = '';

    $items = [];
    // 判断主题设置是否开启了点赞功能
    if (_pz('post_like_s')) $items[] = ['like', 'like', 'pf-like'];
    $items[] = ['favorite', 'favorite', 'pf-fav'];

    foreach ($items as $i) {
        $c = get_post_meta($id, $i[0], true) ?: '';
        // 核心修复：精准判断当前用户是否已点赞/收藏，赋予 actived 类名
        $cls = (('like' === $i[0] ? zib_is_my_like($id) : zib_is_my_favorite($id)) ? ' actived' : '') . ($logged ? '' : ' signin-loader');
        $act = $logged ? ' data-action="' . $i[0] . '"' : '';
        $btns .= '<a href="javascript:;"' . $act . ' class="pf-btn ' . $i[2] . $cls . '" data-pid="' . $id . '">' . zib_get_svg($i[1]) . '<count>' . $c . '</count><b class="pf-num">' . $c . '</b></a>';
    }

    // 评论按钮：点击平滑滚动到评论区
    $btns .= '<a href="#comments" class="pf-btn" onclick="scrollTopTo(\'#comments\');return false;">' . zib_get_svg('comment') . '<b class="pf-num">' . (get_comments_number($id) ?: '') . '</b></a>';

    // 分享按钮：调用主题自带的分享模块
    if (_pz('share_s')) $btns .= '<i class="pf-line"></i><span class="pf-btn hover-show">' . zib_get_svg('share') . '<div class="pf-share zib-widget hover-show-con">' . zib_get_share('', $post) . '</div></span>';

    return '<div class="post-fixed"><div class="pf-inner">' . $btns . '</div></div>';
}

// 挂载到文章内容之前
add_action('zib_single_before', function() { echo zib_post_fixed_btns(); });

// 输出配套 CSS
add_action('wp_head', function() {
    if (!is_single()) return;
    echo '<style>
    .post-fixed{display:none}
    @media(min-width:1200px){
        .content-layout{position:relative}
        .post-fixed{display:block;position:sticky;top:100px;float:left;margin-left:-88px;margin-bottom:-999px;width:70px;z-index:99}
        .pf-inner{background:var(--main-bg-color);border-radius:var(--main-radius);box-shadow:0 2px 10px rgba(0,0,0,.08);padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
        .pf-btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--muted-border-color);color:var(--muted-2-color);transition:.3s;cursor:pointer;position:relative}
        .pf-btn:hover,.pf-btn.actived{color:var(--focus-color);background:var(--main-bg-color);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
        .pf-btn:focus{outline:none;color:var(--muted-2-color)}
        .pf-btn.actived:focus{color:var(--focus-color)}
        .pf-btn>.icon{font-size:20px}
        .pf-btn>count,.pf-btn>text{display:none}
        .pf-num{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;font-size:10px;line-height:18px;text-align:center;color:#fff;background:var(--focus-color);border-radius:10px;transform:scale(0.9)}
        .pf-num:empty{display:none}
        .pf-line{width:20px;height:1px;background:var(--muted-border-color);margin:4px 0}
        .pf-share.hover-show-con{position:absolute!important;left:58px!important;top:50%!important;transform:translateY(-50%)!important;width:60px!important;padding:10px 9px!important;border-radius:var(--main-radius);box-shadow:0 5px 20px rgba(0,0,0,.15)}
        .pf-share.hover-show-con::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-right-color:var(--main-bg-color);border-left-width:0}
        .pf-share .share-btn{width:42px!important;height:42px!important;display:flex!important;align-items:center;justify-content:center;margin:0 0 6px!important;padding:0!important;border-radius:50%}
        .pf-share .share-btn:last-child{margin-bottom:0!important}
        .pf-share .share-btn text{display:none!important}
        .pf-share .share-btn icon{margin:0!important;font-size:18px}
    }
    /* 屏幕宽度小于1400px时隐藏，防止遮挡内容 */
    @media(max-width:1399px){.post-fixed{display:none!important}}
    </style>';
});

// 输出配套 JS (监听数值变化)
add_action('wp_footer', function() {
    if (!is_single()) return;
    echo "<script>
    jQuery(document).ready(function($){
        $('.pf-btn count').each(function(){
            var b=$(this).siblings('.pf-num');
            // 使用 MutationObserver 监听主题 Ajax 更新带来的数值变化
            new MutationObserver(function(m){
                var t=m[0].target.textContent;
                b.text(t&&t!='0'?t:'');
            }).observe(this,{childList:1,subtree:1});
        });
    });
    </script>";
});

效果预览与说明

代码生效后，请使用电脑访问任意一篇文章。

• 显示位置：图标栏会出现在文章正文容器的左侧外部。
• 显示条件：为了保证视觉体验，我们限制了只在屏幕宽度大于 1400px 时显示。如果你的电脑屏幕较小，可能无法看到效果，这是为了避免图标遮挡住文章正文。
• 交互细节：
  • 点赞/收藏：未登录用户点击会弹出登录框；已登录用户点击即生效，图标变色。
  • 分享：鼠标悬停在分享图标上，右侧会弹出子比主题自带的分享组件（微信、海报、链接等）。

主题铺认为，这种设计风格非常符合现代博客的审美，既利用了屏幕空间，又没有使用那种满屏乱飞的弹窗广告，是一种非常克制且优雅的引导互动的手段。

快去给你的网站加上这个“互动神器”吧！