Lấy menu trong WordPress với cấu trúc Bootstrap

Việc Lấy menu trong Wordpress khá quan trọng, bởi nó cho phép các developer tùy biến cấu trúc, class hay vị trí xuất hiện của menu. Vậy trong bài viết này, mình sẽ chia sẻ với cách bạn cách Lấy menu trong WordPress với cấu trúc Bootstrap.

Tại sao lại “với cấu trúc Bootstrap”?

Bởi đây là cấu trúc Menu phổ biến hơn cả, và nó có một cấu trúc tiêu chuẩn. Hơn cả đó là việc bạn sẽ nhận được menu đẹp ngay khi gắn Bootstrap vào website.

Tại sao lại "với cấu trúc Bootstrap"?
Tại sao lại “với cấu trúc Bootstrap”?

Như ví dụ trên đây, công việc mình làm chỉ là dùng code lấy ra menu và nó sẽ luôn đẹp như thế này. Thời gian bạn làm các bước để lấy nó đơn giản chỉ chưa đầy 20 phút.

Các bước thực hiện Lấy menu trong Wordpress

Các bước Lấy menu trong WordPress bao gồm:

  • Thêm thư viện wp-bootstrap-navwalker
  • Thêm Bootstrap
  • Lấy Menu – hiển thị

1. Thêm thư viện wp-bootstrap-navwalker và Bootstrap

Đây là một thư viện đã được những coder hàng đầu xây dựng, gồm 2 bản chính:

Ở đây thì các bạn hãy tìm và tải file: wp-bootstrap-navwalker hoặc class-wp-bootstrap-navwalker

Và bạn hãy lấy thư viện Bootstrap 3 hoặc 4 tùy thuộc vào bộ code mà bạn sử dụng. http://getbootstrap.com/

2. Lấy Menu – Hiển thị

Ở đây để Lấy menu trong Wordpress, chúng ta có đoạn code như sau:

Code này có thể sử dụng trong file header, hoặc bất kỳ vị trí nào mà bạn muốn.

Bên cạnh đó

Bạn cũng có thể đăng ký ngay một phần Menu mới với id là “bst_menu” như code trên, với đoạn lệnh này tại file function:

Ta sẽ được phần hiện thị trong Admin – Menu như sau:

Ngoài ra với riêng theme Genesis

Với riêng theme Genesis, dành cho việc hiển thị trên mobile mình có full code tại file function như sau:

Kết

Vậy là trên đây bạn đã hoàn thành về việc Lấy menu trong WordPress với cấu trúc Bootstrap.

Mở rộng thêm, để hiển thị mobile chuyên nghiệp hơn, bạn hãy sử dụng: Headroom Js – Thư viện giúp ẩn hiện header chuyên nghiệp

Hay đặt lên Header với ngày giờ: Chạy ngày, giờ hiện tại với PHP và JavaScript

Hi vọng bài viết này có ích cho bạn. Đặt câu hỏi ngay nếu bạn có thắc mắc nhé.!

Leave a Reply

avatar
  Subscribe  
Notify of
%d bloggers like this: