Hướng dẫn đếm và hiển thị số lượt xem của sản phẩm trong theme Flatsome không dùng plugin

 Hiển thị lượt xem (views) thường phổ biến ở những trang web tin tức, blog,… Tuy nhiên WordPress lại không hỗ trợ sẵn phần này và nếu muốn có bạn phải cài thêm các plugin khác. Trong bài viết này mình sẽ giới thiệu đến bạn đếm lượt xem và hiển thị ra trong sản phẩm số view của sản phẩm đó mà không cần dùng đến plugin. Cụ thể trong bài này mình sẽ hướng dẫn các bạn làm trên theme Flatsome.

Thêm code đếm và hiển thị số lượt xem bài viết

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

	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 lu?t xem";
	}
	return $count.' lu?t xem';
	}
	// code dem luot 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 hien thi luot xem trong daskboard
	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());
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

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

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

view raw gistfile1.txt hosted with ❤ by GitHub

Bước 3: 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 );

view raw gistfile1.txt hosted with ❤ by GitHub

Bước 4: 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;
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Các bạn nhớ cài thêm Font Awesome vào nhé. Hướng dẫn tại đây.

Lưu ý là số lượt xem bài viết nó sẽ được đếm kể từ lúc các bạn thực hiện theo hướng dẫn này. Trước đó nếu có triệu view nó cũng không có đếm đâu.

Đồng thời trong trang quản lý bài viết các bạn cũng có thêm trường thông tin về số lượt xem bài viết nữa. Trong đoạn code đầu tiên mình có ghi chú là code để hiển thị số lượt xem trong Dashboard, bạn nào không cần thì xóa đoạn đó đi là được.


Chúc các bạn thành công!