Kā WordPress izsauc sekundāro/vairāku līmeņu navigācijas joslas pielāgoto izvēlni?

daudzInterneta mārketingscilvēki izvēlasWordPressNācizveidot vietni, taču dažu motīvu navigācijas josla neatbalsta sekundārās/daudzlīmeņu izvēlnes. Ja neesat apmierināts, varat mēģināt manuāli pievienot vai modificēt motīva izvēlnes stilu.

Modifikācija sākas no header.php Svarīga funkcija šajā veidnes failā ir izvēlnes parādīšana.

Ja jūs izmantojat kodu, lai izsauktu kategoriju kā izvēlni, tas ir arī iespējams, taču nav ērti kārtot izvēlnes vienumus.

Direktoriju ar apakškategorijām nav viegli apstrādāt, tāpēc es arī vēlos savam motīvam pievienot pielāgotu izvēlnes funkciju, tāpat kā citas tēmas.

Jaunizveidotajai tēmai nav grūti pievienot izvēlnes pielāgošanas funkciju, galvenokārt ir 2 soļi.

Pirmais solis, WordPress izvēlnes reģistrācija

Lai izmantotu izvēlni, vispirms jāreģistrējas, jāatver funkciju fails zem tēmas un jāpievieno šāds kods ▼

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

• Ja zem motīva nav faila functions.php, izveidojiet jaunu un kopējiet iepriekš minēto kodu, lai to saglabātu.

登录WordPress aizmugursistēmaun pēc tam dodieties uz Izskats → Izvēlne.

Ja redzat zemāk redzamo ekrānu, tas nozīmē, ka esat reģistrējies kā ▼

Iepriekš minētais reģistrē 2 izvēlnes:

1. Augšējā izvēlne Augšējā izvēlņu josla.
2. galvenā izvēlne Main izvēlņu joslu.

Otrais solis ir WordPress izvēlnes izsaukums

Pēc izvēlnes reģistrēšanas to var izsaukt motīva veidnes failā.Ievietojiet šādu kodu header.php failā un varēsiet to izsaukt vietā, kur vēlaties parādīt izvēlni.

Failā header.php izsauciet "augšējo izvēlni"▼

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

Header.php failā izsauciet "galveno izvēlni"▼

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

Izsauciet "apakšējo izvēlni" kājenes.php failā▼

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

XNUMX. darbība. Iestatījumu izvēlne

Kad izvēlne ir reģistrēta un motīva failā ir definēta izvēlnes displeja pozīcija, varat izveidot jaunu izvēlnes vienumu WordPress fonā.

Pēc tam reģistrētajai izvēlnei piešķiriet jaunizveidoto izvēlnes vienumu un iesakiet atbilstošo attiecību ▼

Izveidojiet WordPress daudzlīmeņu izvēlnes navigācijas joslu

Tagad parunāsim par to, kā izveidot WordPress daudzlīmeņu izvēlni:

Vispirms izdzēsiet sākotnējo izvēlnes kodu sava WordPress motīva funkciju failā.

vai pievienojiet šo kodu tieši ▼

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

• Piezīme: jābūt iekšāPievienots ārpusē.

Pēc tam atrodiet PHP kodu motīvam, lai izsauktu izvēlni, ja tas ir neapstrādāts, tas parasti ir šāds ▼

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

noņemiet to un nomainiet to ar ▼

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

• Piezīme. Pārliecinieties, ka šis kods nesatur citus div, pretējā gadījumā to ierobežos ārējais div.

Nākamais solis ir pievienot nolaižamo JS funkcijas kodu un pievienot šo kodu motīva JS failam ▼

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

WordPress izvēlnes CSS stili

Visbeidzot, CSS stila izdaiļošana.

Kādam vajadzētu būt efektam, dodiet pilnu spēku iztēlei, CSS to var izdarīt ▼

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

• Pievienojiet iepriekš minēto CSS kodu motīva style.css failam un saglabājiet to.

Pēc saglabāšanas atsvaidzini savas mājas lapas sākumlapu, var redzēt efektu, vai tas ir ļoti vienkārši?