WordPress는 어떻게 보조/다단계 탐색 모음 사용자 정의 메뉴를 호출합니까?

많은인터넷 營사람들이 선택워드프레스(WordPress)왔다웹사이트를 구축, 하지만 일부 테마의 탐색 모음은 보조/다단계 메뉴를 지원하지 않습니다.만족하지 않는 경우 테마의 메뉴 스타일을 수동으로 추가하거나 수정할 수 있습니다.

수정은 header.php에서 시작되며 이 템플릿 파일의 중요한 기능은 메뉴를 표시하는 것입니다.

코드를 사용하여 카테고리를 메뉴로 호출하면 가능하지만 메뉴 항목을 정렬하는 것이 편리하지 않습니다.

하위 카테고리가 있는 디렉토리는 다루기가 쉽지 않기 때문에 다른 테마와 마찬가지로 내 테마에 사용자 정의 메뉴 기능을 추가하고 싶습니다.

새로 만든 테마에 메뉴 커스터마이징 기능을 추가하는 것은 어렵지 않으나 크게 2단계가 있습니다.

첫 번째 단계, 워드프레스 메뉴 등록

메뉴를 사용하려면 먼저 등록하고 테마 아래의 기능 파일을 열고 다음 코드를 추가해야 합니다 ▼

<?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' => __('底部菜单') ) );
}
?>

• 테마 아래에 functions.php 파일이 없으면 새로 생성하고 위의 코드를 복사하여 저장합니다.

로그인워드프레스 백엔드을 누른 다음 모양→메뉴로 이동합니다.

아래 화면이 보이면 ▼로 등록되었음을 의미합니다.

위는 2개의 메뉴를 등록합니다.

1. 탑 메뉴 탑 메뉴바.
2. 메인 메뉴 Main 메뉴바.

두 번째 단계, WordPress 메뉴 호출

메뉴를 등록한 후 테마 템플릿 파일에서 호출할 수 있으며 header.php 파일에 다음 코드를 넣으면 메뉴를 표시하고 싶은 위치에 호출할 수 있습니다.

header.php 파일에서 "톱 메뉴"를 호출합니다▼

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

header.php 파일에서 "메인 메뉴"를 호출합니다▼

//主菜单调用
<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')); ?>

footer.php 파일에서 "하단 메뉴" 호출▼

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

XNUMX단계: 설정 메뉴

메뉴를 등록하고 테마 파일에 메뉴의 표시 위치를 정의한 후 워드프레스 배경에서 새 메뉴 항목을 생성할 수 있습니다.

그런 다음 새로 생성된 메뉴 항목을 등록된 메뉴에 할당하고 해당 관계를 제안 ▼

워드프레스 다단계 메뉴 탐색 모음 만들기

이제 WordPress 다단계 메뉴를 만드는 방법에 대해 이야기해 보겠습니다.

먼저 자신의 WordPress 테마의 기능 파일에서 원래 메뉴 코드를 삭제합니다.

또는 이 코드를 직접 추가하세요 ▼

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

• 참고: 에 있어야 합니다.외부에 추가되었습니다.

그런 다음 테마에 대한 PHP 코드를 찾아 메뉴를 호출합니다. 원시인 경우 일반적으로 다음과 같습니다. ▼

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

제거하고 ▼로 교체

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

• 참고: 이 코드에 다른 div가 포함되어 있지 않은지 확인하세요. 그렇지 않으면 외부 div에 의해 경계가 지정됩니다.

다음 단계는 드롭다운 JS 함수 코드를 추가하고 테마의 JS 파일에 다음 코드를 추가하는 것입니다 ▼

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

워드프레스 메뉴 CSS 스타일

마지막으로 CSS 스타일 미화입니다.

어떤 효과를 주어야 할지 상상을 마음껏 펼쳐보세요. CSS로 가능합니다 ▼

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

• 테마의 style.css 파일에 위의 CSS 코드를 추가하고 저장합니다.

저장 후 웹 사이트의 첫 페이지를 새로 고치면 효과를 볼 수 있습니다. 매우 간단합니까?