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, tôi đã 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

/**<font></font>
 * 文章页面左侧浮动按钮 - 大海<font></font>
 */<font></font>
function zib_post_fixed_btns() {<font></font>
    global $post;<font></font>
    if (wp_is_mobile() || !is_single() || $post->post_type !== 'post') return '';<font></font>
    <font></font>
    $id = $post->ID;<font></font>
    $logged = is_user_logged_in();<font></font>
    $btns = '';<font></font>
    <font></font>
    $items = [];<font></font>
    if (_pz('post_like_s')) $items[] = ['like', 'like', 'pf-like'];<font></font>
    $items[] = ['favorite', 'favorite', 'pf-fav'];<font></font>
    <font></font>
    foreach ($items as $i) {<font></font>
        $c = get_post_meta($id, $i[0], true) ?: '';<font></font>
        $cls = (('like' === $i[0] ? zib_is_my_like($id) : zib_is_my_favorite($id)) ? ' actived' : '') . ($logged ? '' : ' signin-loader');<font></font>
        $act = $logged ? ' data-action="' . $i[0] . '"' : '';<font></font>
        $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>';<font></font>
    }<font></font>
    <font></font>
    $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>';<font></font>
    <font></font>
    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>';<font></font>
    <font></font>
    return '<div class="post-fixed"><div class="pf-inner">' . $btns . '</div></div>';<font></font>
}<font></font>
<font></font>
add_action('zib_single_before', function() { echo zib_post_fixed_btns(); });<font></font>
<font></font>
add_action('wp_head', function() {<font></font>
    if (!is_single()) return;<font></font>
    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>';<font></font>
});<font></font>
<font></font>
add_action('wp_footer', function() {<font></font>
    if (!is_single()) return;<font></font>
    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>";<font></font>
});
© Copyright
HẾT
Nếu bạn thích, hãy ủng hộ tác giả nhé!
Thích0 Chia sẻ
Bình luận Bình luận trống
头像
Để lại nhận xét của bạn tại đây!
提交
头像

Khách

Hủy bỏ
Biệt danhBiểu cảmCodeHình ảnhTrả lời nhanh

    Chưa có bình luận nào