Tùy biến TOP Commentors như NhanWeb

Bài viết này thực hiện theo yêu cầu của bạn CAA đã yêu cầu. Trong khuôn khổ bài viết NhanWeb không thể nói hết việc tùy biến Top Commentors được nên xin giới thiệu với các bạn một số tùy biến mà mình thấy có ích đối với các bạn nhiều nhất. Phần tùy biến khác cái này các bạn tự sướng hoặc cứ đưa câu hỏi lên để mình giải quyết nhé.

Việc đầu tiên trong quá trình chỉnh sửa là bạn phải có plugin trước đã. Phiên bản mới nhất đến thời điểm này là phiên bản 1.4.2, để download plugin này, bạn sử dụng liên kết này: Top Commentators Widget 1.4.2. Nếu các bạn sử dụng plugin nào khác thì không cần quan tâm đến bài viết này nhé :)

Do cấu trúc của plugin này có vẻ hơi khác so với yêu cầu chỉnh sửa của chúng ta nên việc trình bày đôi lúc sẽ không như ý muốn. Nếu các bạn có ý muốn trình bày plugin này như NhanWeb thì các bạn có thể sử dụng những chỉnh sửa dưới đây mà mình sẽ đề cập.

Yêu cầu chỉnh sửa plugin Top Commentators Widget

Mình muốn trình bày plugin này theo cách hiển thị của Top chém gió hiện tại mà NhanWeb sử dụng. Để trực quan hơn xin mời các bạn xem hình ảnh dưới đây:

Nghĩa là:

1. Top Commentors được sắp xếp theo hàng dọc
2. Thông tin đầu tiên hiển thị là hình ảnh đại diện (avatar), nếu có liên kết thì chèn liên kết.
3. Thông tin tiếp theo hiển thị là số comments của commentors trong tháng và được xuống dòng, không bao gồm liên kết.

Đó là những gì chúng ta muốn…

Tùy biến Top Commentors theo yêu cầu của mình

Với những thông tin như mình đã mô tả ở trên, chúng ta tiến hành chình sửa trong file topcommentators_widget.php như sau:

Đầu tiên bạn cần tìm đoạn mã sau :

[php] if(trim($url) != ”) {
// start makelink check
if($makeLink == 1) {
$writeList .= "<a href=’" . $url . "’";
if($noFollow == 1)
$writeList .= " rel=’nofollow’";
if($targetBlank == 1)
$writeList .= " target=’_blank’";
$writeList .= ">";
} // end makelink check
}
[/php]

Thay nó bằng :

[php] /* Removed by Nguyen Duy Nhan – www.nhanweb.com
if(trim($url) != ”) {
// start makelink check
if($makeLink == 1) {
$writeList .= "<a href=’" . $url . "’";
if($noFollow == 1)
$writeList .= " rel=’nofollow’";
if($targetBlank == 1)
$writeList .= " target=’_blank’";
$writeList .= ">";
} // end makelink check
}
End removed by Nguyen Duy Nhan – www.nhanweb.com */
[/php]

Mình muốn hủy đoạn mã này vì mặc định nó sẽ lôi cái tên của commentors ra đầu tiên thay vì hình ảnh.

Công việc tiếp theo bạn tìm đoạn mã dưới đây:

[php] if($alignAward==1)
$writeList .= $strDisplayAward;
if(strlen($k->comment_author) > $limitChar) {
$str = substr($k->comment_author, 0, $limitChar-3) . "…";
} else {
$str = $k->comment_author;
}
$writeList .= $str;
if($showCount == 1)
$writeList .= ‘ (‘ . $nCommentComments . ‘)’;
if(trim($url) != ”) {
if($makeLink == 1)
$writeList .= "</a>";
}

[/php]

Tiếp tục thay nó bằng
[php] /* Removed by Nguyen Duy Nhan

if($alignAward==1)
$writeList .= $strDisplayAward;
if(strlen($k->comment_author) > $limitChar) {
$str = substr($k->comment_author, 0, $limitChar-3) . "…";
} else {
$str = $k->comment_author;
}
$writeList .= $str;
if($showCount == 1)
$writeList .= ‘ (‘ . $nCommentComments . ‘)’;
if(trim($url) != ”) {
if($makeLink == 1)
$writeList .= "</a>";
}

End remove */
/* Added by Nguyen Duy Nhan – www.nhanweb.com */
$writeList .= "<div class=\"topcommentators_infor\">";
if(trim($url) != ”) {
// start makelink check
if($makeLink == 1) {
$writeList .= "<a href=’" . $url . "’";
if($noFollow == 1)
$writeList .= " rel=’nofollow’";
if($targetBlank == 1)
$writeList .= " target=’_blank’";
$writeList .= ">";
if($alignAward==1)
$writeList .= $strDisplayAward;
if(strlen($k->comment_author) > $limitChar) {
$str = substr($k->comment_author, 0, $limitChar-3) . "…";
} else {
$str = $k->comment_author;
}
$writeList .= $str;

if(trim($url) != ”) {
if($makeLink == 1)
$writeList .= "</a>";
}
if($showCount == 1)
$writeList .= "<br /><span class=\"topcommentators_total\">" . $nCommentComments ."</span> comments.";
/* new added by Nguyen Duy Nhan*/

$writeList .="</div>";
} // end makelink check
}
/* End added by Nguyen Duy Nhan – www.nhanweb.com */
[/php]

Cũng là một lệnh hủy lệnh thực thi ở đoạn mã trên. Công việc này nhằm dọn dẹp tất cả những thứ hiện ra bên ngoài để mình có thể dễ dàng tùy biến theo ý mình. Sau đó mình lập trình lại cách hiển thị tương ứng với yêu cầu của mình đồng thời bổ sung thêm 1 số thẻ div và class để thuận tiện khi tùy chỉnh CSS của giao diện.

Bạn tiếp tục tìm

[php] if($alignAward == 2)
$writeList .= $strDisplayAward;
$writeList .= "</li>\n";
</pre>

Trong dòng bạn sẽ thấy
<pre lang="php">
$writeList .= "</li>\n";
[/php]

Chúng ta thay đoạn mã trên bằng
[php] //Added by Nguyen Duy Nhan – www.nhanweb.com
$writeList .= "<br clear=\"all\" /></li>\n";
//End new added by Nguyen Duy Nhan – www.nhanweb.com
[/php]

Mình muốn bổ sung
nhằm xóa sổ các tàn tích còn lại của các định dạng CSS trước đó để khi hiện ra sẽ đẹp hơn.

Cuối cùng là save lại và upload lên thay thế cho file cũ.

Cuối cùng là việc tùy biến CSS lại là được rồi.

Bonus: tùy chỉnh CSS cho Top Commentors dạng cột

Đây là đoạn mã CSS mà mình đang sử dụng, có lẽ sẽ có ích cho các bạn. Bạn chỉ việc gán nó vào file CSS của giao diện hiện tại là được:

[css] /* Top comment widgets */
ul.topcommentators, ol.topcommentators{
list-style:none;
margin:5px;
padding:0;
}
.topcommentators li{
display:block;
}
img.tcwGravatar{border: 1px solid #DDDDDD; float:left; padding:5px;}
img.tcwGravatar:hover {border: 1px solid #EBEBEB;}
.topcommentators_infor{
margin-left:65px;
}
.topcommentators_total{ font-weight:bold;}
.topcommentators_infor a{
font-weight:bold;
}
[/css]

Lưu ý

Nếu việc chỉnh sửa đối với bạn quá khó khăn do bạn không rành code php cũng như không hiểu cấu trúc một plugin của WordPress, mình có một lựa chọn dễ dàng hơn cho bạn: download plugin này (đã được mình chỉnh sửa sẵn) theo liên kết được mình đính kèm bên dưới về là có thể sử dụng. Dĩ nhiên bạn phải thêm đoạn CSS vào file style.css của theme đang dùng. Việc này không thể làm thay được bạn rồi :)

Link download: Top Commentors Widget dạng cột chỉnh sửa bởi Nguyễn Duy Nhân

Hi vọng các bạn thích thủ thuật WordPress này.