Hướng dẫn từng section • WordPress Blog/News

Tạo website WP dạng Blog/News trên Hostinger

Tài liệu trực quan hoá từ GUIDE.MD: đi từ khởi tạo website WordPress, cài theme Flatsome, hiểu cấu trúc Header/Body/Footer, đến thiết lập menu, trang chủ, danh mục bài viết và style tổng thể.

Bắt đầu hướng dẫn Xem checklist hoàn thiện
Bước 01

Tạo website WordPress trên Hostinger

Khởi tạo nền tảng trước, nhưng chưa cần chọn theme theo trình tự mặc định.

01

Chạy trình tạo WordPress

  • Vào Hostinger và bắt đầu trình tạo website WordPress.
  • Điền các thông tin cần thiết cho website.
  • Khi đến bước thiết lập theme, quay về trang quản trị để tự cài theme theo hướng dẫn bên dưới.
Mục tiêu: có website WordPress sạch để chủ động cài theme Flatsome.
Bước 02

Cài theme Flatsome

Theme Flatsome dùng UX Builder, phù hợp để dựng nhanh layout blog/news bằng kéo thả.

02

Upload và kích hoạt theme

  1. Vào Giao diện → Thêm giao diện → Tải giao diện lên.
  2. Chọn file theme Flatsome được cung cấp và bấm kích hoạt.
  3. Thực hiện trình setup: Let go → Tiếp tục → Create & use → Skip → Skip → Upload logo.
Theme sẽ được cung cấp miễn phí theo tài liệu gốc.
Bước 03

Hiểu cấu trúc layout Flatsome

Website được chia thành Header, Body và Footer. Khi hiểu đúng cấu trúc, việc chỉnh giao diện sẽ nhanh và ít lỗi hơn.

H Header

Có 3 dòng, các element có thể kéo thả. Logo có sẵn 2 vị trí. Hover vào từng dòng để bấm biểu tượng bánh răng và chỉnh màu sắc, chiều cao, màu chữ.

B Body

Khu vực nội dung chính, có thể gồm main content và sidebar. Với blog/news thường dùng các element như Image, Title, Text, Row, Blog Post.

F Footer

Tạo Footer bằng UX Block, sau đó gán block này vào Custom Footer trong phần Sửa giao diện.

Mở video tổng quan layout Flatsome trong tab mới →
03A

Tuỳ chỉnh Header

  • Bấm Sửa giao diện để bắt đầu chỉnh layout.
  • Element nào cũng có thể bấm trực tiếp để chỉnh màu sắc, style, nội dung.
  • Dòng header nào không có nội dung thì tự ẩn đi.
03B

Tạo Footer bằng UX Block

  • Vào Admin → UX Blocks → Add New.
  • Tạo block mới tên là footer.
  • Quay về trang chủ → Sửa giao diện → Footer → Custom Footer và chọn block footer vừa tạo.
  • Tuỳ chỉnh Absolute Footer: màu nền, màu chữ, nội dung.
  • Làm quen với UX Builder và các element thường gặp: Section, Row, Text, Image, Follow Icon.
Bước 05

Thiết lập danh mục và bài viết

Cấu hình layout blog/news để danh mục, archive và bài viết đơn đồng nhất, dễ đọc, phù hợp kiểu báo/tin tức.

Setting Blog Layout

  • Blog Sidebar: No Sidebar
  • Posts Layout: Two Col / Three Col / List
  • Posts Layout Type: Row
  • Posts Title Align: Left

Setting Blog Archive

  • Bỏ tích Enable Blog Archive Title hoặc giữ lại nếu cần.
  • Posts Layout: Two Col / Three Col / List

Setting Blog Single Post

  • Blog Post Single Layout: No Sidebar
  • Title Layout: tuỳ sở thích.
  • Khuyên bỏ Hình ảnh nổi bật và Hộp tác giả blog.
  • Các phần còn lại tuỳ nhu cầu.
Bước 06

Style, custom và font

Sau khi layout chính đã ổn định, tinh chỉnh nhận diện thương hiệu để website chuyên nghiệp hơn.

06

Hoàn thiện giao diện tổng thể

  • Kiểm tra font chữ, màu chủ đạo, màu nền, màu nút, khoảng cách section.
  • Đảm bảo header, footer, trang chủ, danh mục và bài viết đơn có phong cách nhất quán.
  • Ưu tiên giao diện dễ đọc, tốc độ tải tốt và phù hợp nội dung blog/news.
Mở video Style/Custom/Font trong tab mới →
Checklist

Danh sách kiểm tra trước khi bàn giao

Dùng checklist này để rà soát nhanh website WP blog/news sau khi hoàn tất các bước trên.

✓

WordPress đã cài đúng

Website chạy trên Hostinger, truy cập được trang quản trị và frontend.

✓

Theme Flatsome đã kích hoạt

Logo đã upload, UX Builder sẵn sàng sử dụng.

✓

Header và Footer đã hoàn thiện

Menu, màu sắc, chiều cao, nội dung footer và absolute footer đã đồng bộ.

✓

Menu có trang và danh mục

Danh mục mặc định đã đổi tên, menu chính đã gắn đúng vị trí.

✓

Trang chủ dùng trang tĩnh

Trang chủ được dựng bằng UX Builder với các block phù hợp blog/news.

✓

Blog layout đã tối ưu

Archive, danh mục và bài viết đơn hiển thị rõ ràng, dễ đọc, không rối sidebar.

Lộ trình dựng web WP Blog/News đã sẵn sàng

Đi theo từng section từ trên xuống để tạo một website tin tức/blog có cấu trúc rõ ràng: khởi tạo WP, cài Flatsome, dựng layout, tạo menu, cấu hình trang chủ và hoàn thiện blog.

Quay lại đầu trang