Top Navigation cho Genesis Childthemes không hỗ trợ

Mình vừa thiết kế xong cho blog của mình một thanh Top Navigation Menu như các bạn có thể thấy (thanh menu ở trên cùng). Lý do mình tạo thêm thanh menu này vì mình muốn đưa thêm nhiều page ra ngoài trong khi Primary Navigation Menu thì lại quá ngắn. Thông thường một Genesis Childtheme có hai thanh menu là Primary Navigation và Secondary Navigation. Một số themes đặt Secondary Navigation Menu ở bên trên nhưng một số themes lại đặt ở bên dưới của Primary Navigation Menu. Bây giờ mình sẽ hướng dẫn các bạn đưa thanh Secondary Navigation Menu lên trên để thành Top Navigation Menu hoặc tạo ra thêm một thanh Top Navigation Menu hoàn toàn mới.

Sử dụng Secondary Navigation Menu

Cách đơn giản nhất để tạo Top Navigation Menu là sử dụng Secondary Navigation Menu. Nếu thanh Secondary Navigation nằm ở bên dưới, chúng ta sẽ chuyển nó lên trên top bằng cách thêm code sau vào file funstion.php trong childtheme:

remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

Tạo thêm thanh menu mới

Trong trường hợp bạn vừa muốn sử dụng thanh Secondary Navigation Menu, vừa muốn có một thanh menu trên top. Khi đó chúng ta sẽ tạo thêm một thanh menu thứ ba. Để làm việc này, trước tiên chúng ta phải khai báo thêm một thanh menu mà mình đặt là Top Navigation Menu bằng cách sử dụng code:

add_theme_support ( 'genesis-menus' , array ( 
	'primary' => 'Primary Navigation Menu' , 
	'secondary' => 'Secondary Navigation Menu' ,
	'top' => 'Top Navigation Menu' ) );

Sau khi chèn code này vào file funstion.php, bạn vào Appearance -> Menus bạn sẽ thấy có thêm một thanh menu nữa có tên là Top Navigation Menu.

top navi

Tiếp theo chúng ta sẽ thêm nội dung cho menu này bằng cách dùng code:

function top_navigation_menu() {
	if ( ! genesis_nav_menu_supported( 'top' ) )
		return;
	if ( has_nav_menu( 'top' ) ) {
		$args = array(
			'theme_location' => 'top',
			'container'      => '',
			'menu_class'     => genesis_get_option( 'nav_superfish' ) ? 'menu genesis-nav-menu menu-top superfish' : 'menu genesis-nav-menu menu-top',
			'echo'           => 0,
		);
		$nav = wp_nav_menu( $args );
		$pattern = genesis_markup( '<nav class="top">%2$s%1$s%3$s</nav>', '<div id="topnav">%2$s%1$s%3$s</div>', 0 );
		$nav_output = sprintf( $pattern, $nav, genesis_structural_wrap( 'nav', 'open', 0 ), genesis_structural_wrap( 'nav', 'close', 0 ) );
		echo apply_filters( 'third_navigation_menu', $nav_output, $nav, $args );
}}

Bây giờ bạn đã có được một thanh menu thứ ba, bạn có thể thêm các đối tượng cho thanh menu này giống như đối với Primary Navigation Menu và Secondary Navigation Menu.

Công việc cuối cùng là đưa Top Navigation Menu ra ngoài. Ta tiếp tục sử dụng code:

add_action( 'genesis_before_header', 'top_navigation_menu' );

Còn một việc nữa là chúng ta sẽ design thanh Top Navigation Menu sao cho phù hợp với giao diện của blog. Để làm việc này chúng ta sẽ thêm một số lớp css sau vào file style.css:

/* Top Navigation
------------------------------------------------------------*/
#topnav {
	background: #000;
	clear: both;
	overflow: hidden;
}
#topnav .wrap {
	color: #fff;
	font-size: 13px;
	margin: 0 auto;
	width: 960px;
}
#topnav ul {
	float: right;
	margin: 0px;
	width: 100%;
}
#topnav li {
	float: right;
	text-align: center;
	list-style-type: none;
	font-family:"Times New Roman", Times, serif;
	font-size: 13px;
	margin: 0 0 0 10px;
}
#topnav li a {
	color: #fff;
	display: block;
	font-size: 15px;
	padding: 5px 17px 5px 15px;
	position: relative;
	text-decoration: none;
}
#topnav li a:hover,
#topnav li a:active,
#topnav .current_page_item a,
#topnav .current-cat a,
#topnav .current-menu-item a {
	background: #333;
	color: #fff;
}
#topnav li a .sf-sub-indicator {
	overflow: hidden;
	text-indent: -9999px;
}
#topnav li li a,
#topnav li li a:link,
#topnav li li a:visited {
	background: #fff;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	color: #CC0000;
	font-size: 13px;
	padding: 5px 10px;
	text-transform: none;
	width: 100px;
	text-align: left;
}
#topnav li li a:hover,
#topnav li li a:active {
	background: #E0E0E0;
}
#topnav li ul {
	height: auto;
	left: -9999px;
	margin: 0 0 0 -10px;
	position: absolute;
	width: 100px;
	z-index: 9999;
}

Đây là code mình sử dụng, các bạn có thể thiết kế lại cho phù hợp với blog của mình.

Như vậy là bạn đã có được một thanh Top Navigation Menu hoàn chỉnh. Trong quá trình thực hiện nếu có vấn đề thắc mắc bạn hãy để lại comment bên dưới. Chúc bạn thành công! {c1}

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. covert store builder says:

    cái này trang trí cho Top menu thôi phải k? k hiểu cho lắm vì mặc định childtheme của Genesis nó có top menu mà?

    • Đâu phải mặc định của child theme là có top menu. Chỉ một số là có còn một số thì không. Chẳng hạn như theme Copyblogger mình sử dụng thì không có

  2. Mình làm mới mới được oải quá

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!