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. :)
Phước ĐT là viết tắt của Phước Điện Thoại hay Phước Dâm Tặc vậy Phước :) hehehehehe
Bài viết khá chi tiết rồi và ý tưởng hay đấy, cho nó thành widget hay plugin luôn đi cho máu :)
Tất cả đều sai. Là Phước Đê Tiện. :D :P
Cảm ơn Ngọc đã góp ý nhá. Mình sẽ cố gắng. Phước Đt là viết tắt của Phước Đẹp Trai, Phước Đa Tình… chứ không phải là Phước Dâm Tặc hay là Phước Đê Tiện như bạn Hiếu nói đâu :D .
Không hiểu sao nhưng cá nhân mình vẫn thích Phước Đê Tiện hơn. :P Có thời gian thì viết thêm vài bài nữa đi. :D
Mình tốt lắm, mình hiền lắm chứ không “đê tiện” như Hiếu nghĩ đâu. Mà chắc là tại mình thích “số 3 may mắn” nên Hiếu mới xuyên tạc cái tên của mình thế :D .
Uhm. mình sẽ cố gắng nhưng hơi lâu chứ không nhanh như Hiếu với Jamviet đâu.
Phải “nặn” ra ý tưởng càng nhanh càng tốt chứ. :D :P
Ờ. Nhưng mà phải rảnh ra tí đã chứ. Công nhận Hiếu củng rảnh phết đấy. Ngày nào cũng có bài mới cả. Như mình nhiều lúc phải 2 – 3 ngày mới có thể vào site của mình một lần ấy chứ. Còn fb thì nhiều khi một tuần vào một lần :D .
Freelancer nên lúc nào chả rảnh. :D Muốn làm lúc nào cũng được. :P
Gửi Admin,
Cho mình hỏi css của đoạn trên là gì đc ko? Mình đang muốn hiển thị icon New sau mỗi 3 bài viết mới nhất, mình có copy đoạn code trên của Admin nhưng nó ko hoạt động.
Mình add vào function.php, index.php, page.php, archive.php, footer.php… của theme (CologMag) đều ko đc.
Ko biết Admin có thể viết cho mình cái css hiển thị ngay sau title đc ko ạ? Chân thành cảm ơn