演示效果

代码

/**
 * 文章页面左侧浮动按钮 - 大海
 */
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) ?: '';
        $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(); });

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:88px;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)}.pf-btn:focus{outline:none;color:var(--muted-2-color)}.pf-btn.actived:focus{color:var(--focus-color)}.pf-btn>.icon{font-size:22px}.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}.pf-num:empty{display:none}.pf-line{width:30px;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 2px 12px rgba(0,0,0,.1)}.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}.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}}@media(max-width:1399px){.post-fixed{display:none!important}}</style>';
});

add_action('wp_footer', function() {
    if (!is_single()) return;
    echo "<script>$('.pf-btn count').each(function(){var b=$(this).siblings('.pf-num');new MutationObserver(function(m){var t=m[0].target.textContent;b.text(t&&t!='0'?t:'')}).observe(this,{childList:1,subtree:1})});</script>";
});