Sử dụng Artalk làm bộ đếm số lượt xem bài viết trên WordPress

Khá nhiều năm về trước, mình cũng có thử dùng WP-PostViews để tạo bộ đếm số lượt xem bài viết, dùng ít hôm thì bỏ, vì khó sử lý cache, tốn tài nguyên, nhìn thiếu chuyên nghiệp 😀

Vài năm nay mình dùng Artalk thay thế cho hệ thống comment của WordPress, tác giả đã làm sẵn bộ đếm trang, chỉ là phần hướng dẫn cài đặt, nó nằm hơi sâu, nên cũng ít ai để ý, nay rỗi rãi nên tích hợp nó vào, làm bộ đếm cho thèng bibica.net luôn 😀 cho vui là chính chứ không có ý nghĩa gì lắm 😛

Muốn hiện đếm view ở đâu, thì chỉ cần thêm <span class="artalk-pv-count"></span> vào nơi muốn hiện ra là xong, cứ F5 1 phát là tăng 1 view, đơn giản dễ hiểu

Trên thèng bibica.net thì mình vẫn dùng theme GeneratePress, bé Tom đã có sẵn phần code hiện ngày tháng bài viết cập nhập, mình sẽ bổ xung phần đếm view này vào đó, tạo thêm class view-count để tùy chỉnh giao diện cho dễ

add_filter( 'generate_post_date_output', 'tu_show_modified_date' );
function tu_show_modified_date() {
    // Hiển thị ngày đăng, ngày cập nhật, và số lượt xem (nếu là bài viết đơn)
    $output = '<span class="posted-on">';
    
    // Ngày đăng
    $output .= '<span class="posted-date"><i class="fa">&#xe800;</i><span class="date-text">' . esc_html( get_the_date() ) . '</span></span>';
    
    // Ngày cập nhật (nếu có)
    if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
        $output .= '<span class="modified-date"><i class="fa">&#xe804;</i><span class="date-text">' . esc_html( get_the_modified_date() ) . '</span></span>';
    }
    
    // Số lượt xem (nếu là bài viết đơn)
    if ( is_single() ) {
        $output .= '<span class="view-count"><svg class="fa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="16" height="16">
                <path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-24.6-46.2-43.5-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"/>
            </svg><span class="artalk-pv-count"></span>
        </span>';
    }
    
    $output .= '</span>';
    return $output;
}

Ý nghĩa của nó là đếm số lượt xem của bài viết, nên chỉ hiện ra ở is_single, icon thì mình kiếm đại hình con mắt, nhìn hợp hợp rồi …. copy vào luôn cho khỏe :]]

Điều chỉnh css 1 chút để nó cân đối với 2 cái icon ngày xuất bản và ngày cập nhập bài viết

.posted-on {
    display: inline-flex; /* Giữ tất cả các phần tử trên cùng một dòng */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 10px; /* Khoảng cách giữa các nhóm icon-text */
    font-family: inherit;
    font-size: 1em;
    color: #333;
}

.posted-on .posted-date,
.posted-on .modified-date,
.posted-on .view-count {
    display: inline-flex; /* Nhóm icon và text lại với nhau */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 2px; /* Khoảng cách giữa icon và text */
}

.posted-on i.fa,
.posted-on svg.fa {
    font-size: 16px; /* Kích thước biểu tượng cố định */
    line-height: 1;
    width: 16px; /* Chiều rộng cố định */
    text-align: center;
    flex-shrink: 0; /* Ngăn biểu tượng bị thu nhỏ */
}

.posted-on .date-text,
.posted-on .artalk-pv-count {
    font-size: 1em; /* Kích thước văn bản thống nhất */
    line-height: 1;
    white-space: nowrap; /* Ngăn văn bản xuống dòng */
}

Sửa tạm tạm cho cân đối với 2 cái icon đang có là được

Đúng ra thế là xong rồi, mà lúc này mới để ý là cái bộ đếm này load lâu khùng luôn, sau mới sực nhớ nó load theo Artalk, mà Artalk bình thường chỉ load khi kéo gần xuống phần commment, cần load sớm Artalk.js nhất có thể

add_action('wp_enqueue_scripts', 'artalk_stats_loader', 1);

function artalk_stats_loader() {
    if (!is_single()) {
        return;
    }
    wp_enqueue_script(
        'artalk-js',
        'https://comment.bibica.net/dist/Artalk.js',
        array(),
        null,
        false
    );
}

Lúc này bộ đếm hiện ra đã ở mức chấp nhận được, tầm 1-2s gì đó

Dưới đây là toàn bộ phần load cấu hình của Artalk mà thèng bibica.net đang dùng

function load_artalk_assets() {
    // Kiểm tra xem có phải là single post hay không
    if (is_single()) {
        // Tải file CSS
        wp_enqueue_style('artalk-css', 'https://comment.bibica.net/dist/Artalk.css', array(), null);

        // Tải file JS
        wp_enqueue_script('artalk-js', 'https://comment.bibica.net/dist/Artalk.js', array(), null, true);

        // Inline script để khởi tạo Artalk
        wp_add_inline_script('artalk-js', '
            Artalk.init({
                el: "#Comments",
                pageKey: "",
                pageTitle: "",
                server: "https://comment.bibica.net",
                site: "BIBICA.NET",
                dateFormatter: (date) => {
                    const day = new Intl.DateTimeFormat("en-GB", { day: "2-digit" }).format(date);
                    const month = new Intl.DateTimeFormat("en-GB", { month: "2-digit" }).format(date);
                    const year = new Intl.DateTimeFormat("en-GB", { year: "numeric" }).format(date);
                    let time = new Intl.DateTimeFormat("en-GB", { hour: "2-digit", minute: "2-digit", hour12: true }).format(date);
                    time = time.toUpperCase();
                    return `${day}/${month}/${year} at ${time}`;
                }
            });
        ');
    }
}
add_action('wp_enqueue_scripts', 'load_artalk_assets');

Kết luận

Bài viết mục đích để nhớ là chính, vì mình nghĩ không mấy người dùng Artalk để mà quan tâm tới cái này 😛

Cũng có thể thêm phần artalk-comment-count để đếm tổng số comment, cho nó hiện ra, hoặc bật tính năng Like, Dislike 1 bài viết … tất cả đều có sẵn từ Artalk

Nói tới đây lại thấy mấy anh Trung Quốc sử lý chịu tải kinh thật, mấy tính năng nặng điên, mà mí ảnh xử lý cái một