¿Cómo llama WordPress al menú personalizado de la barra de navegación secundaria/multinivel?

Mucho网络 营销la gente eligeWordPressVenconstruir un sitio web, pero la barra de navegación de algunos temas no admite menús secundarios o de varios niveles. Si no está satisfecho, puede intentar agregar o modificar manualmente el estilo de menú del tema.

La modificación comienza desde header.php Una función importante en este archivo de plantilla es la visualización del menú.

Si usa el código para llamar a la categoría como un menú, también es posible, pero no es conveniente ordenar los elementos del menú.

Los directorios con subcategorías no son fáciles de manejar, por lo que también quiero agregar funciones de menú personalizadas a mi tema, al igual que otros temas.

No es difícil agregar la función de personalización del menú al tema recién creado, hay principalmente 2 pasos.

El primer paso, registro en el menú de WordPress

Para usar el menú, primero debe registrarse, abrir el archivo de funciones bajo el tema y agregar el siguiente 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' => __('底部菜单') ) );
}
?>

• Si no hay un archivo functions.php bajo el tema, cree uno nuevo y copie el código anterior para guardarlo.

iniciar la sesiónback-end de WordPressy luego vaya a Apariencia→Menú.

Si puede ver la pantalla a continuación, significa que se ha registrado como ▼

Lo anterior registra 2 menús:

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

El segundo paso, la llamada al menú de WordPress

Después de registrar el menú, se puede llamar en el archivo de plantilla de tema. Coloque el siguiente código en el archivo header.php, y puede llamarlo donde desee que se muestre el menú.

En el archivo header.php, llama al "menú superior"▼

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

En el archivo header.php, llama al "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')); ?>

Llame al "menú inferior" en el archivo footer.php ▼

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

Paso XNUMX: Menú de configuración

Después de registrar el menú y definir la posición de visualización del menú en el archivo de tema, puede crear un nuevo elemento de menú en el fondo de WordPress.

Luego, asigne el elemento de menú recién creado al menú registrado y sugiera la relación correspondiente ▼

Hacer una barra de navegación de menú de varios niveles de wordpress

Ahora hablemos de cómo hacer un menú de varios niveles de WordPress:

Primero elimine el código de menú original en el archivo de funciones de su propio tema de WordPress.

o agrega este código directamente ▼

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

• Nota: debe estar enAgregado afuera.

Luego busque el código PHP para que el tema llame al menú, si está sin procesar, generalmente es así ▼

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

quítelo y reemplácelo con ▼

<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úrese de que este código no contenga otros divs, de lo contrario, estará delimitado por el div externo.

El siguiente paso es agregar el código de función JS desplegable y agregar el siguiente código al archivo JS del tema ▼

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

Estilos CSS del menú de WordPress

Finalmente, el embellecimiento del estilo CSS.

Qué tipo de efecto debería ser, dale rienda suelta a tu imaginación, CSS puede hacerlo ▼

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

• Agregue el código CSS anterior al archivo style.css del tema y guárdelo.

Después de guardar, actualice la página principal de su sitio web, puede ver el efecto, ¿es muy simple?