Nola deitzen du WordPress-ek bigarren mailako/maila anitzeko nabigazio barraren menu pertsonalizatua?

askoInterneteko marketinajendeak aukeratzen duWordPressComewebgune bat eraiki, baina gai batzuen nabigazio-barrak ez ditu bigarren mailako/maila anitzeko menuak onartzen. Konforme ez bazaude, gaiaren menu-estiloa eskuz gehitzen eta aldatzen saia zaitezke.

Aldaketa header.php-tik hasten da. Txantiloi-fitxategi honetako funtzio garrantzitsu bat menua bistaratzea da.

Kategoria menu gisa deitzeko kodea erabiltzen baduzu, posible da ere, baina ez da komenigarria menuko elementuak ordenatzea.

Azpikategoriak dituzten direktorioak ez dira maneiatzeko errazak, beraz, nire gaiari menu-funtzio pertsonalizatuak gehitu nahi dizkiot beste gaiek bezala.

Ez da zaila menua pertsonalizatzeko funtzioa gehitzea sortu berri den gaiari, batez ere 2 urrats daude.

Lehen urratsa, WordPress menuaren erregistroa

Menua erabiltzeko, lehenik eta behin erregistratu behar duzu, gaiaren azpian dagoen funtzioen fitxategia ireki eta hurrengo kodea erantsi ▼

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

• Gaiaren azpian functions.php fitxategirik ez badago, sortu berri bat eta kopiatu goiko kodea gordetzeko.

登录WordPress backend-a, eta, gero, joan Itxura → Menura.

Beheko pantaila ikusten baduzu, ▼ gisa erregistratu zarela esan nahi du

Aurrekoak 2 menu erregistratzen ditu:

1. Goiko menua Goiko menu-barra.
2. menu nagusia Main menu-barra.

Bigarren urratsa, WordPress menu-deia

Menua erregistratu ondoren, gaiaren txantiloi fitxategian dei daiteke.Jarri hurrengo kodea header.php fitxategian, eta menua bistaratu nahi duzun tokian deitu dezakezu.

Header.php fitxategian, deitu "goiko menua" ▼

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

Header.php fitxategian, deitu "menu nagusia" ▼

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

Deitu footer.php fitxategiko "beheko menua" ▼

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

XNUMX. urratsa: Ezarpenen menua

Menua erregistratu eta menuaren bistaratzeko posizioa gaiaren fitxategian definitu ondoren, menu-elementu berri bat sor dezakezu WordPress atzeko planoan.

Ondoren, esleitu sortu berri den menu-elementua erregistratutako menuari eta iradoki ezazu dagokion erlazioa ▼

Egin wordpress maila anitzeko menuen nabigazio-barra

Orain hitz egin dezagun WordPress maila anitzeko menu bat nola egin:

Lehenik eta behin, ezabatu jatorrizko menuaren kodea zure WordPress gaiaren funtzioen fitxategian.

edo gehitu kode hau zuzenean ▼

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

• Oharra: sartu behar daKanpoan gehitua.

Ondoren, bilatu gaiaren PHP kodea menura deitzeko, gordina bada, normalean honela izaten da ▼

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

kendu eta ordeztu ▼-rekin

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

• Oharra: Ziurtatu kode honek ez duela bestelako div-ak, bestela kanpoko div-ak mugatuko du.

Hurrengo urratsa goitibeherako JS funtzio kodea gehitzea eta hurrengo kodea gehitzea da gaiaren JS fitxategira ▼

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

WordPress menu CSS estiloak

Azkenik, CSS estiloaren edertzea.

Nolako efektua izan behar duen, eman jolas osoa zure irudimenari, CSS-k egin dezake ▼

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

• Gehitu goiko CSS kodea gaiaren style.css fitxategira eta gorde.

Gorde ondoren, freskatu zure webgunearen hasierako orria, efektua ikus dezakezu, oso erraza al da?