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


Hôm nay Thiết kế Website WordPress sẽ hướng dẫn cách viết code để tạo Menu trong wordpress (menu location) và cách bạn thêm location này vào bất kỳ chỗ nào trong theme. Và cuối cùng là chỉ việc truy cập vào Appearance -> Menus để thêm menu vào location bạn vừa tạo.

Bước 1. Khởi tạo Menu Location

Để tạo một menu location không có gì là khó khăn, chỉ với một vài dòng đặt vào file functions.php là bạn tạo được. Nhưng trước khi tạo menu location, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào.

1
add_theme_support( 'menus' );

Xong rồi, bây giờ ta sẽ có một hàm tên là register_nav_menus()  với một tham số duy nhất là tên location như sau:

1
2
3
4
5
register_nav_menus(
        array(
                'main-nav' => 'Menu chính'
        )
);

Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên Menu chính với slug là main-nav. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài, không khoảng trắng, không dấu và không in hoa.

Bây giờ hãy save lại và vào phần Appearance -> Menus -> Locations thì bạn sẽ thấy tên location mà ta vừa tạo.

Menu trong WordPress

Thế nếu muốn thêm nhiều location thì sao? Đơn giản, chỉ việc thêm nhiều tham số vào hàm bên trên như sau:

1
2
3
4
5
6
register_nav_menus(
        array(
                'main-nav' => 'Menu chính',
                'footer-nav' => 'Footer menu'
        )
);

 

Bước 2. Hiển thị location ra ngoài theme

Bạn cứ hiểu là location được chỉ định hiển thị ở đâu thì menu sẽ xuất hiện ở đó khi bạn thêm vào trong Dashboard.

Để hiển thị location, ta sẽ dùng hàm wp_nav_menu(). Hàm này nó có nhiều tham số hơn là cái hàm tạo location. Bây giờ hãy thử mở theme của bạn lên và chèn hàm này vào vị trí mà bạn thích, như file header.php chẳng hạn.

1
2
3
4
5
6
<?php wp_nav_menu( array(
     'theme_location' => 'main-nav'// tên location cần hiển thị
     'container' => 'nav', // thẻ container của menu
     'container_class' => 'main-nav', //class của container
     'menu_class' => 'menu clearfix' // class của menu bên trong
) ); ?>

Bước 3. Tạo menu trong wordpress

Sau khi chèn xong, hãy vào trang quản lý thêm menu vào  location để nó hiển thị ra.

Bây giờ ra ngoài theme và dùng Firebug xem cấu trúc menu ta sẽ thấy tương tự như sau:

Cách tạo Menu trong WordPress

Hãy tham chiếu cấu trúc đó với code hiển thị location mà bạn vừa viết là bạn sẽ hiểu ngay ý nghĩa của nó. Việc bây giờ của bạn chỉ là thêm CSS cho menu để nó hiển thị như một menu thật sự nhé. Ở dưới là CSS mẫu của một menu dropdown đơn giản nếu bạn làm theo ví dụ cấu trúc menu của bài này

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.main-nav ul {
 text-align: left;
 margin: 0;
 padding: 15px 4px 17px 0;
 list-style: none;
}
.main-nav ul li {
 font: bold 12px/18px sans-serif;
 display: inline-block;
 margin-right: -4px;
 position: relative;
 padding: 15px 20px;
 background: #fff;
 cursor: pointer;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}
.main-nav ul li:hover {
 background: #555;
 color: #fff;
}
.main-nav ul li ul {
 padding: 0;
 position: absolute;
 top: 48px;
 left: 0;
 width: 150px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 display: none;
 opacity: 0;
 visibility: hidden;
 -webkit-transiton: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -transition: opacity 0.2s;
}
.main-nav ul li ul li {
 background: #555;
 display: block;
 color: #fff;
 text-shadow: 0 -1px 0 #000;
}
.main-nav ul li ul li:hover { background: #666; }
.main-nav ul li:hover ul {
 display: block;
 opacity: 1;
 visibility: visible;
}

Kết quả ta tạm có:

Tạo Menu trong WordPress

Mình muốn nói gì ở bài này?

Trong bài này mình không hướng dẫn bạn làm thế nào để có một menu đẹp và lộng lẫy như các trang khác, mà mình chỉ muốn cho các bạn biết cách tạo một menu trong WordPress như thế nào. Từ đó bạn có thể tự mình chuyển các mẫu menu từ HTML, CSS sang menu của WordPress một cách dễ dàng.

Ngoài ra các bạn xem thêm những bài hướng dẫn khác của mình tại đây nhé!

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

>>> Tổng hợp những Plugin nên dùng cho WordPress

>>> Plugin SEO WordPress SEO by Yoast miễn phí tốt nhất WordPress

Chúc các bạn thành công và may mắn!

4.8/5 - (100 bình chọn)
4.8/5 - (100 bình chọn)