Lập Trình Theme WordPress – Phần 4 – Xây Dựng Header

Trong bài trước, chúng ta đã xây dựng cấu trúc theme cơ bản, và đã nhúng được các file tài nguyên vào giao diện. Hôm nay, chúng ta sẽ bắt đầu bắt tay vào công việc chính, xây dựng giao diện người dùng.

Một số thành phần thường gặp ở header

Header là một thành phần không thể thiếu trong mỗi trang web, dù trang web của bạn thuộc lĩnh vực nào, theo phong cách nào. Thông thường, sẽ có một số thành phần cơ bản luôn được đặt ở header để giúp cho người dùng trải nghiệm trang web tốt hơn.

Phía trên là 1 phần header khá phổ biến và thường được thấy ở các trang web tin tức. Tùy theo nhu cầu, chúng ta có thể thêm hoặc bỏ các thành phần:

  1. Được gọi là topbar, nơi đây thường chứa slogan, thông tin liên hệ, mạng xã hội hoặc một số tiện ích như ngày tháng, thời tiết, chứng khoán …vv
  2. Logo, biểu tượng cho trang web của bạn, tùy vào thiết kế, logo sẽ nằm ở các vị trí khác nhau, có thể bên trái, ở giữa …vv
  3. Header ads, thường chứa các banner quảng cáo
  4. Menu chính của trang web, giúp người dùng điều hướng, tìm kiếm các thông tin trên trang web.

Xây dựng bố cục cho header của bạn

Như đã giới thiệu trong các bài trước, ở loạt bài này, mình sẽ xây dựng một trang blog về chủ đề ẩm thực với bố cục đơn giản. Do đó, ý tưởng về header của mình cũng sẽ rất đơn giản. Header gồm 2 phần:

  1. Topbar: Bên trái chứa Slogan của trang web, bên phải sẽ chứa thông tin email liên hệ với admin.
  2. Phần chính của header chứa logo, bên cạnh logo sẽ là menu chính của trang web.

WordPress Menu

Để có thể hiển thị menu ra ngoài giao diện, chúng ta sẽ cần phải làm những công việc sau:

Khai báo vị trí menu

Đầu tiên, ta phải khai báo vị trí hiển thị menu trong theme với hệ thống. Để khai báo, WordPress cung cấp sẵn hàm register_nav_menus() cho chúng ta. Việc cần làm là mở file functions.php lên và thực hiện khai báo.

Tạo menu

Hệ thống menu của WordPress rất đơn giản và dễ sử dụng. Để thuận tiện cho việc lập trình, trước hết chúng ta cần phải thuần thục thao tác quản lý menu trong WordPress.

Hiển thị

Tất nhiên, WordPress cũng đã chuẩn bị sẵn cho chúng ta một phương thức để hiển thị menu ra ngoài giao diện, đó chính là wp_nav_menu() theo như tài liệu hướng dẫn, có rất nhiều options để bạn có thể tùy biến menu của mình.

Tuy nhiên, trong phạm vi bài viết, chúng ta đang sử dụng frontend framework là bootstrap 4. Vậy, chúng ta sẽ cần thêm một xíu hỗ trợ từ bên ngoài, thư viện WP Bootstrap Navwalker. Để bạn có thể dễ hình dung vấn đề, mình sẽ giải thích sơ qua.

Trước hết, bạn hãy mở lại trang tài liệu của phương thức wp_nav_menu() kéo xuống một chút, bạn sẽ thấy option walker, option này yêu cầu 1 instance của class Walker_Nav_Menu. Và theo tài liệu của WordPress cung cấp, class Walker_Nav_Menu sẽ hỗ trợ tạo ra mã html cho menu của chúng ta. Do cấu trúc menu của Bootstrap 4 có một chút khác biệt, nên chúng ta sẽ sử dụng thư viện WP Bootstrap Navwalker để hỗ trợ render nó.

Để thêm class  Walker_Nav_Menu vào theme của bạn, các bạn sẽ làm các bước sau:

  • Bước 1: Truy cập repo của Bootstrap Navwalker tải file class-wp-bootstrap-navwalker.php về.
  • Bước 2: Quay trở lại folder theme, tạo thêm 1 sub-folder inc và copy file mã nguồn các bạn vừa tải về. Lúc này, trong folder của các bạn sẽ như sau:

  • Bước 3: Nhúng class mới vào hệ thống. Ở file functions.php, các bạn thêm đoạn code:

Sau bước này, bạn có thể sử dụng class WP_Bootstrap_Navwalker để render một menu cơ bản của Bootstrap 4.

Ngoài ra, các bạn có thể tham khảo chi tiết về WP_Bootstrap_Navwalker tại đây.

Bắt đầu xây dựng header cho trang web của bạn

Dựa vào ý tưởng thiết kế ban đầu, mình sẽ thêm code cho file header.php

Và thêm 1 ít CSS vào file style.css và kết quả cuối cùng nhận được là

Chúc các bạn thành công, trong bài kế tiếp chúng ta sẽ làm tiếp với phần chân trang (footer) nhé.