Cách tạo hiển thị bài viết xem nhiều WordPress

Hôm nay mình chia sẻ cho anh em về chức năng hiển thị lượt xem để bài viết thêm cuốn hút người đọc hơn. Code này khá đơn giản và bạn chỉ cần làm theo hướng dẫn từng bước như mình hướng dân các gắn code hiển thị bài viết xem nhiều wordpress ngay bây bên dưới.

Bước 1:

 Bạn chỉ cần chèn code đếm lượt xem vào cuối file function.php của theme đang sử dụng hiện tại ” Theme con” sẽ tốt hơn nhé:

//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());

}

}

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 2:

Dán đoạn code bên dưới vào dòng 2 trong file \theme\template-parts\posts\content-single.php

Dán: 

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

Bước 3:

Dán đè lên code ở dòng 244 trong file theme\inc\structure\structure-posts.php

Dán:

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>’;

Bước 4

Để hiển thị được CSS hình con mắt bạn copy link bên dưới thêm vào phần HEADER SCRIPTS. Để truy cập vào HEADER SCRIPTS các bạn

Ví Dụ Theme FLatsome:  Đường dẫn: Flatsome → Advanced → Global Settings

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

Đây là phần làm đẹp cho hiển thị màu sắc

Vào CSS bổ sung: và dán đoạn code bên dưới để hiển thị lượt xem trên web

.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;

}

Thành quả vừa làm sẽ hiển thị dạng thế này:

Code hiển thị lượt xem bài viết trên wordpress
Lưu ý: khi mới gắn xong tất cả bài viết bắt đầu là số 0 nhé

Đối viết bài viết blog thì đây đã hoàn thành rồi nhé. Nếu bạn muốn sản phẩm của Woocomece cũng hiển thị thì thêm một bưới này nhé.

Chỉ dành cho Sản phẩm bán hàng

Cách 1: Tìm file : theme\woocommerce\content-single-product.php thêm vào dòng 22 đoạn sau:

Dán:

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

Cách 2: theme\woocommerce\Single-product.php

Dán:

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

Xem thành quả nào.

Code hiển thị lượt xem bài viết trên wordpress
Lưu ý: khi mới gắn xong tất cả bài viết bắt đầu là số 0 nhé

Nói chung về phần này gắn cực kỳ đơn dễ, mang rằng chia sẻ nhỏ này sẽ giúp cho các bạn có thêm một hữu ích về web wordpress cùng anh em nhé.

Chúc bạn luôn thành công.

[bvlq_danh_muc]

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *