Hướng dẫn tạo Widget bài viết ngẫu nhiên từ ảnh thumbnail

randomBài viết sau đây mình xin hướng dẫn các bạn cách để tạo ra 1 widget hiển thị danh sách các bài viết ngẫu nhiên trên blog WordPress. Có 1 số plugins có thể hỗ trợ cho bạn chức năng này nhưng giả dụ bạn không thích dùng plugin, hoặc thích tạo ra sự khác biệt cho Website của mình, thủ thuật nhỏ dưới đây sẽ giúp bạn tạo ra 1 danh sách những bài viết ngẫu nhiến bao gồm các mục như: hình ảnh thumnail, tiêu đề của bài viết, ngày xuất bản và số lượng bình luận trên mỗi bài viết.

Tạo Widget trong WordPress như thế nào?

Trước tiên, chúng ta cần tạo ra 1 widget. Đây là cách chung để đăng ký thêm một widget bổ sung vào danh sách các widget được tạo sẳn. Ta sử dùng đoạn code nhỏ sau thêm vào file functions.php:

class my_widget extends WP_Widget
{
  function my_widget()
  {
    $widget_ops = array(
          'classname' => 'my_widget', 
          'description' => 'Hiển thị bài viết ngẫu nhiên' );
    $this->WP_Widget('my_widget', 'Random Post', $widget_ops);
  }
  function form($instance)
  {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
  }
  function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }
  function widget($args, $instance)
  {
    extract($args, EXTR_SKIP);
    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
    if (!empty($title))
      echo $before_title . $title . $after_title;;
 
    // CODE CỦA WIDGET ĐẶT Ở ĐÂY
 
    echo $after_widget;
  } 
}
add_action( 'widgets_init', create_function('', 'return register_widget("my_widget");') );

Ở đây mình đã tạo sẵn một widget có tên là Random post. Bạn có thể sử dụng đến đoạn code trên để tạo ra nhiều những widget khác có tên bất kì. Tiếp theo sau đó, bạn vào Appearance => Widgets bạn sẽ thấy có thêm 1 widget với tên là Random post và bạn có thể kéo vào 1 vị trí trên sidebar để hiển thị ra bên ngoại trừ nhưng chỉ mới là 1 widget trắng.

Code bài viết ngẫu nhiên

Bây giờ chúng ta sẽ bổ sung thêm một đoạn code nhỏ bên dưới vào vị trí mà chúng ta đã đánh dấu trong đoạn code ở bên trên để tạo ra một widget random post hoàn chỉnh.

query_posts('posts_per_page=5&orderby=rand');
    if (have_posts()) : 
        echo '<ul class="random">';
        while (have_posts()) : the_post(); 
            echo '<li><div class="imgthum">';
            echo the_post_thumbnail(array(50,50));
            echo '</div><div class="titlerandom"><a href="'.get_permalink().'">'.get_the_title();
            echo '</a><br>'.get_the_date().' - '.get_comments_number().' comment';//.do_shortcode("<span class="date published time" title="2013-06-15T20:59:59+00:00">15/06/2013</span> ");
            echo "</div></li>"; 
        endwhile;
        echo "<li></li></ul>";
    endif; 
    wp_reset_query();

Với đoạn code ở trên thì số bài viết hiển thị ra bên ngoài index là 5, và kích thước ảnh thumbnail cho từng bài viết là 50 x 50. Nếu bạn không ưng ý, có thể thay đổi tùy theo ý muốn cá nhân. Ở đây chúng ta đã sử dụng một số hàm quen thuộc như:

  • he_post_thumbnail(): Hàm cho phép lấy ảnh thumnail từ bài viết.
  • get_the_date(): Hiển thị ngày xuất bản bài viết.
  • get_comments_number(): Thống kê số lượt bình luận trên mỗi bài viết.

Các hàm trên không bắt buộc bạn dung đến khi không muốn hiển thị như trên.
Cuối cùng chúng ta sẽ bổ sung một số lớp css cho vào file style.css để thiết kế cho widget vừa tạo trông đẹp mắt hơn.

.random {
    border: 1px solid #996600;
    padding: 5px;
    margin: 0px !important;
}
.random li{
    list-style: none !important;
    clear: both;
    padding: 5px;
}
.imgthum {
    border: 1px #000 solid;
    width: 50px; height: 50px;
    float: left;
    margin: 2px 8px;
    padding: 3px;
}
.titlerandom {
}

Bạn cũng cần lưu ý, để tạo ảnh thumnail cho mỗi bài viết thì khi bạn bắt buộc Set featured image cho bài viết trong quá trình soạn thảo nội dung.
Song song đó, sẽ có trường hợp bạn ko thích hiển thị bài viết trùng hợp ở khu vực widget, bạn có thể sử dụng code trên chèn vào vị trí bất kì mà bạn muốn nó hiể thị trên theme của bạn. Chẳng hạn như ở đây Tuấn Anh muốn hiển thị danh sách bài viết Random ở cuối mỗi bài viết trong các website sử dụng Genesis childtheme mình sẽ sử dụng đến dòng code:

add_action('genesis_after_post_content','rayno_random_post');
function rayno_random_post() {
    query_posts('posts_per_page = 5 & orderby = rand');
    if (have_posts()) : 
        echo '<ul class="random">';
        while (have_posts()) : the_post(); 
            echo '<li><div class="imgthum">';
            echo the_post_thumbnail(array(50,50));
            echo '</div><div class="titlerandom"><a href="'.get_permalink().'">'.get_the_title();
            echo '</a><br>'.get_the_date().' - '.get_comments_number().' comment';//.do_shortcode("<span class="date published time" title="2013-06-15T20:59:59+00:00">15/06/2013</span> ");
            echo "</div></li>"; 
        endwhile;
        echo "<li></li></ul>";
    endif; 
    wp_reset_query();
}

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

Bạn đang xem bài viết Hướng dẫn tạo Widget bài viết ngẫu nhiên từ ảnh thumbnail

Add Comment