Bạn muốn thêm một menu tùy chỉnh vào trong theme WordPress? Mặc địch, nhiều theme WordPress đã được thiết kế sẵn các vị trí hiển thị menu trong layout. Trong bài viết này, chúng tôi sẽ chỉ bạn cách để thêm nhiều menu vào trong giao diện WordPress.
Vậy khi nào bạn cần tới việc thêm một hay nhiều menu mới vào theme WordPress?
Hầu hết các theme WordPress đều đã được định sẵn ít nhất một vị trí để hiển trị menu trong giao diện. Bạn có thể quản lý menu này một cách dễ dang thông qua giao diện trực quan trong khu vực quản trị menu của WordPress.
Tuy vậy, đôi khi chúng ta cần chỉnh sửa giao diện để thêm hoặc thay đổi menu phù hợp với mục đích sử dụng cho phù hợp với giao diện mới.
Giờ chúng ta sẽ xem cách để lập một menu mới trong theme WordPress như thế nào nhé.
Cách lập menu tùy chỉnh trong WordPress
Menu là một tính năng bắt buộc trong theme WordPress, mỗi theme có thể định nghĩa vị trí menu và quản lý menu theo cách của người lập trình muốn.
Để thêm một menu tùy chỉnh vào theme, đầu tiên chúng ta cần đăng ký menu mới này với theme bằng cách theme những dòng code này vào file functions.php trong theme bạn muốn thêm menu.
|
1
2
3
4
|
function wpb_custom_new_menu() {
register_nav_menu(‘my-custom-menu’,__( ‘My Custom Menu’ ));
}
add_action( ‘init’, ‘wpb_custom_new_menu’ );
|
You can now go to Appearance » Menus page in your WordPress admin and try to create or edit a new menu. You will see ‘My Custom Menu’ as theme location option.
Bây giờ, bạn có thể đi tới trang quản trị menu trong trang quản lý admin của WordPress theo đường dẫn Appearance » Menus và có thể thử lập hoặc sửa một menu mới. Bạn sẽ thấy ‘My Custom Menu’ như là một tùy chọn trong chọn vị trí hiển thị menu này.
|
1
2
3
4
5
6
7
8
9
|
function wpb_custom_new_menu() {
register_nav_menus(
array(
‘my-custom-menu’ => __( ‘My Custom Menu’ ),
‘extra-menu’ => __( ‘Extra Menu’ )
)
);
}
add_action( ‘init’, ‘wpb_custom_new_menu’ );
|
Sau khi bạn đã theme vị trí hiển thị menu, bạn hoàn toàn có thể vào trong trang quản lý menu để tạo mới và chọn vị trí đó để hiển thị menu bạn mong muốn.
Bước tiếp theo là vô cùng quản trọng, bạn đã đăng ký theme để sử dụng, giờ chúng ta cần hiển thị nó ra ngoài giao diện để menu được hiển thị đúng vị trí mong muốn.
Hiển thị menu ra ngoài giao diện WordPress
Hầu hết địa điểm đặt menu thường được đặt khu vực header của một website sau tile hoặc logo. Tuy vậy, bạn có thể thêm một menu tùy chỉnh tới nơi bạn muốn đặt.
|
1
2
3
4
5
|
<?php
wp_nav_menu( array(
‘theme_location’ => ‘my-custom-menu’,
‘container_class’ => ‘custom-menu-class’ ) );
?>
|
theme_location là tên mà chúng ta đã đặt ở bước trước.
|
1
2
3
4
5
6
7
8
9
|
div.custom–menu–class ul {
list–style–type: none;
list–style: none;
list–style–image: none;
}
div.custom–menu–class li {
padding: 20px;
display: inline;
}
|
Và giờ bạn đã biết cách đăng ký một menu mới trong theme wordpress và cách hiển thị nó ra ngoài giao diện cũng như cách để style CSS cho nó rồi nhé.
Chúc bạn học tập tốt!
Xem thêm khóa học PHP từ A-Z của Học viện công nghệ Vietpro!
