Com crida WordPress al menú personalitzat de la barra de navegació secundària/multinivell?

moltMàrqueting a Internetla gent triaWordPressVineconstruir un lloc web, però la barra de navegació d'alguns temes no admet menús secundaris/de diversos nivells. Si no esteu satisfet, podeu provar d'afegir i modificar manualment l'estil de menú del tema.

La modificació comença des de header.php Una funció important d'aquest fitxer de plantilla és la visualització del menú.

Si utilitzeu el codi per cridar la categoria com a menú, també és possible, però no és convenient ordenar els elements del menú.

Els directoris amb subcategories no són fàcils de manejar, així que també vull afegir funcions de menú personalitzades al meu tema igual que altres temes.

No és difícil afegir la funció de personalització del menú al tema recent creat, principalment hi ha 2 passos.

El primer pas, el registre del menú de WordPress

Per utilitzar el menú, primer us heu de registrar, obrir el fitxer de funcions sota el tema i afegir el codi següent ▼

<?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 hi ha cap fitxer functions.php sota el tema, creeu-ne un de nou i copieu el codi anterior per desar-lo.

登录Backend de WordPress, i després aneu a Aparença→Menú.

Si podeu veure la pantalla següent, vol dir que us heu registrat com a ▼

L'anterior registra 2 menús:

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

El segon pas, la trucada del menú de WordPress

Un cop registrat el menú, es pot cridar al fitxer de plantilla del tema. Introduïu el codi següent al fitxer header.php i podeu cridar-lo on vulgueu mostrar el menú.

Al fitxer header.php, truqueu al "menú superior"▼

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

Al fitxer header.php, truqueu 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')); ?>

Truqueu al "menú inferior" al fitxer footer.php▼

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

El tercer pas, el menú de configuració

Després de registrar el menú i definir la posició de visualització del menú al fitxer del tema, podeu crear un nou element de menú al fons de WordPress.

A continuació, assigneu l'element de menú creat recentment al menú registrat i suggeriu la relació corresponent ▼

Feu una barra de navegació de menú multinivell de Wordpress

Ara parlem de com fer un menú multinivell de WordPress:

Primer suprimiu el codi del menú original al fitxer de funcions del vostre propi tema de WordPress.

o afegiu aquest codi directament ▼

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

• Nota: ha d'estar dinsAfegit a l'exterior.

A continuació, cerqueu el codi PHP del tema per trucar al menú, si és en brut, normalment és així ▼

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

traieu-lo i substituïu-lo per ▼

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

• Nota: Assegureu-vos que aquest codi no conté altres divs, en cas contrari, estarà limitat pel div exterior.

El següent pas és afegir el codi de funció JS desplegable i afegir el codi següent al fitxer JS del tema ▼

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

Estils CSS del menú de WordPress

Finalment, embelliment d'estil CSS.

Quin tipus d'efecte hauria de tenir, doneu joc a la vostra imaginació, CSS ho pot fer ▼

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

• Afegiu el codi CSS anterior al fitxer style.css del tema i deseu-lo.

Després de desar, actualitzeu la pàgina principal del vostre lloc web, podreu veure l'efecte, és molt senzill?