Cách hiển thị lượt xem theme Flatsome không dùng plugin

Cách hiển thị lượt xem sản phẩm tương đối quan trọng của một website. Chức năng này tương đối quan trọng nhưng WordPress lại không hỗ trợ sẵn. Ngay bây giờ, hãy cùng Minh Vy thực hiện một số bước đơn giản để hiện thị lượt xem nhé.

Cách hiển thị lượt xem và tạo bộ đếm trong dashboard

⇒ Chèn code đếm lượt xem vào cuối file function.php của theme đang sử dụng:

//code lấy lượt xem
function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "01 lượt xem";
    }
    return $count.' lượt xem';
}
// code đếm lượt xem
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}
  
// code hiển thị số lượt xem trong dashboard
add_filter('manage_posts_columns', 'posts_column_views');
add_action('manage_posts_custom_column', 'posts_custom_column_views',5,2);
function posts_column_views($defaults){
    $defaults['post_views'] = __('Views');
    return $defaults;
}
function posts_custom_column_views($column_name, $id){
    if($column_name === 'post_views'){
        echo getPostViews(get_the_ID());
    }
}

Hiển thị lượt xem bài viết trong WordPress

Bước 1: Các bạn thêm đoạn code dưới đây

<?php setPostViews(get_the_ID()); ?>

Vào vào dòng 2 trong file \flatsome\template-parts\posts\content-single.php

Bước 2: Thay đoạn code sau vào dòng 244 trong file flatsome\inc\structure\structure-posts.php

echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span><span class="catted"><i class="fa fa-eye" aria-hidden="true"></i>&nbsp;'.getPostViews(get_the_ID()).'</span>';

Hiển thị số lượt xem của sản phẩm theme Flatsome

Bước 1: Tìm file : flatsome\woocommerce\content-single-product.php thêm vào dòng 22 đoạn sau:

<?php setPostViews(get_the_ID()); ?>

Bước 2: Thêm code sau vào file function.php

function action_woocommerce_single_product_summary(  ) {
echo '<span class="luot-xem">';
echo getPostViews(get_the_ID());
echo '</span>';
}
add_action( 'woocommerce_single_product_summary', 'action_woocommerce_single_product_summary', 5, 0 );

Bước 3: Thêm CSS cho cái hiển thị lượt xem

.luot-xem:before {
content: "\f06e";
    color: #f96e5b;
    display: inline-block;
    font-size: 14px;
    font-family: 'FontAwesome';
    margin: auto;
    padding: 5px;
}
span.luot-xem {
    color: #f96e5b;
}

LƯU Ý: Để hiển thị được CSS các bạn nhớ thêm link bên dưới vào phần HEADER SCRIPTS. Để truy cập vào HEADER SCRIPTS các bạn thực hiện như sau: Flatsome → Advanced → Global Settings.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Như vậy, mình đã vừa hướng dẫn các bạn cách hiển thị lượt xem một các đơn giản rồi. Hy vọng, với bài viết này sẽ giúp ích cho các bạn.