Hướng dẫn thêm thời gian đăng bài và số nhận xét vào tiện ích bài đăng phổ biến

Bạn muốn xem:

Trong bài viết trước mình đã hướng dẫn thay đổi kích thước ảnh tiện ích bài đăng phổ biến mà không làm ảnh bị mờ, hôm nay mình tiếp tục hướng dẫn cách thêm thời gian đăng bài và số nhận xét vào tiện ích này giúp cho tiện ích được nổi bật và chuyên nghiệp hơn.

Để thêm được thời gian và số nhận xét chúng ta không thể thêm trực tiếp vào tiện ích hay nói cách khác không thể chỉnh sửa được tiện ích bằng cách thêm id hoặc class trực tiếp vào tiện ích nhưng chúng ta có thể thêm javascript sử phương thức GET để thêm vào và khi load trang sẽ rự động thêm id hoặc class vào tiện ích. Khi bạn kiểm tra phần tử cấu trúc của tiện ích bạn sẽ thấy bố cục của tiện ích có dạng sau:

<div class="item-thumbnail-only">

    <div class="item-thumbnail"></div>

    <div class="item-title"></div>

</div>

Như vậy bạn cần thêm một thẻ div nữa nằm dưới thẻ div có class="item-title" (tiêu để bài đăng), viết đầy đủ sẽ có dạng sau:

<div class="item-thumbnail-only">

    <div class="item-thumbnail"></div>

    <div class="item-title"></div>

    <div class="item-meta"></div>

</div>

Trong đó  <div class="item-meta"></div> sẽ bao gồm class của thời gian và class của nhận xét, công việc chúng ta sẽ đi tìm 2 class này để ghép vào đoạn js

Bước 1: Tìm class của thời gian và class của nhận xét

Do mỗi temeplate có bố trí class khác nhau không đồng nhất do đó việc tìm class này cũng không đơn giản đối với những bạn không biết nhiều về bố cục. Một cách đơn giản nhất chúng ta sẽ dựa vào những thẻ data bắt buộc phải có với thời gian và số nhận xét đó là:

Với thời gian dựa vào hai thẻ sau:

<data:post.timestamp/> : hiển thị thời gian
 hoặc:
<data:post.dateHeader/> : hiển thị ngày

Với số nhận xét dựa vào thẻ sau:

<data:post.numComments/>

Như vậy chúng ta sẽ tìm kiếm thời gian hoặc ngày trong template, ví dụ chúng ta tìm kiếm <data:post.timestamp/> sẽ ra đoạn tương tự như hình bên dưới

Đoạn hiển thị thời gian được nằm trong thẻ span có class='post-timestamp'. Mẹo bạn có thể tìm class='published' thay thế cũng được vì đa số đoạn hiển thị thời gian cũng bao gồm class này.

Với số nhận xét ta đi tìm thẻ <data:post.numComments/>, chúng ta sẽ ra một đoạn ví dụ như sau:

Đoạn hiển thị thời gian trong hình trên sẽ có class='commentcount'

Bước 2: Thêm javascript vào trước thẻ đóng </body>

Đoạn mẫu js có dạng sau:

<script>

//<![CDATA[

$(".sidebar > .widget > h2").wrap("<div class='side-header'><div class='sidehead'/></div>");

$('.PopularPosts .widget-content ul li').each(function() {

  var $this = $(this),

    getPost = $this.find('.item-title a'),

    postURL = getPost.attr('href');

  $.ajax({

    url: postURL,

    type: "get",

    success: function(data) {

      var timeamp = $(data).find('class thời gian').text(),

      numcomments = $(data).find('class nhận xét').text();

      getPost.parent().after('<div class="item-meta">' + timeamp + numcomments + '</div>');

    }

  });

});

//]]>

</script>

Công việc chúng ta sẽ thêm class vào dòng chữ màu xanh (thời gian) và màu đỏ (số nhận xét), ví dụ:

<script>

//<![CDATA[

$(".sidebar > .widget > h2").wrap("<div class='side-header'><div class='sidehead'/></div>");

$('.PopularPosts .widget-content ul li').each(function() {

  var $this = $(this),

    getPost = $this.find('.item-title a'),

    postURL = getPost.attr('href');

  $.ajax({

    url: postURL,

    type: "get",

    success: function(data) {

      var timeamp = $(data).find('.post-timestamp').text(),

      numcomments = $(data).find('.commentcount').text();

      getPost.parent().after('<div class="item-meta">' + timeamp + '<i class="fa fa-circle" style="font-size:5px;vertical-align:middle;color:#333333;padding-left:2px;padding-right:2px;"></i>' + numcomments + ' ' + 'nhận xét' + '</div>');

    }

  });

});

//]]>

</script>

Khi thêm xong lưu temeplate lại sau đó truy cập Blog để kiểm tra thành quả nhé!

loading...

  

Loading...