• author
    Phúc Mạnh Nguyễn Xin lỗi mọi người, vì website của mình đang trong tình trạng cải thiện, nên một số tính năng chưa được hoàn thiện mong được sự góp ý của các bạn...notification-date">
Xem tất cả tin nhắn
Xem tất cả thông báo

Trong WordPress nói về tính năng menu trong WordPress phải nói là rất mạnh mẽ và linh hoạt trong việc tạo menu cho website, họ không giới hạn số lượng menu tạo ra và bạn cũng có thể chèn nó vào bất cứ đâu.

Theo mặc định, nhiều Theme WordPress đi kèm với các vị trí và bố cục menu được xác định trước.

Trong bài này mình sẽ chỉ bạn cách viết code để tạo ra một Menu Location (vị trí đặt menu) và cách bạn thêm location này vào bất kỳ chỗ nào trong theme. Và cuối cùng là chỉ việc truy cập vào Appearance -> Menus để thêm menu vào location bạn vừa tạo.

Cách tạo menu trong WordPress

Bước 1. Khởi tạo Menu Location

Điều đầu tiên bạn cần làm là đăng ký menu điều hướng mới của bạn bằng cách thêm mã này vào tệp functions.php của chủ đề của bạn.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên My Custom Menu với slug là my-custom-menu. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài.

Bây giờ bạn có thể vào Appearance » Menus page trong admin WordPress của bạn và cố gắng tạo hoặc chỉnh sửa một menu mới. Bạn sẽ thấy ‘My Custom Menu’ làm tùy chọn vị trí chủ đề.

Thế nếu muốn thêm nhiều location thì sao? Đơn giản, chỉ việc thêm nhiều tham số vào hàm bên trên như sau:

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' );

Bước 2. Hiển thị location ra ngoài theme

Tiếp theo, chúng ta cần hiển thị menu điều hướng mới trong chủ đề WordPress của bạn. Địa điểm phổ biến nhất nơi các menu điều hướng thường được đặt nằm trong phần header của trang web.

Để hiển thị location, ta sẽ dùng hàm wp_nav_menu(). Hàm này nó có nhiều tham số hơn là cái hàm tạo location. Bây giờ hãy thử mở theme của bạn lên và chèn hàm này vào vị trí mà bạn thích, như file header.php chẳng hạn.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', // tên location cần hiển thị
    'container_class' => 'custom-menu-class' ) );  //class của container
?>

Ở trên mình đã lượt bỏ đi khá nhiều tham số không bắt buộc, bạn có thể xem danh sách đầy đủ tại đây.

Bạn có thể sử dụng lớp CSS .custom_menu_class để tạo kiểu cho các menu của mình. Đây là một mẫu CSS để giúp bạn bắt đầu:

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;
}

 

Như vậy là mình đã hoàn thành xong bài viết hướng dẫn tạo menu trong WordPress rồi trong bài viết tới mình sẽ hướng dẫn các bạn tạo menu thân thiện với thiết bị di động trong WordPress.

Tạo menu thân thiện với thiết bị di động trong WordPress

Bạn có thể thêm hiệu ứng trượt (ở trên), hiệu ứng thả xuống cho các menu di động.

Mình có hướng dẫn từng bước chi tiết về cách tạo các menu WordPress đáp ứng cho thiết bị di động.

Chia sẻ ngay

Tags: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*
*

Hiển thị ngày cập nhật cuối cùng của bài viết trong WordPress
Hiển thị thông tin của người dùng hiện tại khi đã đăng nhập website
Bật debug gỡ lỗi trong WordPress
Hiển thị Menu Breadcrumb trong WordPress với SEO by Yoast
Tạo thanh menu định hướng breadcrumbs cho website wordpress
Hiển thị tổng số nhận xét (comment) trong WordPress
Thêm hình ảnh nổi bật – hình thu nhỏ bài đăng trong WordPress
Lấy nội dung của bài viết và giới hạn độ dài nội dung trong WordPress
Hướng dẫn lấy tiêu đề bài viết mới nhất trong wordpress
Thông tin

Mình có nhận thiết kế web nha! Mình cũng đang cần tìm đồng đội làm front end vả wordpress tại Bình Dương nếu bạn có thời gian thì PM mình nhá!

Hình ảnh
Bình luận mới
tam vu
2018-08-04 05:43:10

Rất chi tiết và đầy đủ. Thanks...Xem thêm

Nguyễn Mạnh Phúc
2018-07-28 09:27:20

Đã duyệt!...Xem thêm

phat
2018-07-28 06:45:09

Hi , mình rất thích giao dien woohoo này , nhưng mà ko có xiền :v Bạn có thể share cho mình qua mail : phathuynh6868@outlook.com đc hăm thanks you !!...Xem thêm

Nguyễn Mạnh Phúc
2018-07-25 14:41:27

Done!...Xem thêm

Nguyen Manh Doan
2018-07-23 03:58:33

Chào bạn, bạn cho mình xin key với nhé. Mail mình "nguyenmanhdoan1307@gmail.com" Cảm ơn bạn!...Xem thêm

nhan
2018-07-22 11:09:28

Hi, bạn có thể chia sẻ theme cho mình qua email: nttnhan.tpu@gmail.com ko ạ? thank you! <3...Xem thêm

DSN
2018-07-17 15:38:54

Mình xin key , cảm ơn bạn! daosinguyen@gmail.com...Xem thêm

Nguyễn Mạnh Phúc
2018-07-15 03:39:26

Đã duyệt...Xem thêm

mạnh
2018-07-11 17:17:16

b share cho mình vs, mail mình là manhmd.avi@gmail.com. Thanks bạn nhiều...Xem thêm

Phan Viết Đô
2018-07-10 00:40:32

Thanks you bài viết rất bổ ích....Xem thêm

thai doan
2018-07-09 02:34:27

bạn cho mình xin key flatsome với, email của mình: doanvanvinhthai@gmail.com xin cám ơn...Xem thêm

anh khoa
2018-07-09 02:25:47

Bạn có thể gởi plugin cho mình được không ạ: dichvumaildn@gmail.com Cảm ơn bạn!...Xem thêm

Thọ
2018-07-06 04:44:41

ad cho em xin key với ạ, em cám ơn nhiều hihi <3...Xem thêm

Long
2018-07-04 10:09:11

bạn cho mình xin key flatsome với, email của mình: dinhlong.hoo@gmail.com...Xem thêm

ThanhHV
2018-07-01 05:58:39

Cho mình xin key với, email của mình: hovanthanhkd@gmail.com...Xem thêm

Nguyễn Mạnh Phúc
2018-06-27 13:57:11

Oke a!...Xem thêm

ThanhTrungIT.Net
2018-06-26 02:08:59

Bác nào cần mua key flatsome bản quyền cứ liên hệ em :D huhu ad duyệt hộ e...Xem thêm

Nguyễn Mạnh Phúc
2018-06-18 10:28:41

Mình đã để link trên đó rồi bạn nhe! Bạn tại về theo đường link bên trên nhé!...Xem thêm

Chuong
2018-06-18 10:18:23

Tôi muốn intro...Xem thêm

Nguyễn Mạnh Phúc
2018-06-15 03:18:37

Mình đã gửi, bạn vui lòng check mail nhé!...Xem thêm

Đoàn Đạo
2018-06-14 16:20:35

Xin cảm ơn. Mình muốn xin theme woohoo bản mới nhất là 2.0.4 bạn có thể chia sẻ theme cho mình qua email laodai267@gmail.com được không....Xem thêm

Nguyễn Mạnh Phúc
2018-06-06 10:21:22

Đã duyệt....Xem thêm

Nguyễn Mạnh Phúc
2018-06-06 10:21:04

Đã duyệt....Xem thêm

Nguyễn Mạnh Phúc
2018-06-06 10:20:02

Đã duyệt....Xem thêm

Nguyễn Mạnh Phúc
2018-06-06 10:19:03

Đã duyệt....Xem thêm

Nguyễn Mạnh Phúc
2018-06-06 10:18:40

Đã duyệt....Xem thêm

Kun Kol
2018-06-06 01:13:32

Nếu được share cho mình với nhé. Cảm ơn bạn....Xem thêm

Xuân Tùng
2018-06-03 04:17:51

Cho mình xin key với, email của mình: xtung0102@gmail.com Thanks nhiều...Xem thêm

tuan
2018-06-03 02:21:30

bạn share cho mình với, mail của mình toibantang@gmail.com cảm ơn bạn :)...Xem thêm

Cathy
2018-06-01 11:01:02

This is really useful, thanks....Xem thêm

hihiweb.com
2018-06-01 02:24:44

Đã duyệt....Xem thêm

Hải
2018-06-01 01:28:31

Bạn có thể gửi plguin qua mail hai.goldenant@gmail.com được ko ? cám ơn...Xem thêm

hihiweb.com
2018-05-31 14:48:58

Inbox mình gửi Plugin cho nhé!...Xem thêm

Trường
2018-05-31 02:27:32

Mình chèn code ok nhưng phần chèn: font-awnsome vào header.php bị lỗi và chèn hiệu ứng ẩn hiện vào thẻ không đúng.Nên công cụ chat không có hiệu ứng chỉ là tĩnh. Mình xài wordpress vào add code đúng như hướng dẫn nhưng không bạn, bạn giúp mình với...Xem thêm

Jeffrey Gonsior
2018-05-29 10:34:07

That sure is one pretty site you have there. Can I ask you a very simple question? What kind of fertilizer do you use to make it grow so wonderfully?...Xem thêm

lưu tuấn ngọc
2018-05-26 01:14:41

Share cho mình key và theme nhé! Thanks b nh! mail: ngocdunganh1406@gmail.com...Xem thêm

tuan
2018-05-25 10:29:35

cho mình xin bản 3.5.1 nhé. Email: tuankido312@gmail.com...Xem thêm

hihiweb.com
2018-05-23 03:32:39

Có bạn nha! Bản này là bản mới nhất mình cập nhật thường xuyên nên bạn yên tâm sử dụng nhe!...Xem thêm

Khanh
2018-05-22 09:05:10

Bản này version mấy vậy ạ, phần UX builder có custome được product detail không...Xem thêm

Thiên Quân
2018-05-21 02:05:20

Cho mình xin key với, email của mình: light.1991.night@gmail.com...Xem thêm

Hiep Tran
2018-05-20 00:00:29

Mình đang cần My WP Backup Pro Bạn cho mìn xin nhé....Xem thêm

Phi
2018-05-17 16:46:59

Cho xin key bản 3.5.3 với bạn ơi, cám ơn nhiều nè ^^ email của mình : hotruongphi@gmail.com Thanks,...Xem thêm

hihiweb.com
2018-05-17 14:58:03

Cảm ơn bạn, mình sẽ cố gắng trong thời gian tới....Xem thêm

hihiweb.com
2018-05-17 14:57:19

Đã duyệt....Xem thêm

hihiweb.com
2018-05-17 14:55:57

Đã duyệt....Xem thêm

Linh
2018-05-17 07:59:44

cho mình xin với. mail : linhphamqt@gmail.com Cảm ơn ạ....Xem thêm

Dacia
2018-05-15 04:18:47

This paragraph is actually a pleasant one it helps new internet users, who are wishing in favor of blogging....Xem thêm

Trường
2018-05-13 08:44:34

cho mình xin key hay share themes nhe . cảm ơn bạn nhiều !! findthename20@gmail.com...Xem thêm

Lynell
2018-05-12 02:09:15

I could not refrain from commenting. Well written!...Xem thêm

minh
2018-05-11 17:51:09

cho mình xin một bản nhé. cảm ơn ad hihi...Xem thêm

Trần Trung Tín
2018-05-10 10:05:57

Bạn viết luôn ra cái plugin luôn cho tiện, chứ Code nhi nhăng quá trời mình không biết rằnh về code nên đọc nhức hết mắt ....Xem thêm

Đất và nhà
2018-05-05 02:17:50

email: nghiadv.it@gmail.com tks...Xem thêm

hihiweb.com
2018-05-03 02:09:43

Đã duyệt....Xem thêm

hihiweb.com
2018-05-03 02:09:25

Đã duyệt....Xem thêm

Chí Hải
2018-04-28 05:11:22

Mail của mình : daihue1950@gmail.com , cảm ơn bạn nhiều...Xem thêm

Chí Hải
2018-04-28 05:09:35

bạn cho mình xin key flatsome bản 3.5.3 với, mình xin cảm ơn...Xem thêm

binh
2018-04-12 08:10:54

cho mình xin với ạ.. mail : phamvothanhbinh@gmail.com Cảm ơn ạ....Xem thêm

thiet ke quan tra sua
2018-04-08 17:04:51

Hello everybody, here every one is sharing such know-how, so it's fastidious to read this web site, and I used to pay a quick visit this web site every day....Xem thêm

Cialis 20 mg
2018-03-27 01:32:38

This paragraph on the topic of Search engine optimization is in fact pleasant one, and the back links are actually very useful to market your site, its also known as SEO....Xem thêm

Đỗ Hoàng Chương
2018-03-18 16:41:24

Cám ơn bác đã chia sẽ! Bác cho em xin cái Purchase Code được không ạ? Em cám ơn! email: wecanprovn@gmail.com...Xem thêm

thuốc Trị viêm loét dạ dày
2018-03-17 22:15:49

Thanks for finally writing about >Dịch vụ thiết kế website giá rẻ | Hỗ trợ khách hàng tốt nhất - HiHiWeb <Loved it!...Xem thêm

tư vấn thiết kế nội thất căn hộ chung cư
2018-02-22 09:37:17

Giảm áp lực, mệt mỏi khi chuyển nhà, khi sửa chữa....Xem thêm

hon non bo xi mang
2018-02-18 06:04:11

Outstanding quest there. What happened after? Good luck!...Xem thêm

wellsfargodealerservices sign in
2018-02-15 09:26:47

Thank you a bunch for sharing this with all people you actually realize what you are talking about! Bookmarked. Kindly also discuss with my website =). We could have a link alternate arrangement between us...Xem thêm

Milianstig
2018-02-08 17:12:18

Surrogacy is very famous all over the world. The primary argue of it – a female become the arrival child’s mommy after childbirth. Large part of moms wish be a mom, but some of them couldn’t be. That is why in last years a new data appeared – surrogate. When pregnancy is medically unrealizable, there is only one way to be a mommy. It is surrogate. Also, in these cases apply for monetary satisfaction. Really, to find a healthy girl – needfull to ask medical clinic which grant this kind of service. We recommend to use this surragot agency. In these organization in Ukraine a lot of persons from US, Great Britain and other EU cities became surrogate mummy. Hense to the act surrogacy is legal. The validity and costs of surrogacy are very diverse. It depend from country, faith, color of eyes, etc. In our centers you can make a choice about kind of surrogate. We recommend for all our clients to use common surrogacy. But our service includes gestational surrogacy. In Feskov clinic are direction for surrogacy. When you enter to our organization based in Ukraine - a member of Feskov Human Reproduction Group, you get a administrator. This consultant will advise you about different moments from the push till the stop. As rule, surrogacy keep on 9 months. Then the consultant prepares all need papers and you can take the child. Also, the manager receive information your family next months. It you want to obtain a child, we recommend to go there www.mother-surrogate.com. Leaders which are able to help there are very clever. They will response for all your items. If you need any advice, they will help you. Also they will provide documents before this mode. On web-site you can discover datas. However you can find costs and packages. Administrators can help you at English. You can make option of it. If you want to receive consultation about mother surrogate as a process, Alexander Feskov will gave mind for you....Xem thêm

Hữu Thịnh
2018-01-28 18:16:05

Mò mãi cuối cung cũng ra được, thớt huống dẫn css giong tgdd dc k , minh ko rành về code lắm ,thank thớt....Xem thêm

hihiweb.com
2018-01-10 14:24:32

Đã duyệt....Xem thêm

Cao chí
2018-01-09 13:14:59

Share cho mình key và theme nhé, mình rất muốn mua theme này nhưng chưa có $, may quá có ad, cảm ơn ad nhiều nhé mail sinhvienuet1995@gmail.com...Xem thêm

hihiweb.com
2018-01-09 02:51:35

Đã duyệt...Xem thêm

Vu
2017-12-30 15:42:55

chào bạn! Mình thấy theme này khá đẹp, bạn cho mình xin để làm blog cá nhân nhé. Thanks...Xem thêm

hihiweb.com
2017-12-07 15:28:32

Đã duyệt!...Xem thêm

Hưng
2017-12-06 08:57:05

Share mình theme và key với nhé. Thanks bạn nhiều ! Mail : donghungbk@gmail.com...Xem thêm

Hưng
2017-12-06 08:55:30

Share mình theme và key với nhé. Thanks bạn nhiều !...Xem thêm

hihiweb.com
2017-12-05 14:04:27

Đã duyệt....Xem thêm

Bảo
2017-12-05 08:36:45

Bạn gửi cho mình một bản nhé, thanks bạn topxinh38@gmail.com...Xem thêm

hihiweb.com
2017-12-02 15:43:24

Bạn kiểm tra mail xem có chưa nhe!...Xem thêm

thanh
2017-11-22 01:30:41

Hi bác. Em check mail chưa có bác. Bác có thể gửi lại cho em được không ạ. Cảm ơn bác mail: phungthanhdhv@gmail.com...Xem thêm

hihiweb.com
2017-11-21 13:23:34

Đã duyệt....Xem thêm

thanh
2017-11-20 04:39:41

Bác cho em xin key theme flatsome với. Cảm ơn bác phungthanhdhv@gmail.com...Xem thêm

hihiweb.com
2017-11-18 16:19:00

Đã duyệt....Xem thêm

Thành
2017-11-08 12:24:59

anh cho em xin key theme flatsome với. em cảm ơn. gmail em . thanhtpvp@gmail.com...Xem thêm

hihiweb.com
2017-11-06 02:51:16

bạn kiểm tra kỹ lại xem, nếu chưa có file footer.php thì bạn tạo 1 file footer.php nhé!...Xem thêm

hihiweb.com
2017-11-04 12:32:25

Đã duyệt....Xem thêm

hihiweb.com
2017-11-04 12:32:02

Email không tồn tại!...Xem thêm

Mr Đặng
2017-10-30 19:15:07

Hello HiHiWeb, Mình thix Theme Woohoo v2.0.2 nhưng hiện tại chỉ có bản Woohoo 1.4 Mình có Theme NewSpaper 8 có Licence Key. Mình muốn đổi với Bạn or Bạn Chia Lại với Mình nha. Thanks Hihiweb Mr Đặng 0906834113...Xem thêm

Tran Tan Loc
2017-10-29 08:30:46

Share cho mình với...Xem thêm

hihiweb.com
2017-10-21 08:05:14

Đã duyệt....Xem thêm

hihiweb.com
2017-10-21 08:05:06

Đã duyệt....Xem thêm

hihiweb.com
2017-10-21 08:04:54

Đã duyệt....Xem thêm

hihiweb.com
2017-10-21 08:04:36

Bạn để lại gmail để mình gửi cho nhe!...Xem thêm

thanh son
2017-10-10 07:58:00

thanhson.x3@gmail.com cam on ban...Xem thêm

Tiến Đạt
2017-10-09 06:47:54

Share mình key với nhé. Thanks Mail: datnguyentien260888@gmail.com...Xem thêm

hoangson
2017-10-05 02:57:14

cho mình xin với nha ad thanks ad nhiều email: trinhduyhoangson@gmail.com...Xem thêm

Nhân Kiệt
2017-09-24 15:20:01

cho mình xin bản theme này nhe. Cảm ơn bạn...Xem thêm

hihiweb.com
2017-09-04 14:17:10

Vui lòng để lại mail để mình có thể gửi cho bạn nhé!...Xem thêm

hihiweb.com
2017-09-04 14:16:43

Đã duyệt....Xem thêm

Đặng Nhật Trường
2017-08-30 08:47:46

share giúp mình nha...Xem thêm

Nguyen
2017-08-30 04:13:56

Cho mình xin với ad. thanks ad email: caonguyentc@gmail.com...Xem thêm

hihiweb.com
2017-08-28 10:41:11

Đã duyệt....Xem thêm

hihiweb.com
2017-08-28 10:40:56

Đã duyệt....Xem thêm

Quang Vinh
2017-08-18 07:01:23

Share mình với nhé :D. Email: vinhnqps04313@fpt.edu.vn Cảm ợn ạ....Xem thêm

Annguyen
2017-08-18 06:40:05

nguyenphucan2410@gmailcom...Xem thêm

Công Minh
2017-08-02 13:47:39

sao mình không thấy mục footer.php nhỉ , bạn giúp mình với....Xem thêm

hihiweb.com
2017-07-27 04:56:56

Bạn để lại email rồi mình gửi qua cho nhé!...Xem thêm

JohnnieItarp
2017-07-25 15:26:55

Downloads WEB Scene Music FLAC/mp3 1990-2017 Private FTP https://0daymusic.org...Xem thêm

Viễn
2017-07-24 15:35:13

Share mình với, Thanks....Xem thêm

arrow