Tạo cách trình bày tin mới nhất lên trên và tin khác nằm dưới

Do có 1 anh hỏi mình về vấn đề làm sao để tạo được chuyên mục tin dạng như hình demo sau thì bữa nay mình sẽ thực hiện hướng dẫn để các bạn có thể thực hiện được theo một cách dễ dàng nhất. Cách này cũng không có gì khó, chủ yếu can thiệp một chút vào php với một số quy luật nhất định cùng với cách sắp xếp thẻ html sao cho hợp lý là ra kết quả như mong muốn.

main-right-top-hot

Mình thực hiện trên mã nguồn mở NukeViet vì thế bạn nào dùng NukeViet dễ hiểu hơn chút vì code cũng thoáng hơn chứ ko rối rắm đóng mở thẻ php.

Lưu ý: ở đây là mình copy file theme.php của module news sang thư mục news của themes thay vì ở trong module vì vấn đề sau này có nâng cấp nó cũng không tèo luôn file theme.php này. Sau đó thì mình chỉ tiến hành sửa file theme.php trong thư mục news của theme đang dùng mà thôi vì nó ưu tiên trước nếu không có nó mới quay về theme.php của module

Đầu tiên bạn cần tìm tới function:


function viewsubcat_main($viewcat, $array_cat)

Bạn kéo xuống dòng 379 có nội dung là “$a = 0;” bạn thêm vào sau nó thẻ biến sau


$_first = true;

Tiếp đến bạn tìm tới dòng


$xtpl->assign('OTHER', $array_row_i);
if ($module_config[$module_name]['showtooltip']) {
    $xtpl->parse('main.listcat.related.loop.tooltip');
}
$xtpl->parse('main.listcat.related.loop');

Bạn thay nó bằng đoạn mã sau


if ($_first) {
  $_first = false;

  $xtpl -> assign('OTHER', $array_row_i);

  if ($array_row_i['imghome'] != "") {
   $xtpl->assign('OTHER_HOMEIMG', $array_row_i['imghome']);
   $xtpl->assign('OTHER_HOMEIMGALT', ! empty($array_row_i['homeimgalt']) ? $array_row_i['homeimgalt'] :    $array_row_i['title']);
  }
}
else
{
  $xtpl -> assign('OTHER_LIST', $array_row_i);

  if ($module_config[$module_name]['showtooltip']) {
   $xtpl->parse('main.listcat.related.loop.tooltip');
  }
 $xtpl->parse('main.listcat.related.loop');
}

Ỹ nghĩa của việc thay kia đó là mình điều kiện cho biến $_first nếu tồn tại thì thực hiện tạo ảnh thumbnail cho tin đầu tiên trong danh sách tin bên trái của main-right và gán nó sang biến khác để thực hiện hiển thị và ngược lại là các tin tiếp theo hiển thị như bình thường trừ tin vừa kiểm tra ra để không bị lặp lại.

Tiếp theo bạn cần tiến hành thay thế các thẻ html sao cho đúng thì nó mới thực hiện hiển thị

Bạn mở file viewcat_main_right.tpl và tìm tới thẻ “<div class=”col-md-8″>”

Thêm vào dưới thẻ đó mã lệnh sau


<div class="feature-1">
<a class="thumbs img_80_45" href="{OTHER.link}" title="{OTHER.title}">
  <img src="{OTHER_HOMEIMG}" alt="{OTHER_HOMEIMGALT}" width="{IMGWIDTH}" />
</a>
<a href="{OTHER.link}" title="{OTHER.title}">
  {OTHER.title}
</a>
</div>

Tiếp đến bạn tìm tới


<a class="show h4" href="{OTHER.link}" title="{OTHER.title}" <!-- BEGIN: tooltip -->data-content="{OTHER.hometext}" data-img="{OTHER.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip -->>{OTHER.title}</a>

Thay bằng mã lệnh sau


<a href="{OTHER_LIST.link}" title="{OTHER_LIST.title}" <!-- BEGIN: tooltip -->data-content="{OTHER_LIST.hometext}" data-img="{OTHER_LIST.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip -->>{OTHER_LIST.title}</a>

Mọi thắc mắc các bạn có thể để lại bình luận để mọi người có thể theo dõi và cùng chia sẻ hướng giải quyết

6 comment on “Tạo cách trình bày tin mới nhất lên trên và tin khác nằm dưới

  1. Mạnh Huy viết:

    Em cám ơn anh em làm được rồi, tuy nhiên tại sao ảnh hiển thị lại không đầy đủ hoặc qua mờ vậy?
    Xin anh chỉ giúp
    Tiện đây em nếu được cho e xin block hiển thị tin theo groups các tin hiển thị theo chiều ngang được không ạ?

    1. Thịnh Nguyễn viết:

      Đó là do vấn đề ở ảnh thumbnail vì thế bạn cần thiết lập cho nó theo cách này: https://thinhweb.com/huong-dan-cach-tao-anh-thumbnail-cho-website-su-dung-nukeviet/

  2. Mạnh Huy viết:

    Các tin ở bên phải thì tin đầu tiên có hình và tiêu đề, còn các tin sau đó thì không hiển thị ạ. Anh xem lại dùm được không ạ

    1. Thịnh Nguyễn viết:

      mình kiểm tra rồi, hoàn toàn bình thường, vì code này mình làm site tin tức theo báo tuổi trẻ. Bạn cần xem thiết lập chuyên mục hiển thị bao nhiêu tin nhé, đặt lại cho phù hợp

  3. Mạnh Huy viết:

    Anh ơi, bài viết rất hay. Tin dầu tiên có ra hình và tiêu đề. Tuy nhiên các tin liên quan ở dưới thì không hiển thị ạ
    anh kiểm tra dùm em ạ
    em cám ơn

    1. Thịnh Nguyễn viết:

      bài này là mình làm hướng dãn tin mới có hình còn tin khác không có hình, tối mình cập nhật bài khác có hình hết cho bạn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back To Top