Làm cách nào để WordPress gọi menu tùy chỉnh thanh điều hướng thứ cấp / đa cấp?

Sê-ri网络 营销mọi người chọnWordPressĐếnxây dựng một trang web, nhưng thanh điều hướng của một số chủ đề không hỗ trợ menu phụ / nhiều cấp. Nếu không hài lòng, bạn có thể thử thêm và sửa đổi kiểu menu của chủ đề theo cách thủ công.

Việc sửa đổi bắt đầu từ header.php. Một chức năng quan trọng trong tệp mẫu này là hiển thị menu.

Nếu bạn sử dụng mã để gọi danh mục dưới dạng menu cũng được, nhưng không tiện cho việc sắp xếp các mục trong menu.

Thư mục với các danh mục con không dễ xử lý, vì vậy tôi cũng muốn thêm các chức năng menu tùy chỉnh vào chủ đề của mình giống như các chủ đề khác.

Không khó để thêm chức năng tùy chỉnh menu vào theme mới làm, chủ yếu có 2 bước.

Bước đầu tiên, đăng ký menu WordPress

Để sử dụng menu, trước tiên bạn phải đăng ký, mở tệp chức năng trong chủ đề và nối mã sau ▼

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>

• Nếu không có tệp functions.php trong chủ đề, hãy tạo một tệp mới và sao chép đoạn mã trên để lưu nó.

Đăng nhậpPhụ trợ WordPress, rồi đi tới Giao diện → Trình đơn.

Nếu bạn có thể nhìn thấy màn hình bên dưới, điều đó có nghĩa là bạn đã đăng ký với tư cách là ▼

Ở trên đăng ký 2 menu:

1. Một menu trên cùng Top Menubar.
2. menu chính Main thanh thực đơn.

Bước thứ hai, lệnh gọi menu WordPress

Sau khi menu được đăng ký, nó có thể được gọi trong tệp mẫu chủ đề. Đặt đoạn mã sau vào tệp header.php và bạn có thể gọi nó ở nơi bạn muốn hiển thị menu.

Trong tệp header.php, hãy gọi "menu trên cùng" ▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

Trong tệp header.php, hãy gọi "menu chính" ▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

'menu_navi')); ?>

Gọi "menu dưới cùng" trong tệp footer.php ▼

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

Bước thứ ba, menu cài đặt

Sau khi menu được đăng ký và vị trí hiển thị của menu được xác định trong tệp chủ đề, bạn có thể tạo một mục menu mới trong nền WordPress.

Sau đó, gán mục menu mới tạo vào menu đã đăng ký và đề xuất mối quan hệ tương ứng ▼

Tạo thanh điều hướng menu đa cấp trong wordpress

Bây giờ chúng ta hãy nói về cách tạo một menu đa cấp trong WordPress:

Trước tiên, xóa mã menu gốc trong tệp chức năng của chủ đề WordPress của riêng bạn.

hoặc thêm mã này trực tiếp ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• Lưu ý: phải trongĐã thêm bên ngoài.

Sau đó, tìm mã PHP cho chủ đề để gọi menu, nếu nó là thô, nó thường như thế này ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

loại bỏ nó và thay thế nó bằng ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

• Lưu ý: Đảm bảo mã này không chứa các div khác, nếu không, nó sẽ bị giới hạn bởi div bên ngoài.

Bước tiếp theo là thêm mã chức năng JS thả xuống và thêm mã sau vào tệp JS của chủ đề ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

Các kiểu CSS của menu WordPress

Cuối cùng là làm đẹp kiểu CSS.

Loại hiệu ứng nào nên là, hãy phát huy hết trí tưởng tượng của bạn, CSS có thể làm được ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}

• Thêm mã CSS ở trên vào tệp style.css của chủ đề và lưu nó.

Sau khi lưu, làm mới trang đầu của trang web, bạn có thể thấy hiệu quả, rất đơn giản phải không?