Hướng dẫn thêm icon Hot, New cho WordPress

Hướng dẫn thêm icon Hot, New cho WordPress.

Chào các bạn mình là Phước hay lấy “níc nêm” là Phước Đt. Đây là bài cộng tác đầu tiên của mình trên blog WP Căn bản. Nói thật là mình mới tập tọe viết blog được mấy bữa thôi, kiến thức thì cũng không có nhiều nhưng mình sẽ cố gắng chia sẻ những cái mà mình biết cho những bạn chưa biết, mong các bạn ủng hộ mình nhé. :D

Giới thiệu qua một tí thế thôi, bây giờ, mình sẽ hướng dẫn cho các bạn cách thêm icon “Hot” cho những bài viết có nhiều lượt xem nhất và thêm icon “New” cho những bài viết mới nhất trong WordPress themes. Tác dụng của nó: ngoài việc tăng độ thẩm mỹ, tính chuyên nghiệp cho website của bạn thì còn giúp điều hướng, kích thích người dùng xem thêm bài viết, giúp giảm tỉ lệ thoát và nhờ đó các công cụ tìm kiếm sẽ đánh giá cao chất lượng của website bạn hơn. Hiện tại mình đang áp dụng cho site yeualo.com của mình và thấy rất hiệu quả.

Code thì cũng khá đơn giản thôi, biết một tí về php sẽ làm được, thậm chí không biết gì như mình mà tự mày mò lâu cũng thành được. :D Bạn chỉ cần thêm một số đoạn code như: $countnew = 0; , $countnew++; và <?php if( $countnew <= 3 ) { ?><img src=”<?php bloginfo(‘template_directory’); ?>/images/yeualo-new-28×11.gif” alt=”Mới”><?php } ?> vào chỗ bài viết mới nhất hoặc bài viết có nhiều lượt xem nhất. Bạn có thể xem đoạn code dưới rồi tự sửa hay copy dán vào theme đang dùng luôn .

Code hiển thị icon New cho 3 bài viết mới nhất:

<div id="column1">
<div class="title">
<span class="box-tow">Mới nhất</span><span class="box"></span>
</div>
<div class="popular-posts">
<ul class="listxn">
<?php $countnew = 0; query_posts('post_type=post&meta_key=post_views_count&posts_per_page=8&ignore_sticky_posts=false&orderby=DESC');
while(have_posts()) : the_post(); $countnew++; ?>
<li class="item"> <a class="tittle" href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?> <?php if( $countnew <= 3 ) { ?><img src="<?php bloginfo('template_directory'); ?>/images/yeualo-new-28x11.gif" alt="Mới"><?php } ?></a></li>
<?php endwhile;
wp_reset_query();
?>
</ul>
</div>
</div>

Code hiển thị icon Hot cho 3 bài viết hot nhất:

<div id="column1">
<div class="title">
<span class="box-tow">Xem nhiều</span><span class="box"></span>
</div>
<div class="popular-posts">
<ul class="listxn">
<?php $countnew = 0; query_posts('post_type=post&meta_key=post_views_count&posts_per_page=8&ignore_sticky_posts=false&orderby=meta_value_num');
while(have_posts()) : the_post(); $countnew++; ?>
<li class="item"> <a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?> <?php if( $countnew <= 3 ) { ?><img src="<?php bloginfo('template_directory'); ?>/images/yeualo-hot-26x9.gif" alt="Hot"><?php } ?></a></li>
<?php endwhile;
wp_reset_query();
?>
</ul>
</div>
</div>

Lưu ý: Các bạn cần phải sửa đường dẫn của icon Hot, New lại cho nó đúng với theme đang dùng, sửa lại css. Thay số 3 trong đoạn $countnew <= 3 thành số bài viết bạn muốn hiển thị icon (ở đây mình thích số 3 nên mình chọn số 3). :D

Thế thôi, tuy bài viết đơn giản, ngắn gọn nhưng mình đã phải rất là cố gắng rồi đó. Nếu các bạn thấy hay và hữu ích thì ấn nút like và nút share, à nhầm, ấn nút share và vote 3 sao để ủng hộ WP Căn bản nhá. :D À mà chắc có nhiều bạn đang thắc mắc là tại vì sao mình bảo vote 3 phải không? Đơn giản lắm, tại vì mình thích số 3, số 3 may mắn. ;)

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)