Hotline : 07 088 44444
Thích
Chia sẻ

Tạo menu ngang trong WordPress chỉ với 2 bước

28/04/2021

Nhiều người dùng cho rằng việc tạo menu ngang trong WordPress sẽ “vừa mắt” khách truy cập hơn. Do đó, bài viết dưới đây sẽ hướng dẫn tạo menu ngang trong WordPress chỉ với 2 bước đơn giản.

Bạn có thể tạo menu ngang để giới thiệu các danh mục hoặc trang page cụ thể cho khách truy cập trang web của mình. Các menu ngang thường nằm ngay bên dưới tiêu đề trang web, nơi hầu hết khách truy cập đều dễ dàng nhìn thấy chúng. Có hai bước để tạo menu ngang trong WordPress: thêm code vào file mẫu hay thiết kế menu bằng CSS

Trước khi bắt đầu tạo menu ngang trong WordPress

Bài viết này giải thích làm thế nào để thêm menu ngang trong WordPress. Như với hầu hết các tùy chỉnh, các phương pháp bạn sử dụng phụ thuộc vào phiên bản WordPress và theme của nó. Các ví dụ trong bài viết này đang sử dụng phiên bản WordPress 4.8 chạy Classic theme.

Có ba phương pháp bạn có thể sử dụng để chỉnh sửa file:

  • Một số file có thể được chỉnh sửa trực tiếp trong WordPress. Trong WordPress dashboard, đi tới Appearance  > Editor và tìm file trong danh sách ở bên phải màn hình. Bấm vào tên file để mở nó trong Editor.
  • Nếu file bạn cần chỉnh sửa không có sẵn trong trang WordPress dashboard, bạn có thể tải file xuống bằng FTP client. Sau đó chỉnh sửa bằng trình chỉnh sửa văn bản ưa thích của bạn. Khi bạn đã thực hiện các thay đổi trong file đó, hãy lưu và tải file lên.
  • Bạn cũng có thể chỉnh sửa file trong cPanel File Manager.

Thêm code vào file mẫu (template)

Để có hiệu quả tốt nhất, hãy sử dụng danh sách ngắn các liên kết trong menu ngang của bạn. Khi có quá nhiều mục sẽ làm lộn xộn page và khiến người truy cập ít khi muốn nhấp vào liên kết. Trong ví dụ này, chúng tôi có các liên kết đến bốn danh mục (Chải lông chó, Cách thực hiện, Công thức nấu ăn, Công nghệ) và trang web tài liệu WordPress. Danh sách được bao “bọc” trong thẻ <div> với ID navmenu.

<div id="navmenu">
<ul>
        <?php wp_list_categories('depth=1'); ?>
	<li><a href="http://codex.wordpress.org">help</a></li>
</ul>
</div>

Mục danh sách đầu tiên bao gồm template tag wp_list_categories () với tham số depth có giá trị là 1. Điều này trả về danh sách các danh mục top-level. Mục danh sách thứ hai là một liên kết đến trang web tài liệu WordPress. Trong ví dụ này, chúng tôi đang thêm code vào file header.php của theme ngay bên dưới tiêu đề <div>.

Thiết kế menu bằng CSS

Trong theme style.css của bạn, hãy thêm code sau làm tham chiếu đến ID navmenu div mà bạn đã tạo. Điều này xác định div là một list không có thứ tự, không có bất kỳ khoảng đệm (thụt lề) hoặc hình ảnh (dấu đầu dòng bullets) nào.

Xem thêm: Tạo menu ngang trong HTML và CSS

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }

Thêm một dòng khác để chỉ định rằng các mục trong danh sách được hiển thị theo chiều ngang thay vì theo chiều dọc và thêm một số phần đệm padding để các liên kết không bị chen chúc với nhau.

#navmenu li {display: inline; padding: 5px 20px 5px 20px}

Hãy xóa thêm gạch chân liên kết mặc định.

#navmenu a {text-decoration:none; }

Kết quả cuối cùng là danh sách các liên kết ngang này ngay bên dưới tiêu đề trang web:

Như vậy là ta đã hoàn tất việc tạo menu ngang trong WordPress. Chúc các bạn thành công!

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với Vietnix thông qua các kênh sau:
  • Hotline: 1800 1093 - 07 088 44444
  • Email: support@vietnix.vn
  • Hoặc chat trực tiếp với Vietnix thông qua biểu tượng Livechat ở góc phải màn hình. Đội ngũ chuyên viên của chúng tôi luôn sẵn sàng tư vấn và hỗ trợ bạn 24/7.
Vietnix hiện đang có chương trình khuyến mãi lớn nhất trong năm, giảm giá TRỌN ĐỜI: Đăng ký dùng thử ngay và Vietnix sẽ hoàn tiền 100% nếu quý khách không hài lòng với chất lượng sản phẩm, dịch vụ!
Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PersonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé!
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments