[Bài 7] Hướng dẫn tạo menu xổ xuống trong WordPress

Sau khi hàng loạt các bước xây dựng Theme đến đây bạn sẽ quay lại dựng Menu. Để tạo được Menu đẹp hoàn chỉnh theo ý muốn là một điều không dễ dàng. Mặc dù đã biết CSS rồi nhưng mình cũng đã mất tới 30 phút để làm được Menu ưng ý. Với Menu này vừa có thể hiển thị trên desktop vừa hiển thị được trên Mobile khá tốt.

Với bài này sẽ kết hợp giữa Bootstrap và CSS để tạo Menu. Bạn sẽ tạo được Menu Dropdown (Menu xổ xuống) 2 cấp cực kỳ dễ dàng.

Trong WordPress thông thường Menu được đặt trong file header.php vì vậy bạn cần tìm tới file này.

Hướng dẫn tạo Menu Dropdown WordPress

Nếu bạn đang tự lập trình theme WordPress thì bài viết này khá phù hợp. Nhưng nếu là Theme sẵn có trong kho giao diện của WordPress thì sẽ hơi phức tạp hơn.

Bước 1: Hãy chắn chắn rằng file style.css và bootstrap được nhúng vào phần header trong cặp thẻ <head>…</head>

Nếu chưa hãy copy 4 dòng dưới cho vào

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://localhost/wordpress/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Bước 2: Thêm functions css trong file functions.php nếu không làm điều này khi viết CSS sẽ không bị ảnh hưởng.

function mytheme_styles() {
wp_register_style( 'main-style', get_template_directory_uri() . '/style.css', 'all' );
wp_enqueue_style( 'main-style' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_styles' );

Bước 3: Sau các giai đoạn chuẩn bị hoàn tất bạn sẽ bê nguyên đoạn code này vào header.php (Nhớ xoá hết code cũ đi nhé!)

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head() ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://localhost/wordpress/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body <?php body_class(); ?>>

<header class="site-header">
<h1><?php bloginfo( 'name' ); ?></h1>
<h4><?php bloginfo( 'description' ); ?></h4>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<?php wp_nav_menu( array(
'theme_location' => 'main-menu',
'container' => 'nav',
'container_class' => 'main-menu'
) ); ?>
</li>
</ul>
</div>
</nav>

</header>

Bước 4: Thêm mã CSS vào style.css để định dạng hiển thị Menu hai cấp

* {margin: 0; padding: 0}
.menu li{float: left; list-style: none; margin-right: 10px; padding: 10px 5px; width: 120px; position: relative;}
.menu li ul {position: absolute}
.menu li a{color: #fff; text-decoration: none; top: 0; left: 0}
.menu li ul li{display:none; width: 150px;top: 20px}
.menu li:hover ul li{display: block;padding: 10px 10px;z-index: 9; background: #343a40!important}

Và kết quả sau khi hover vào Menu

Hướng dẫn tạo Menu Dropdown trong WordPress

Lưu ý trước khi thực hiện bài này thì anh em nên đọc qua bài viết Hướng dẫn tạo Menu trong WordPress chi tiết đã nhé để không gặp bất cứ trục trặc nào trong quá trình thực hiện.