Thiết kế theme WP: Menu trong WordPress

Thật sự cũng chẳng bít viết gì trước, cái gì sau nữa hôm nay đành viết về menu trong wordpress vậy. Đây là một phần rất quan trọng vì tính cần thiết của nó, một website không thể không có menu, menu giống như một sự định hướng, dẫn đường người dùng khai thác nội dung web mình.

Wordpress cho phép bạn tạo menu một cách dễ dàng nhất có thể, và hiển nhiên bạn có thể tạo nhiều menu ví dụ bcdonline.net có 2 menu: top và chính.

Tạo menu trong wordpress

Trước hết xin nói tí về file functions.php đây là file mà wordpress đọc đầu tiên khi bạn chạy web site wordpress và ở đây chúng ta khai báo các hàm mình sử dụng trong khi thiết kế theme.

Mở file functions.php lên gõ vào hàm đăng ký với wordpress là theme bạn có sử dụng menu. Cấu trúc viết như sau:

<!-- 
//Cấu trúc:
    register_nav_menus( array( $location => $description ) );
-->

Giả sử mình tạo hai menu, 1 là menu chính, 2 là menu top.

<!--
// Menu chính
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'bcdonline' ),
	) );


// Menu top
    	register_nav_menus( array(
		'top' => __( 'Top Navigation', 'bcdonline' ),
	) );

-->

Lúc này bạn save lại và đăng nhập vào trang quản trị nhìn vào mục Appearance bạn sẽ thấy nó đã có link menu bạn click vào link đó để tạo menu.

Register nav menu trong WordPress

Register nav menu trong WordPress

Khi click vào đây rồi bạn nhìn bên phải tiến hành nhập tên menu và khởi tạo, ở đây mình chỉ tạo Primary menu thôi, top menu thì tương tự.

tao menu wordpress

Khởi tạo menu wordpress

Trong WordPress hỗ trợ cho bạn các tùy chọn menu.

Custom menu wordpress

Dạng menu này cho phép bạn nhập địa chỉ (URL) vào và nhãn cho URL đó. Dùng để trỏ đến một trang nào đó ngoài internet hay một trang tĩnh nào đó.

Custom menu wordpress

Custom menu wordpress

Pages menu WordPress

Dạng menu này sẽ trỏ đến các pages bạn chọn trong WordPress. Nó sẽ hiển thị lên danh sách các pages bạn khỏi tạo vào chọn vào để lên mục menu. Bạn nào còn chưa hiểu các khái niệm thì vào các khái niệm cơ bản trong wordpress.

Pages menu wordpress

Pages menu wordpress

Categories menu WordPress

Đây là dạng menu trỏ đến các categories (thể loại) trong site wordpress của bạn, tương tự như pages khi chọn vào view all sẽ cho danh sách tất cả các categories cho bạn chọn.

Categories menu wordpress

Categories menu wordpress

Sau khi add vào menu tất cả thì bạn sẽ có được giao diện sau

Menu wordpress

Menu wordpress

Lúc này công việc thay đổi vị trí, và tạo các cấp menu con thì bạn sẽ kéo ra, kéo vào, kéo tới, kéo lui, kéo xui, kéo ngược… kéo gì đó kéo ở các mục này cuối cùng bấm nút save lại, thật dễ dàng. hii..

Hiển thị menu ra trang chủ của wordpress

Khi tạo rồi lúc này làm sao để hiển thị nó ra ngoài trong chủ. việc này khá là nan giải hehe.. Bây giờ bạn mở file nào muốn hiển thị menu bỏ một ít code vào là xong.

Ở đây mình để vào trang header.php. Mở lên bạn gõ vào đoạn code sau, phần menu chính thì để ở vị trí menu chính, menu top thì để ở vị trí menu top tùy vào sự sắp xếp layout của bạn:

<!--
//Menu Chính
<?php wp_nav_menu( array( 'container_class' => 'menu-primary', 'theme_location' => 'primary' ) ); ?>


//Menu Top
<?php wp_nav_menu( array( 'container_class' => 'menu-top', 'theme_location' => 'top' ) ); ?>
-->

Sau đó vào trong admin menu set hai menu vào đúng vị trí hiển thị.

Set vị trí menu

Set vị trí menu

Bạn phải chú ý đến ID của menu và sắp xếp cho hợp lý vị trí, tránh nhầm lẫn. Xong save lại vào chạy lên test thử:

Menu wordpress demo

Menu wordpress demo

Kết luận:
Bài hôm nay tôi đã làm rất kỹ cho các bạn, hii.. Vậy là chúng ta đã tạo được menu trong WordPress, tuy đây chỉ là mình tạo mình xài người dùng thì sẽ k code như mình dc. Tuy nhiên đây chỉ là bước đầu các bạn cứ theo dõi và comment nha!

Nguồn: http://codex.wordpress.org/Function_Reference/register_nav_menu

VN:F [1.9.22_1171]
Rating: 7.6/10 (10 votes cast)
Thiết kế theme WP: Menu trong WordPress, 7.6 out of 10 based on 10 ratings
Share This