Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tối ưu PageSpeed Insights
    • Cloud Cache (Tăng tốc web 1 giây)
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Tạo widget bài viết WordPress Popular Posts

Tạo widget bài viết WordPress Popular Posts

Chủ Nhật, 13/07/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Widget bài viết phổ biến là một tính năng phổ biến khá hữu ích với các blogger. Rất tiếc WordPress mặc định không hỗ, mà bạn tự viết lấy hoặc sử dụng plugin. Cả hai cách này mình sẽ trình bày trong bài viết này.
wordpress popular posts - hoangweb.com

Widget bài viết phổ biến (popular posts) không dùng plugin

Nguyên lý là tính lượt view của bài viết, tính phổ biến của bài viết dựa vào lượt hiển thị views. Khi vào bài viết chi tiết thì cộng thêm +1 view.

Thêm đoạn code sau vào theme functions.php

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 "0 View";
    }
    return $count.' Views';
}
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);
    }
}

– Thêm dòng sau vào single.php

while(have_posts()):the_post();
setPostViews(get_the_ID());
...
endwhile;

Ok, bây giờ lấy popular posts , bạn có thể sử dụng đoạn code sau để hiển thị trưc tiếp hoặc tạo widget.

< ?php
	query_posts('meta_key=post_views_count&orderby=meta_value_num&order=DESC');
	if (have_posts()) : while (have_posts()) : the_post(); ?>
	<li><a href="<?php the_permalink(); ?>">< ?php the_title(); ?></a></li>
	< ?php
	endwhile; endif;
	wp_reset_query();
?>

Hiển thị Popular posts với plugin wordpress-popular-posts

Với sự trợ giúp của plugin thì popular posts không còn là khó khăn nữa nhất đối với những ai không thông thạo về php. Vui lòng tải plugin ở tệp đính kèm bên dưới.
Sau khi active plugin, truy cập vào trang cài đặt: Settings->WordPress popular posts
Bạn có thể thống kê các bài viết phổ biến bởi người dùng truy cập cũng như thực hiện các lựa chọn cài đặt khác.

WordPress popular posts sinh ra widget cho phép kéo thả vào sidebar một cách dễ dàng.

wordpress popular posts widget
Điểm đặc biệt của plugin này là sử dụng HTML markup và biến hiển thị nội dung bài viết để hiển thị popular post như ý muốn.
wordpress popular posts widget -hoangweb.com

Ở trên hình bạn nhìn thấy có thẻ li và bên trong là placeholder tag để thay thế nội dung bài viết như tiêu đề, thumbnail…

Mình có chỉnh sửa thêm lựa chọn hàm callback “hoangweb-post-html-callback” nếu ai muốn sử dụng mã php để can thiệp nhiều hơn.

Thêm hàm callback vào functions.php, ở hình widget trên có khai báo hàm callback hw_popular_post_cb

< ?php
function hw_popular_post_cb($data){
	ob_start();
	static $new_row=1;
	static $cols=3;
	static $count=0;
 
	if($new_row){ echo '<div class="row-fluid">';$new_row=0;}
	?>
	<div class="product-wrapper span4" >
<div <?php post_class('product-block',$data['id']); ?> id="post-< ?php echo $data['id']?>">
			<div class="product-content">
				{thumb}
		<div class="product-info">
			<h4 class="product-name"><a href="{url}" title="{text_title}">{text_title}</a></h4>
				<div class="desc">{summary}</div>
																																				<div class="review"></div>
																																			<div class="contact">Liên hệ</div>
	<div class="actions">			                	
		<button type="button" title="Đặt mua" class="button btn-cart" onclick="setLocation(\'{url}\')"><span><span>Đặt mua</span></span></button>
																																					</div>
																						</div>	
	< ?php //edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '' ); ?>
									</div>
</div>
</div>
	< ?php
	if(++$count==$cols){ echo '</div>';$count=0;$new_row=1;}
	if($data['is_end_post'] && !$new_row) echo '';
 
	$cont=ob_get_contents();
	ob_end_clean();
	return $cont;
}
?>

Ngoài ra có thể sử dụng widget ngoài để hiển thị popular posts. Đặt đoạn code này vào nơi muốn hiển thị

the_widget('WordpressPopularPosts',array(
	'thumbnail'=>array(
		'active'=>'1',
		'width'=>'150',
		'height'=>'150',
		'class'=>'',
		'link_class'=>'product-image'
	),
	'markup'=>array(
		'custom_html'=>'on',
		'post-html-callback'=>'hw_popular_post_cb',
		//'template'=>''
		//'post_html'=>'<div id="pop-link"><div id="pop-thumb">{thumb}</div><div id="pop-title"><a href="{url}">{text_title}</a></div></div>',
		//'title_length'=>50,
		'order_by'=>'views',
		'limit'=>get_option('posts_per_page'),
		'post-start'=>'',//
		'post-end'=>'',//
		'wpp-start'=>'',
		'wpp-end'=>'',
		'title-start'=>'',
		'title-end'=>''
	)));

Ok, vậy là đã xong. Chúc bạn thành công.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Hiển thị widgets cho từng trang trong wordpress
  2. Tùy biến ẩn hiện widgets sidebar trong wordpress – phần 2
  3. Lấy dữ liệu widgets đã đăng ký trên sidebar trong wordpress
  4. Tùy biến sidebar widget params thêm class chỉ số đếm cho widget – WordPress
  5. Hướng dẫn tạo mới widget trong wordpress
  6. Thêm custom fields vào mọi wordpress widgets
  7. Tăng tốc wordpress với WP Super Cache – Cài đặt và Cấu hình
  8. Chèn quảng cáo adsence vào bài viết trong wordpress
  9. Cách xóa sản phẩm liên quan trong woocommerce
  10. Thay đổi tiêu đề nút add to cart trong woocommerce

Chuyên mục: Wordpress Tìm kiếm: wordpress widget

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.