Cách Tạo menu mới – Menu website là một thành phần của giao diện người dùng trên trang web, được sắp xếp theo dạng danh sách hoặc cây hình thức, để giúp người dùng điều hướng và tương tác với các trang và chức năng khác nhau của trang web. Menu web thường chứa các liên kết đến các trang con, các danh mục, các chức năng và các tùy chọn khác để người dùng có thể dễ dàng truy cập và sử dụng trang web.
Trên 1 web thường có nhiều menu có sẳn Nhưng khi bạn custom 1 số menu không có trong cấu trúc của theme bạn phải làm như thế nào ? Bài hướng dẫn sau sẽ giúp bạn thêm bao nhiêu menu tùy ý và chèn bất kỳ vị trí nào bạn mong muốn
Cách tạo menu mới và chèn menu vào 1 vị trí bất kỳ trong flatsome
Cách Tạo menu mới
Để tạo 1 menu mới trên flatsome ta vào “Giao diện = > Menu”
OK các bạn làm theo như hình sẽ tạo được 1 menu thật đơn giản mà có lẽ ai cũng biết , Nhớ để ý cái name menu mình nhé ( như ví dụ trên mình đặt là menu2-tags ) Mình sẽ căn cứ mane mane này để dùng code lấy nó ra ngoài giao diện
Tạo Short menu và chèn menu ở bất kỳ vị trí nào bạn muốn
Để có thể chèn vào 1 vị trí bất kỳ nào mà bạn mong muốn , trước hết là gọi menu và làm short cho menu đó bằng cách thêm code vào function của theme mà bạn đang dùng
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//menu custom – flatsome.xyz
function fls_custom_menu($atts) {
$atts = shortcode_atts(array(
‘name’ => ‘menu-tags2’, //
), $atts);
$menu_name = $atts[‘name’];
$menu_items = wp_get_nav_menu_items($menu_name);
$menu_html = ”;
if ($menu_items) {
$menu_html .= ‘<div class=”custom-menu”><ul>’;
foreach ($menu_items as $menu_item) {
$menu_html .= ‘<li>#<a href=”‘ . $menu_item->url . ‘”>’ . $menu_item->title . ‘</a></li>’;
}
$menu_html .= ‘</ul> </div>’;
}
return $menu_html;
}
add_shortcode(‘fls_menu’, ‘fls_custom_menu’);
|
Sau khi thêm đoạn code này function thì bạn sẽ có 1 short là : [fls_menu]
bạn có thể đặt ví trí bất kỳ ở đâu mà bạn mong muốn. Bạn có thể xem vè cách tạo short và chèn short tại đây
Để css được đẹp như thế này cần thêm class và css sau
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
.custom-menu ul {
display: flex;
list-style: none;
}
.custom-menu ul li {
display: inline-flex;
align-content: center;
justify-content: center;
min-width: 0;
padding-left: 5px;
padding-right: 5px;
border-style: solid;
border-width: 1px;
border-radius: 3px;
font-size: 12px;
line-height: 1.84615385;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
border-color: transparent;
background-color: #e1ecf4;
color: #39739d;
}
.custom-menu ul li:hover {
background-color: #d0e6f6;
}
|
OK vậy là xong nhé
demo chính trang Flatsome.xyz nhé anh em.
Hãy tham gia Group Zalo và cùng học WordPress nhé – Chúc anh em thành công
