Kaip „WordPress“ iškviečia antrinį / kelių lygių naršymo juostos pasirinktinį meniu?

daugInterneto rinkodaraŽmonės pasirenka naudotiWordPressAteitiPastatykite stotį, tačiau kai kurių temų naršymo juosta nepalaiko dviejų lygių / kelių lygių meniu. Jei nesate patenkinti, galite pabandyti rankiniu būdu pridėti arba modifikuoti temos meniu stilių.

Modifikavimas turėtų prasidėti nuo header.php Svarbi šio šablono failo funkcija yra meniu rodymas.

Taip pat galima naudoti kodą kategorijoms iškviesti kaip meniu, tačiau nepatogu rūšiuoti meniu elementus.

Taip pat sunku tvarkyti katalogus su subkategorijomis, todėl taip pat noriu pridėti pasirinktinę meniu funkciją prie savo temos, kaip ir kitų žmonių temų.

Į naujai sukurtą temą įtraukti meniu tinkinimo funkcijas nėra sunku.Yra du pagrindiniai žingsniai.

Pirmas žingsnis – registracija „WordPress“ meniu

Norėdami naudotis meniu, pirmiausia turite užsiregistruoti, atidaryti funkcijų failą po tema ir pridėti šį kodą ▼

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

• Jei po tema nėra functions.php failo, sukurkite naują, nukopijuokite į jį aukščiau esantį kodą ir išsaugokite.

登录WordPress backend, eilės tvarka įveskite „Išvaizda“ → „Meniu“.

Jei matote šį ekraną, tai reiškia, kad registracija sėkminga ▼

Aukščiau užregistruoti 2 meniu:

1. Viršutinis meniu Viršutinė meniu juosta.
2. Pagrindinis meniu Main meniu juosta.

2 veiksmas: „WordPress“ meniu skambutis

Užregistravus meniu, jį galima iškviesti temos šablono faile Įdėkite šį kodą į header.php failą ir iškvieskite jį ten, kur norite rodyti meniu.

Header.php faile iškvieskite "Top Menu"▼

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

Header.php faile iškvieskite „Pagrindinį meniu“▼

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

Faile footer.php iškvieskite "Apatinį meniu".

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

3 veiksmas. Sąrankos meniu

Kai meniu bus užregistruotas ir meniu rodymo vieta apibrėžta temos faile, galite sukurti naują meniu elementą „WordPress“ vidinėje programoje.

Tada naujai sukurtą meniu elementą priskirkite registruotam meniu ir pasiūlykite atitinkamą ryšį ▼

Sukurkite „WordPress“ kelių lygių meniu naršymo juostą

Dabar pakalbėkime apie tai, kaip sukurti kelių lygių „WordPress“ meniu:

Pradėkite ištrinkite pradinį meniu kodą savo „WordPress“ temos funkcijų faile.

Arba pridėkite šį kodą tiesiogiai ▼

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

• Pastaba: turi būti Pridėta išorėje.

Tada suraskite PHP kodą, kuriame tema iškviečia meniu, jei jis originalus, jis paprastai bus toks ▼

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

Ištrinkite jį ir pakeiskite ▼

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

• Pastaba: įsitikinkite, kad šiame kode nėra kitų div, kitaip jis bus apribotas išorinio div.

Kitas žingsnis yra pridėti išskleidžiamąjį JS funkcijos kodą ir pridėti šį kodą prie temos JS failo ▼

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

WordPress meniu CSS stiliai

Galiausiai, CSS stiliaus pagražinimas.

Koks tai turėtų būti efektas? Suteikite savo vaizduotei visą žaidimą. CSS gali tai padaryti ▼

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

• Pridėkite aukščiau pateiktą CSS kodą prie temos style.css failo ir išsaugokite jį.

Išsaugoję atnaujinkite savo svetainės pradinį puslapį ir pamatysite efektą.Argi tai nėra labai paprasta?