Zibll – Khung truy cập nhanh phía bên trái của bài viết

Vui lòng thêm đoạn mã này vào phía dưới tệp functions.php, đừng quên nhấn thích (like) nhé!
Đoạn mã này bao gồm các nút: Thích, Lưu (Favorites), Bình luận và Chia sẻ. Ngoài ra, mình đã sửa lỗi nút luôn hiển thị ở trạng thái ‘đang hoạt động’ (active).

图片[1]-Zibll – Khung truy cập nhanh phía bên trái của bài viết-Cùi.Vn - IT Community

Nội dung đoạn code

/**
 * Thanh truy cập nhanh cho bài viết
 */
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>";
});
© 版权声明
THE END
Nếu bạn thích, hãy ủng hộ tác giả nhé!
点赞0 分享
Bình luận 抢沙发
头像
Để lại nhận xét của bạn tại đây!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容