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. Tất nhiên, tùy thuộc vào lĩnh vực, thiết kế, đối tượng hướng đến và nhiều lý do khác nữa, mỗi trang web sẽ được thiết kế phần header khác nhau. Tuy nhiên, 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.

Screen Shot 2019-11-19 at 10.01.24

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.

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

Phần (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

Phần (3): Header ads, thường chứa các banner quảng cáo

Phần (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.

function register_svh_menus() {
    register_nav_menus([
        'main-menu' => __( 'Main Menu' )
    ]);
}
add_action('init', 'register_svh_menus');

Tạo menu

Hệ thống menu của WordPress rất đơn giản và dễ sử dụng, để tạo một menu mới, bạn cần truy cập khu vực quản lý menu bằng cách:

Admin menu -> giao diện -> menu

Screen Shot 2019-11-19 at 10.57.01

Ở giao diện này, có 3 mục bạn cần chú ý:

Phần (1): Tùy chọn hiển thị sẽ cho phép bạn bật/tắt các mục có thể tạo được menu item như bài viết, danh mục, thẻ ...vv

Phần (2): Phần 2 chứa các đối tượng có thể tạo menu item (có thể mở thêm hoặc ẩn đi nhờ phần 1)

Phần (3): Phần 3 là cấu trúc của menu, bạn có thể dễ dàng kéo/thả để phân cấp menu trong WordPress

Và bây giờ, mình sẽ tạo menu của mình.

Screen Shot 2019-11-19 at 11.05.03

Khi tạo menu, các bạn cũng cần chú ý 3 phần: Tên menu, các item và quan hệ của chúng, vị trí hiển thị (mình chọn vị trí đã được khai báo trước đó),

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:

Screen Shot 2019-11-19 at 14.03.12

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

# Khai báo hằng số TPL_DIR bằng đường dẫn đến thư mục theme
define('TPL_DIR', get_stylesheet_directory());

# Yêu cầu load file class-wp-bootstrap-navwalker.php
function register_navwalker(){
	require_once TPL_DIR . '/inc/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

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.

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

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php bloginfo('title'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
<header>
    <div id="topbar">
        <div class="container">
            <div class="row">
                <div class="col slogan">Ăn Ngon Mỗi Ngày</div>
                <div class="col topbar-email text-right">
                    <a href="mailto:info@7host.vn">info@7host.vn</a>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="/">
                <img class="logo" src="<?= get_template_directory_uri() ?>/assets/images/logo.png" alt="Logo">
            </a>
            <?php
                wp_nav_menu([
                    'theme_location'    => 'main-menu',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'main-menu',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'            => new WP_Bootstrap_Navwalker(),
                ]);
            ?>
            </div>
      </nav>
</header>

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

Screen Shot 2019-11-19 at 14.29.52

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é 

Các bài viết liên quan: