Como chama WordPress ao menú personalizado da barra de navegación secundaria/multinivel?

Moito营销a xente escolleWordPressVeñaConstruír unha estación, pero a barra de navegación dalgúns temas non admite menús secundarios ou de varios niveis. Se non estás satisfeito, podes tentar engadir ou modificar manualmente o estilo de menú do tema.

A modificación comeza desde header.php.Unha función importante deste ficheiro de modelo é a visualización do menú.

Se utiliza o código para chamar a categoría como menú, tamén é posible, pero non é conveniente ordenar os elementos do menú.

O directorio con subcategorías non é fácil de manexar, polo que tamén quero engadir unha función de menú personalizada ao meu tema como outros temas.

Non é difícil engadir a función de personalización do menú ao tema recentemente creado, hai principalmente 2 pasos.

O primeiro paso, o rexistro do menú de WordPress

Para usar o menú, primeiro debes rexistrarte, abrir o ficheiro de funcións baixo o tema e engadir o seguinte código ▼

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

• Se non hai ficheiro functions.php baixo o tema, crea un novo e copia o código anterior para gardalo.

log inBackend de WordPresse, a continuación, vaia a Aparencia→Menú.

Se podes ver a pantalla de abaixo, significa que te rexistrou como ▼

O anterior rexistra 2 menús:

1. Un menú superior Barra de menú superior.
2. un menú principal Main barra de menú.

O segundo paso, a chamada do menú de WordPress

Despois de rexistrar o menú, pódese chamar no ficheiro do modelo do tema.Inserta o seguinte código no ficheiro header.php e podes chamalo onde queiras mostrar o menú.

No ficheiro header.php, chame ao "menú superior"▼

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

No ficheiro header.php, chame ao "menú principal"▼

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

Chame ao "menú inferior" no ficheiro footer.php▼

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

O terceiro paso, o menú de configuración

Despois de rexistrar o menú e definir a posición de visualización do menú no ficheiro do tema, podes crear un novo elemento de menú no fondo de WordPress.

A continuación, asigne o elemento de menú recentemente creado ao menú rexistrado e suxire a relación correspondente ▼

Fai unha barra de navegación de menú multinivel de wordpress

Agora imos falar de como facer un menú de varios niveis de WordPress:

Primeiro elimina o código do menú orixinal no ficheiro de funcións do teu propio tema de WordPress.

ou engade este código directamente ▼

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

• Nota: debe estar dentroEngadido fóra.

A continuación, busque o código PHP para o tema para chamar ao menú, se está en bruto, normalmente é así ▼

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

elimínao e substitúeo por ▼

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

• Nota: asegúrate de que este código non conteña outros divs, se non, estará limitado polo div externo.

O seguinte paso é engadir o código de función JS despregábel e engadir o seguinte código ao ficheiro JS do tema ▼

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

Estilos CSS do menú de WordPress

Finalmente, embelecemento do estilo CSS.

Que tipo de efecto debería ser, dálle un xogo completo á túa imaxinación, CSS pode facelo ▼

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

• Engade o código CSS anterior ao ficheiro style.css do tema e gárdao.

Despois de gardar, actualiza a páxina principal do teu sitio web, podes ver o efecto, é moi sinxelo?