Lập Trình Theme WordPress – Phần 6 – Xây Dựng Trang Chủ

Sau khi xây dựng xong phần header và footer, chúng ta sẽ tiến hành xây dựng trang chủ của blog. Như các bạn đã biết, trang chủ là trang mà khách hàng sẽ tiếp cận đầu tiên trên trang web của chúng ta, nó sẽ mang lại ấn tượng đầu cho người dùng. Do đó, chúng ta cần thiết kế nó thật cẩn thận, đáp ứng tính thẩm mỹ, nâng cao trải nghiệm của người dùng. Cân đối giữa lượng thông tin và hiệu năng của trang web, nhằm mục đích giữ chân người dùng.

Và để có thể đáp ứng những yêu cầu trên, chúng ta sẽ cần phải hiểu rõ về WordPress.

Cài đặt trang chủ

WordPress cho phép người dùng tùy chọn trang chủ của mình, có thể là 1 bài viết mới nhất (post) hay có thể là 1 trang tĩnh bất kỳ (page). Để xây dựng trang chủ có giao diện khác biệt với các giao diện khác trong trang. Chúng ta sẽ tạo 1 trang và cài đặt nó thành trang chủ của blog.

Bước 1: Các bạn cần vào mục quản lý trang, tạo 1 trang mới. Ở đây, mình sẽ tạo 1 trang và đặt tên nó là “trang chủ” luôn.

Bước 2: Để vào giao diện cài đặt trang chủ, trên menu chính ở giao diện admin Cài đặt -> Đọc ở trên cùng giao diện hiển thị, các bạn sẽ thấy giao diện như sau:

Như phía trên mình đã giải thích, bố cục trang chủ sẽ có 2 sự lựa chọn, trong phạm vi bài viết này, mình sẽ chọn trang tĩnh nhé. Và ở bước 1 mình đã tạo sẵn 1 trang rồi, giờ cài đặt nó vào thôi.

Sau đó lưu thay đổi (save) lại để cấu hình được cập nhật. Lúc này, ngoài giao diện người dùng vẫn chưa có gì thay đổi … Vì sao vậy? đơn giản vì chúng ta mới chỉ có template index.php, dù là trang tĩnh hay trang bài viết, thì theo cấu trúc của theme nó cũng chỉ hiển thị trang index.php mà thôi, vậy nếu các bạn chưa thấy thay đổi thì cũng không có gì lo lắng nhé.

Cấu trúc theme – template cho trang chủ

Dựa trên cấu trúc theme, vì trang chủ của chúng ta là một trang tĩnh, nên chúng ta sẽ có 7 sự lựa chọn để xây dựng template cho trang chủ. Bắt đầu phân tích tính hợp lý của từng sự lựa chọn.

  1. front-page.php
  2. home.php
  3. page-trang-chu.php (page-$slug.php)
  4. page-12.php (page-$id.php)
  5. page.php
  6. singular.php
  7. index.php

Phân tích nhanh qua những lựa chọn, chúng ta sẽ thấy một số vấn đề:

  • 1 và 2 cùng nằm trên 1 đường thẳng, nghĩa là 2 template này tương tự, vậy giữa chúng có gì khác nhau? Như đầu bài mình có giới thiệu, có 2 lựa chọn cho trang chủ là bài viết mới nhất và 1 trang tĩnh. Nên ở template WordPress cũng đưa ra 2 lựa chọn
    • home.php giành cho lựa chọn hiển thị bài viết mới nhất là trang chủ (trong trường hợp bạn muốn bài viết mới nhất hiển thị như trang chủ và có giao diện khác biệt so với các bài viết bình thường)
    • front-page.php giành cho trường hợp ngược lại, nghĩa là khi bạn chọn sử dụng 1 trang tĩnh bất kỳ là trang chủ.

=> Không có sự ràng buộc rõ ràng, nhưng chúng ta nên biết, hiểu và sử dụng đúng ý đồ của các nhà phát triển để trang web của chúng ta hoạt động một cách tốt nhất (ví dụ: bạn có thể thử 2 conditional tags is_home() và is_front_page() để hiểu rõ hơn)

  • 3 và 4 sẽ dựa trên slug và id của trang tĩnh các bạn tạo. Cách này cũng tương đối khả thi. tuy nhiên, trong tương lai ví dụ chúng ta cần chuyển đổi, nâng cấp hệ thống quá trình export, import dữ liệu có thể dẫn đến đánh lại giá trị id của đối tượng trang dẫn đến sai xót. Mặt khác, theo phương pháp này sẽ giảm tính tường minh theme của  chúng ta.
  • 5, 6, 7 sẽ không sai, nhưng vì chúng ta muốn tách giao diện trang chủ độc lập, nên chúng ta sẽ không dùng những template này trong trường hợp này.

Vậy, sau khi cân nhắc kỹ, chúng ta sẽ sử dụng template front-page.php để xây dựng giao diện cho trang chủ. Chúng ta sẽ tạo thêm template front-page.php ở folder theme. Lúc này, chúng ta sẽ có:

Xây dựng bố cục trang chủ

Như thường lệ, trước khi bắt tay vào lập trình, chúng ta sẽ xây dựng bố cục. Dựa trên ý tưởng ban đầu, mình sẽ có một trang chủ với 4 phần.

  • Phần 1: Slider hình ảnh về chủ đề trang web.
  • Phần 2: Một số tính năng nổi bật của trang web
  • Phần 3: Các bài viết mới nhất của trang web, hiển thị dưới dạng danh sách
  • Phần 4: Contact form để người dùng đăng ký thông tin mới

Trang chủ với giao diện rộng, không sử dụng sidebar.

Tiến hành

Để đáp ứng được bố cục trên, chúng ta sẽ cần 2 plugins hỗ trợ:

  • MetaSlider hỗ trợ tạo một slider, mặc dù Bootstrap có tích hợp sẵn chức năng carousel giúp chúng ta dễ dàng tạo ra một slider, nhưng các bạn sẽ tốn rất nhiều công sức để thêm hiệu ứng, giúp người dùng upload hình ảnh. Do đó, chúng ta sẽ sử dụng plugin này để tạo slider cho trang chủ của mình.
  • Contact Form 7 hỗ trợ tạo ra một form liên hệ, giúp người dùng gửi các thông tin đến quản trị viên của trang web.

Các bạn có thể vào giao diện quản trị plugin, tìm kiếm, cài đặt và kích hoạt 2 plugin này nhé.

Phần 1, Slider

Sau khi cài plugin Meta Slider, ở giao diện admin, thanh menu sẽ có thêm 1 mục nữa, chúng ta sẽ vào đó để quản trị Slider. Các bạn có thể up ảnh và cấu hình như bên dưới

Kéo xuống bên dưới 1 chút, Plugin cung cấp sẵn shortcode để hiển thị, chúng ta chỉ cần copy/paste đoạn code này vào template.

Vậy bây giờ template front-page.php của chúng ta có:

Ngoài giao diện trang chủ bây giờ đã thay đổi.

Vậy là hoàn tất, phần số 1, chúng ta sẽ tiếp tục tiến tới phần số 2 của giao diện.

Phần 2, Giới thiệu về điểm nổi bật

Phần thứ 2 đơn giản mình chỉ sử dụng các class có sẵn của bootstrap 4 để hiển thị một số thông tin.

Và đây là kết quả đạt được:

Phần 3, Danh sách các bài viết mới nhất

Để hiển thị các bài viết mới nhất ra ngoài trang chủ, các bạn sẽ cần nắm 1 số kiến thức sau:

  • $wp_query đây là một đối tượng lưu trữ các thông tin được WordPress truy vấn và truyền ra ngoài giao diện. Tùy thuộc vào từng loại trang (trang tĩnh, trang bài viết, trang danh mục). Thông tin trong $wp_query sẽ khác nhau. Nếu các bạn muốn tìm hiểu sâu hơn, có thể tra cứu thêm một số plugins/addons hỗ trợ debug
  • The Loop là một cơ chế được WordPress xây dựng sẵn, hỗ trợ hiển thị các bài viết ra ngoài giao diện. Trong vòng lặp, có thể sử dụng các WordPress template tags để lấy thông tin của bài viết:
  • WP_Query là một class hỗ trợ lập trình viên tương tác trực tiếp với database của trang blog mà không cần thông qua các template tags. Dựa vào cách này, bạn có thể truy vấn một số thông tin cần thiết.

Các bước chúng ta cần thực hiện sẽ là:

  1. Sử dụng class WP_Query để truy vấn các bài viết mới
  2. Sử dụng vòng lặp để để duyệt các bài viết đã truy vấn được
  3. Kết hợp với các class bootstrap để hiển thị ra giao diện
  4. Cập nhật CSS

Đây là code sau khi thực hiện các bước trên:

Và đây là thành quả của chúng ta

Phần 4, Đăng ký nhận tin mới

Tương tự như phần 1, chúng ta sẽ sử dụng plugin contact form 7. Tạo 1 form liên hệ và sử dụng shortcode của nó để hiển thị ra màn hình. Cập nhật lại CSS và đây là thành quả.

Lưu ý: Để đảm bảo tính bảo mật, thông thường các máy chủ shared hosting sẽ tắt chức năng gửi mail của PHP, do đó, để plugin contact form 7 hoạt động các bạn cần thêm sự hỗ trợ của 1 plugin khác. Các bạn có thể xem bài hướng dẫn cài đặt plugin WP Mail SMTP để có thể nhận mail từ form liên hệ nhé.

Sau khi đã thực hiện các bước trên, trang blog của chúng ta bây giờ đã như sau: