Adresár článkov
veľaInternetový marketingľudia si vyberúWordPressprísťvytvoriť webovú stránku, ale navigačná lišta niektorých tém nepodporuje sekundárne/viacúrovňové ponuky. Ak nie ste spokojní, môžete skúsiť ručne pridať alebo upraviť štýl ponuky témy.
Úprava začína od header.php Dôležitou funkciou v tomto súbore šablóny je zobrazenie menu.
Ak použijete kód na volanie kategórie ako menu, je to tiež možné, ale nie je vhodné triediť položky menu.
S adresárom s podkategóriami nie je ľahké manipulovať, preto chcem k mojej téme pridať aj funkciu vlastného menu, rovnako ako ostatné témy.
K novovytvorenej téme nie je ťažké pridať funkciu prispôsobenia menu, sú to hlavne 2 kroky.
Prvým krokom je registrácia ponuky WordPress
Ak chcete použiť ponuku, musíte sa najprv zaregistrovať, otvoriť súbor funkcií pod témou a pripojiť nasledujúci kód ▼
<?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' => __('底部菜单') ) ); } ?>
- Ak pod témou nie je žiadny súbor functions.php, vytvorte nový a skopírujte vyššie uvedený kód, aby ste ho uložili.
登录WordPress backenda potom prejdite na Vzhľad→Ponuka.
Ak vidíte obrazovku nižšie, znamená to, že ste sa zaregistrovali ako ▼
Vyššie uvedené registruje 2 ponuky:
- Horné menu Horný panel s ponukami.
- hlavné menu Main panel s ponukami.
Druhým krokom je volanie ponuky WordPress
Po zaregistrovaní menu je možné ho vyvolať v súbore šablóny témy Vložte nasledujúci kód do súboru header.php a môžete ho vyvolať tam, kde chcete zobraziť menu.
V súbore header.php zavolajte „horné menu“▼
//顶部菜单调用 <?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>
V súbore header.php zavolajte „hlavné menu“▼
//主菜单调用 <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')); ?>
Vyvolajte „spodné menu“ v súbore footer.php▼
//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>
Krok XNUMX: Ponuka nastavení
Po zaregistrovaní ponuky a definovaní pozície zobrazenia ponuky v súbore témy môžete vytvoriť novú položku ponuky na pozadí WordPress.
Potom priraďte novovytvorenú položku ponuky k registrovanej ponuke a navrhnite zodpovedajúci vzťah ▼
Vytvorte viacúrovňovú navigačnú lištu ponuky wordpress
Teraz si povedzme, ako vytvoriť viacúrovňové menu WordPress:
Najprv odstráňte pôvodný kód ponuky v súbore funkcií vašej vlastnej témy WordPress.
alebo pridajte tento kód priamo ▼
<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
- Poznámka: musí byť vPridané vonku.
Potom nájdite kód PHP pre tému na zavolanie menu, ak je surové, zvyčajne je to takto ▼
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
vyberte ho a nahraďte ho ▼
<div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul')); } ?> </div>
- Poznámka: Uistite sa, že tento kód neobsahuje iné prvky div, inak bude ohraničený vonkajším prvkom div.
Ďalším krokom je pridanie rozbaľovacieho kódu funkcie JS a pridanie nasledujúceho kódu do súboru JS témy ▼
jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});});
Ponuka WordPress Štýly CSS
Na záver ešte skrášlenie CSS štýlu.
Aký by mal byť efekt, dajte naplno uzdu svojej fantázii, CSS to dokáže ▼
#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;}
- Pridajte vyššie uvedený kód CSS do súboru style.css témy a uložte ho.
Po uložení obnovte prednú stránku svojho webu, uvidíte efekt, je to veľmi jednoduché?
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) shared „Ako WordPress volá sekundárnu/viacúrovňovú navigačnú lištu vlastnou ponukou? , pomôcť ti.
Vitajte pri zdieľaní odkazu na tento článok:https://www.chenweiliang.com/cwl-1521.html
Vitajte na telegramovom kanáli blogu Chen Weiliang, kde získate najnovšie aktualizácie!
📚 Táto príručka obsahuje obrovskú hodnotu, 🌟Toto je vzácna príležitosť, nenechajte si ju ujsť! ⏰⌛💨
Ak sa vám páči, zdieľajte a lajkujte!
Vaše zdieľanie a lajky sú našou neustálou motiváciou!