Thịnh Văn Hạnh Nếu bạn từng truy cập một website và ngay lập tức tìm thấy thứ mình cần chỉ nhờ thanh menu rõ ràng, dễ nhìn đó không phải là sự ngẫu nhiên. Menu ngang chính là “bản đồ điều hướng” giúp người dùng khám phá website nhanh hơn, ở lại lâu hơn và tăng tỷ lệ chuyển đổi đáng kể. Trong WordPress, đây cũng là một trong những yếu tố ảnh hưởng trực tiếp đến trải nghiệm người dùng (UX), SEO và cả tính chuyên nghiệp của giao diện.
Tuy nhiên, nhiều người mới bắt đầu thường nghĩ rằng tạo menu ngang trong WordPress là một thao tác phức tạp, cần biết code hoặc can thiệp sâu vào theme. Thực tế hoàn toàn ngược lại. Chỉ với vài bước thiết lập đơn giản, bạn đã có thể tạo một thanh menu chuyên nghiệp, responsive và tối ưu hiển thị trên cả máy tính lẫn điện thoại mà không cần kiến thức lập trình.
Trong bài viết này, bạn sẽ được hướng dẫn chi tiết cách tạo menu ngang trong WordPress từ A-Z, bao gồm: cách tạo menu cơ bản, cách thêm danh mục và trang vào menu, tùy chỉnh vị trí hiển thị, xử lý lỗi menu không hiện, và cả mẹo thiết kế menu đẹp mắt giúp website trông chuyên nghiệp hơn. Nếu bạn đang muốn tối ưu giao diện website WordPress một cách bài bản ngay từ những chi tiết nhỏ nhất, đây sẽ là phần hướng dẫn bạn không nên bỏ qua.
Tóm Tắt Bài Viết
Chuẩn Bị Bắt Buộc Trước Khi Tạo Menu
Trước khi bắt đầu tạo menu ngang trong WordPress, bạn cần chuẩn bị sẵn các nội dung sẽ hiển thị trên thanh menu. Đây là bước rất quan trọng nhưng thường bị người mới bỏ qua, dẫn đến tình trạng tạo menu xong nhưng không có liên kết để thêm vào hoặc menu hiển thị thiếu chuyên nghiệp.
Menu trong WordPress thực chất là tập hợp các liên kết điều hướng đến những nội dung trên website như Trang, Bài viết, Chuyên mục hoặc liên kết tùy chỉnh. Vì vậy, nếu website chưa có nội dung, bạn sẽ không thể xây dựng được một thanh menu hoàn chỉnh.
Ví dụ, khi người dùng nhấn vào mục “Giới thiệu” hoặc “Liên hệ” trên menu, WordPress cần có sẵn các trang tương ứng để điều hướng. Do đó, việc chuẩn bị cấu trúc nội dung trước sẽ giúp:
- Tạo menu nhanh và logic hơn
- Tránh phải chỉnh sửa menu nhiều lần
- Giúp website chuyên nghiệp ngay từ đầu
- Tối ưu trải nghiệm người dùng và SEO
Cần tạo sẵn những gì?
Dưới đây là các nội dung cơ bản bạn nên tạo trước khi thiết lập menu ngang trong WordPress.
Tạo sẵn Trang (Pages)
Pages thường được dùng cho các nội dung cố định và quan trọng trên website. Một số trang phổ biến gồm:
- Trang chủ
- Giới thiệu
- Dịch vụ
- Blog
- Liên hệ
Để tạo Trang trong WordPress, bạn thực hiện như sau:
- Đăng nhập vào trang quản trị WordPress
- Chọn Pages (Trang) → Add New (Thêm mới)
- Nhập tiêu đề trang
- Thêm nội dung nếu cần
- Nhấn Publish (Xuất bản)
Sau khi tạo xong, các trang này sẽ xuất hiện trong danh sách để bạn thêm vào menu.
Tạo Bài viết (Posts) hoặc Chuyên mục (Categories)
Nếu website có phần tin tức, blog hoặc chia sẻ kiến thức, bạn nên tạo thêm bài viết và chuyên mục trước khi làm menu.
Ví dụ các chuyên mục phổ biến:
- Tin tức
- Kiến thức
- Thủ thuật WordPress
- Marketing Online
Cách tạo chuyên mục:
- Vào Posts (Bài viết) → Categories (Chuyên mục)
- Nhập tên chuyên mục
- Nhấn Add New Category
Cách tạo bài viết:
- Vào Posts → Add New
- Nhập tiêu đề bài viết
- Chọn chuyên mục phù hợp
- Nhấn Publish
Việc chuẩn bị đầy đủ Pages, Posts và Categories sẽ giúp quá trình tạo menu ngang trong WordPress diễn ra nhanh chóng, dễ sắp xếp và chuyên nghiệp hơn rất nhiều.
> Tìm hiểu thêm: WordPress là gì? Những thông tin cần biết về WordPress
Bước 1: Đầu tiên bạn cần Backup CSS
Bước 2: Thêm đoạn code sau vào Custom Css và styles.css trong Thesis 2
/**************[Menu Horizontal ]**********/
ul.fmt_dropdown,
ul.fmt_dropdown li,
ul.fmt_dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.fmt_dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.fmt_dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.fmt_dropdown li.hover,
ul.fmt_dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.fmt_dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.fmt_dropdown ul li {
float: none;
}
ul.fmt_dropdown ul ul {
top: 1px;
left: 99%;
}
ul.fmt_dropdown li:hover > ul {
visibility: visible;
}
ul.fmt_dropdown-linear {
width: 100%;
}
ul.fmt_dropdown-linear ul li {
float: left;
}
ul.fmt_dropdown-linear li.hover,
ul.fmt_dropdown-linear li:hover {
position: static;
}
ul.fmt_dropdown-linear ul ul {
display: none !important;
}
ul.fmt_dropdown {
font-weight: bold;
}
ul.fmt_dropdown li {
padding: 12px 10px;
border-left: 1px solid #7E6500;
color: #FFF;
border-right: 1px solid #E2B80E;
text-transform: uppercase;
}
ul.fmt_dropdown li:last-child {border-right:none;}
ul.fmt_dropdown li.hover,
ul.fmt_dropdown li:hover {
color: #000;
}
ul.fmt_dropdown a {color:#fff;background:none;border:0}
ul.fmt_dropdown a:visited { color: #fff; text-decoration: none; }
ul.fmt_dropdown a:hover { color: #eee; }
ul.fmt_dropdown a:active { color: #eee; }
/* -- level mark -- */
ul.fmt_dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.fmt_dropdown ul li {
font-weight: normal;
}
ul.fmt_dropdown *.sub-menu {
padding-right: 20px;
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.fmt_dropdown {
width: 1000px;
margin: 0 auto;
float: none;
display: block;
}
ul.fmt_dropdown li {
background:none;
}
,
ul.fmt_dropdown li:hover {
color: #fff;
}
ul.fmt_dropdown ul {
max-width: 980px;
margin-top: 40px;
background: #EBD852; /*Background Menu con*/
height: 42px; /* Chieu cao menu con */
left:0;
width: auto;
padding-left:0px;
text-transform: uppercase;
}
ul.fmt_dropdown li ul li a{padding:8px 15px;}
/**Chú ý Chú ý**/
li.menu-item-15 ul.sub-menu{padding-left:250px;width:730px} /* tong cong 980px */
li.menu-item-80 ul.sub-menu{padding-left:425px;width:555px}/* tong cong 980px */
ul.fmt_dropdown li ul li a,
ul.fmt_dropdown li ul li a:visited {color:#000}
ul.fmt_dropdown ul li a {line-height:15px}
ul.fmt_dropdown ul li a:hover {
margin: 0;
border: none;
color:#BF8D00;
background:none;
}
ul.fmt_dropdown ul *.sub-menu {
padding-right: 7px;
background-image: none;
}
ul.sub-menu li {background:none;border:0}
/*---[End Menu Horizontal ]--*/
Bước 3:
Trong trường hợp với theme thông thường, bạn cần thêm đoạn code sau vào functions.php:
<?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
$classes[] = "fmt_dropdown fmt_dropdown-linear";
return $classes;
}
?>
Còn đối với Thesis bạn truy cập vào Editor HTML, kiếm box menu box đồng thời thêm vào class fmt_dropdown fmt_dropdown-linear
Bước 4: Chỉnh sửa màu sắc, độ cao cho phù hợp với menu của bạn.
Trên đây, BKNS đã cung cấp cho bạn cách tạo menu ngang trong wordpress. Hy vọng, những thông tin mà BKNS cung cấp hữu ích với bạn. Nếu còn bất cứ điều gì băn khoăn, hãy cho BKNS biết thông qua phần bình luận bên dưới. Thường xuyên truy cập website bkns.vn để cập nhật thêm nhiều bài viết hữu ích khác nhé!
Theo dõi trên
