Bài học này sẽ giúp học viên biết cách phân tích các dữ liệu nào cần thiết để xây dựng website theo mẫu thiết kế, cách bố trí dữ liệu đó trong WordPress như thế nào để thuận tiện quản lý và truy xuất.

Mục lục

Kiến thức yêu cầu:
– Cách sử dụng Admin của WordPress và một số plugin.
– Cách sử dụng Starter Theme của Waytech.

Phân tích mẫu giao diện theo thiết kế cho trước

Chúng ta sẽ lấy mẫu thiết kế một website in ấn quảng cáo để thực hiện cho loạt bài học này. Xem mẫu thiết kế tại đây.

Nhìn vào ảnh thiết kế của giao diện trang chủ, ta có thể phân tách thành các khu vực như sau (các bạn vừa đọc phân tích, vừa xem hình để dễ hình dung):

Khu vực Header

  1. Header Section 1:
    – Header Menu: chiếm 9 cột bên trái.
    – Header More: gồm các nút Social, Search và Email, chiếm 3 cột bên phải.
  2. Header Section 2:
    – Khối logo: chiếm full width, có khối màu cam đi kèm phía trước logo.

Khu vực Left Sidebar

Left Sidebar chiếm 3 cột bên trái đối với màn hình Large trở lên, chiếm 12 cột đối với màn hình Medium trở xuống. Theo cách bố trí của Starter Theme Waytech, các cột sidebar trên màn hình nhỏ đều nằm trôi xuống phía dưới cột nội dung chính (ngoại trừ Sidebar Menu sẽ được gắn cố định lên màn hình).

  1. Widget 1:
    – Sidebar Menu: đây sẽ là menu chính trên giao diện Mobile với position là fixed, còn Header Menu sẽ dùng jQuery chèn xuống dưới Menu này.
  2. Widget 2:
    – Sản phẩm nổi bật: khoảng 6 bài, hiển thị ảnh đại diện và tiêu đề.

Khu vực nội dung chính ở giữa

Phần nội dung chính của trang chủ chiếm 6 cột ở giữa đối với màn hình Large trở lên, chiếm 12 cột đối với màn hình Medium trở xuống.

  1. Slider trình chiếu các bài viết Hot:
    – Chiếm full width của cột nội dung chính.
    – Số lượng khoảng 5 bài, thể hiện các thông tin như ảnh đại diện, tiêu đề, ngày đăng, lượt xem, tóm tắt, nút liên kết vào bài viết. Đây là các bài viết được quản trị viên chọn bằng cách tick vào một hộp chọn (Custom Field).
    – Với dạng Slider kiểu bài viết thì nên dùng Carousel Slider (đã được tích hợp sẵn trong Starter Theme).
  2. Group Item – Gian hàng trưng bày:
    – Chiếm 50% của cột nội dung chính.
    – Đây là nhóm các bài viết thuộc 1 thư mục nào đó, cụ thể ở phần này là các bài viết thuộc thư mục Sản phẩm trong Gian hàng Activation.
    – Quy ước mỗi bài trong 1 nhóm bài gọi là Item, nhóm bài gọi là Group Item.
    – Item đầu tiên hiển thị ảnh đại diện, tiêu đề, ngày đăng, lượt xem, tóm tắt.
    – Các Item còn lại không hiển thị tóm tắt, ảnh đại diện thu nhỏ lại.
  3. Group Item – Booth Activation:
    – Chiếm 50% của cột nội dung chính.
    – Cách trình bày tương tự như Group Item Gian hàng trưng bày.
  4. Group Item – In kỹ thuật số:
    – Chiếm full width của cột nội dung chính.
    – Các Item trình bày theo kiểu hình ảnh, sắp xếp thành 3 cột, Item đầu tiên chiếm 2 cột.
    – Hiển thị ảnh đại diện và tiêu đề.
  5. Group Item – Standee – Showcase:
    – Chiếm full width của cột nội dung chính.
    – Các Item hiển thị tương tự Group Item Gian hàng trưng bày.

Khu vực Right Sidebar

Right Sidebar chiếm 3 cột bên phải đối với màn hình Large trở lên, chiếm 12 cột đối với màn hình Medium trở xuống.

  1. Widget 1:
    – Thông tin mạng xã hội (có thể bỏ qua các số liệu, chỉ cần để biểu tượng và bấm vào liên kết).
  2. Widget 2:
    – Facebook Page Plugin (lấy code của Facebook cung cấp chèn vào).
  3. Widget 3:
    – Tin tức mới nhất trong thư mục Tin tức.
    – Các Item hiển thị ảnh đại diện, tiêu đề, ngày đăng và lượt xem.

# Mục lục

Tổ chức dữ liệu lên WordPress

Dựa vào các phân tích về nội dung ở trên, ta tiến hành bố trí dữ liệu cho Website trong Admin như sau:

Tạo chuyên mục

Tạo cây thư mục sau trong phần chuyên mục (Category):

- Gian hàng Activation.
---- Booth Activation.
---- Sản phẩm.
---- Standee Showcase.
---- Thi công Showroom.

- Quảng cáo.
---- Sản phẩm POSM: kệ gỗ.
---- Sản phẩm POSM: kệ sắt.
- Thiết kế.
---- Decord quầy hàng, POSM.

- Sự kiện.
---- Sinh hoạt thường niên.

- In kỹ thuật số.
---- In PP.
---- In Simili.
---- In Standee.
---- In Decal.
---- In Hiflex.
---- In bạt 3M.
---- In vải Silk.
---- In UV cuộn.
---- In băng rôn.
---- In vải Canvas.
---- In Backlit Film.

- Tin tức.

Tạo trang

Tạo các trang theo Header Menu (Page):

- Giới thiệu.
- Liên hệ.
- Báo giá.

(Chú ý: trang nào mà Starter Theme có rồi thì không phải tạo mới)

Tạo bài viết mẫu

Tạo khoảng 6 bài viết (Post) mẫu rồi gán mỗi bài vào tất cả các chuyên mục đã tạo để làm mẫu hiển thị, giúp việc định dạng giao diện dễ dàng hơn.

Nội dung bài viết là tùy chọn, nhưng quan trọng phải có ảnh đại diện (có thể chọn 1 ảnh làm đại diện cho tất cả các bài mẫu này, kích thước khuyến nghị là 1024 x 768 px).

Tạo menu cho website

  • Các bạn chọn mục Giao diện ⇒ Menu trong Admin, sẽ thấy xuất hiện 1 menu sẵn có tên Main.
  • Sửa tên menu Main thành Header Menu, sau đó bố trí lại các thành phần trong menu như sau (cái nào có sẵn rồi thì giữ nguyên, cái nào dư thừa thì gỡ bỏ):
    - Trang chủ. // Liên kết tùy chỉnh
    - Giới thiệu. // Trang
    - Booth Activation. // Chuyên mục
    - Sản phẩm. // Chuyên mục
    - Tin tức. // Chuyên mục
    - Liên hệ. // Trang
    - Báo giá. // Trang
  • Bấm nút Lưu trình đơn để lưu menu Header Menu lại.
  • Tiếp tục bấm vào dòng tạo một trình đơn mới ở bên trên để tạo 1 menu mới.
  • Đặt tên menu là Sidebar Menu rồi bấm nút Tạo trình đơn.
  • Tiếp tục thêm các thành phần để tạo ra menu như dưới đây:
    - Gian hàng Activation. // Chuyên mục
    ---- Booth Activation. // Chuyên mục
    ---- Sản phẩm. // Chuyên mục
    ---- Standee Showcase. // Chuyên mục
    ---- Thi công Showroom. // Chuyên mục
    
    - Quảng cáo. // Chuyên mục
    ---- Sản phẩm POSM: kệ gỗ. // Chuyên mục
    ---- Sản phẩm POSM: kệ sắt. // Chuyên mục
    - Thiết kế. // Chuyên mục
    ---- Decord quầy hàng, POSM. // Chuyên mục
    
    - Sự kiện. // Chuyên mục
    ---- Sinh hoạt thường niên. // Chuyên mục
    
    - In kỹ thuật số. // Chuyên mục
    ---- In PP. // Chuyên mục
    ---- In Simili. // Chuyên mục
    ---- In Standee. // Chuyên mục
    ---- In Decal. // Chuyên mục
    ---- In Hiflex. // Chuyên mục
    ---- In bạt 3M. // Chuyên mục
    ---- In vải Silk. // Chuyên mục
    ---- In UV cuộn. // Chuyên mục
    ---- In băng rôn. // Chuyên mục
    ---- In vải Canvas. // Chuyên mục
    ---- In Backlit Film. // Chuyên mục
    
    - Tin tức. // Chuyên mục
  • Bấm nút Lưu trình đơn để lưu menu Sidebar Menu lại.

Điền một số thông tin liên hệ mẫu

Vào Waytech Board  Thông tin liên hệ để điền vào 1 số thông tin cơ bản như Email, số điện thoại, facebook page, google+, youtube…để có dữ liệu hiển thị ra ngoài giao diện.

Thêm Custom Field vào phần soạn thảo bài viết

Như phân tích lúc đầu, có một số bài thuộc loại đặc biệt như bài Hot, bài nổi bật…được hiển thị lên những vị trí đặc biệt nên cần một hộp checkbox để người viết bài có thể chọn vào. Các bước thực hiện như sau:

  • Chọn menu Custom Fields trong Admin.
  • Bấm nút Add new để tạo nhóm Custom Fields mới.
  • Đặt tên nhóm Custom Fields, VD: “Tùy chọn nâng cao“.
  • Bấm tiếp nút Add Field để thêm trường Custom Fields.
  • Nhập các thông số như mẫu dưới đây:
    - Field Label: "Bài viết Hot".
    - Field Name: "hot_article".
    - Field Type: chọn Choice ⇒ True/False.
    - Message: "Đưa lên Slider trên trang chủ".
    - Bấm nút Close Field để rút gọn ô Custom Fields lại.
  • Tiếp tục bấm vào nút Add Field để thêm trường Custom Fields tiếp theo.
  • Nhập các thông số như mẫu dưới đây:
    - Field Label: "Bài viết nổi bật".
    - Field Name: "featured_article".
    - Field Type: chọn Choice ⇒ True/False.
    - Message: "Đưa vào cột nổi bật trên trang chủ".
    - Bấm nút Close Field để rút gọn ô Custom Fields lại.
  • Tiếp đến phần Options bên dưới:
    - Position: chọn Side.
    - Style: chọn Standard (WP metabox).
  • Trở lên trên bấm vào nút Đăng bài viết để lưu nhóm Custom Fields lại.
  • Sau khi nhóm Custom Fields này được lưu thành công, nó sẽ hiển thị ở cột bên trong phần soạn bài viết mới.

# Mục lục

Lâm Mã Trắc