Để tạo một website tin tức với mã nguồn WordPress, có rất nhiều theme hỗ trợ, ngoài Flatsome nổi tiếng, còn một theme đang được sử dụng rộng rãi hiện nay để làm trang tin tức, đó là jNews. Bài viết này sẽ hướng dẫn thiết kế trang chủ tin tức sử dụng theme jNews.

Để bắt đầu, tạm xem như việc cài đặt WordPress và tích hợp theme jNews đã được thực hiện.

Sau đây chúng ta sẽ bắt đầu thiết kế trang tin tức có giao diện như vanhoadulich.net dưới đây:

Về bố cục, gồm 2 phần chính:

  • Main (bên trái)
    • Dòng tin tức mới nhất phía trên cùng
    • Block hiển thị 5 tin mới nhất
    • Block quảng cáo
    • Các block thuộc các nhóm chuyên mục khác
  • Sidebar (bên phải)
    • Tab: Xem nhiều, mới nhất
    • Block tin mới nhất
    • Block quảng cáo

Bước 1: Tạo trang chủ trang tin tức sử dụng theme JNews

Từ cửa sổ quản trị, chọn Trang –> Thêm trang mới, đặt tên là Trang chủ.

Bước 2: Thiết lập Trang chủ sẽ là trang hiển thị đầu tiên của website

Từ phần Giao diện –> Tùy biến, tiếp theo chọn Cài đặt trang chủ –> Trang chủ (như hình dưới đây)

Thiết lập trang chủ

Sau đó nhấn chọn Đăng để hoàn tất quá trình thiết lập trang chủ.

Bước 3: Thiết kế bố cục trang chủ

Vào phần quản trị, chọn Trang, lựa chọn Trang chủ và chọn Sửa (như hình dưới đây)

Cửa sổ tiếp theo: Tìm đến block WPbakery Page Buider để tiến hành thiết kế. Lưu ý: Chúng ta có thể thiết lập bố cục ngay ngoài trang chủ mà không cần thiết phải vào phần quản trị để thiết lập.

Tiếp theo, chọn Add Element. Chúng ta sẽ thiết kế bố cục gồm 2 cột

  1. Cột bên trái, chiếm diện tích nhiều hơn, dành cho việc thiết kế nội dung
  2. Cột bên phải, dành cho việc thiết kế sidebar (tin mới nhất, quảng cáo, các tab …)

Di chuyển chuột đến biểu tượng Custom như hình dưới đây, sau đó tìm và chọn bố cục 2 phần

Bây giờ, chúng ta sẽ thiết kế nội dung cho các cột.

Thiết kế bố cục cột bên phải trang tin tức jNews

Cột bên phải, thiết kế Sidebar, gồm block Tab dành cho tin mới, tin xem nhiều; block tin mới nhất, block quảng cáo …

Cách thực hiện:

Nhấn chuột vào dấu + phần bên trái Sidebar, xuất hiện hộp thoại Add Element, nhập hộp tìm kiếm từ khóa Tab post, chúng ta thấy một module JNews – Tab Post Widget như dưới đây:

Sau khi nhấn chọn để thêm, xuất hiện cửa sổ cài đặt thuộc tính, chúng ta chỉ việc nhấn Save changes để lưu. Mọi giá trị mặc định không cần phải thay đổi. Nếu muốn thay đổi số tin hiển thị, chọn trong phần Total Limit post như dưới đây:

Bước tiếp theo, cài đặt danh sách tin mới nhất (Latest Post), chọn thêm một module mới, và tìm module 19 như hình dưới đây:

Cửa sổ tiếp theo, chọn tab Content Filter, phần Sort by, chọn Latest Post. Sau đó nhấn Save Changes

Cột bên trái trang tin tức jNews

Gồm các module

  • Dòng marquee hiển thị tin tức mới nhất
  • Block tin tức mới nhất (5 tin)
  • Block ảnh quảng cáo
  • Block các chuyên mục …

Cách thực hiện:

Nhấn vào thêm element (dấu + ) phần bên phải, sau đó:

Nhập tìn module JNews Ticker, sau đó chọn để thêm vào phần thiết kế.

Tại bước kế tiếp, nhập Bài mới vào phần News Ticker Title trong tab General

Tab Content Filter, chọn Bài viết, sau đó chọn Save changes để lưu thiết lập

Phần hiển thị block 5 tin mới nhất. Chọn Add element, chọn module 2

Trong phần thiết lập thuộc tính, để mặc định và Save changes. Chúng ta có thể lựa chọn những chuyên mục sẽ xuất hiện, những chuyên mục nào không xuất hiện như hình dưới đây:

Phần còn lại, thiết kế các module hiển thị cho các nhóm chuyên mục.

Nhấn chọn Add Element, chọn JNews – Module xx (xx là số thứ tự) hiển thị theo ý thích

Tab Header, đặt tên cho Chuyên mục trong phần Second Title

Tab Content Filter, chọn chuyên mục cần hiển thị trong phần Include Category

Tiếp tục tiến hành thiết kế cho các block chuyên mục còn lại. Sau khi thiết kế xong, kết quả tạm thời như sau:

Đến đây, nhấn vào Update ở góc trên bên phải để hoàn thành thiết kế bố cục cho trang chủ.

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 *