Adresář článků
hodně网络 营销lidé si vyberouWordPressPřijítvytvořit webovou stránku, ale navigační lišta některých motivů nepodporuje sekundární/víceúrovňové nabídky. Pokud nejste spokojeni, můžete zkusit ručně přidat a upravit styl nabídky motivu.
Úprava začíná od header.php Důležitou funkcí v tomto souboru šablony je zobrazení menu.
Pokud použijete kód pro vyvolání kategorie jako menu, je to také možné, ale není vhodné řadit položky menu.
S adresáři s podkategoriemi není snadné manipulovat, takže chci do svého tématu přidat vlastní funkce nabídky, stejně jako jiná témata.
K nově vytvořenému tématu není těžké přidat funkci přizpůsobení menu, jsou to hlavně 2 kroky.
Prvním krokem je registrace nabídky WordPress
Chcete-li používat nabídku, musíte se nejprve zaregistrovat, otevřít soubor funkcí pod tématem a připojit následující 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' => __('底部菜单') ) ); } ?>
- Pokud pod tématem není žádný soubor functions.php, vytvořte nový a zkopírujte výše uvedený kód pro jeho uložení.
登录WordPress backenda poté přejděte na Vzhled→Nabídka.
Pokud vidíte obrazovku níže, znamená to, že jste se zaregistrovali jako ▼
Výše uvedené registruje 2 nabídky:
- Horní nabídka Horní lišta nabídek.
- hlavní menu Main panel nabídek.
Druhým krokem je volání nabídky WordPress
Poté, co je nabídka zaregistrována, lze ji vyvolat v souboru šablony motivu Vložte následující kód do souboru header.php a můžete jej volat tam, kde chcete zobrazit nabídku.
V souboru header.php zavolejte "top menu"▼
//顶部菜单调用 <?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>
V souboru header.php zavolejte "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')); ?>
Vyvolejte "spodní nabídku" v souboru footer.php▼
//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>
Třetím krokem je nabídka nastavení
Po registraci nabídky a definování pozice zobrazení nabídky v souboru motivu můžete vytvořit novou položku nabídky na pozadí WordPress.
Poté nově vytvořenou položku nabídky přiřaďte k registrované nabídce a navrhněte odpovídající vztah ▼
Vytvořte wordpress víceúrovňový navigační panel nabídky
Nyní si promluvme o tom, jak vytvořit víceúrovňovou nabídku WordPress:
Nejprve odstraňte původní kód nabídky v souboru funkcí vašeho vlastního motivu WordPress.
nebo přidejte tento kód přímo ▼
<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
- Poznámka: musí být vPřidáno venku.
Poté najděte PHP kód pro téma, které chcete zavolat do menu, pokud je nezpracované, je to obvykle takto ▼
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
vyjměte jej a nahraďte jej ▼
<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: Ujistěte se, že tento kód neobsahuje další prvky div, jinak bude ohraničen vnějším prvkem div.
Dalším krokem je přidat rozbalovací kód funkce JS a přidat následující kód do souboru JS tématu ▼
jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});});
Nabídka WordPress Styly CSS
Nakonec zkrášlení stylu CSS.
Jaký by měl být efekt, dejte plnou hru své fantazii, CSS to umí ▼
#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;}
- Přidejte výše uvedený kód CSS do souboru style.css motivu a uložte jej.
Po uložení obnovte úvodní stránku svého webu, vidíte efekt, je to velmi jednoduché?
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) shared „Jak WordPress nazývá sekundární/víceúrovňový navigační panel vlastní nabídkou? , pomoct ti.
Vítejte u sdílení odkazu na tento článek:https://www.chenweiliang.com/cwl-1521.html
Vítejte na telegramovém kanálu blogu Chen Weiliang, kde získáte nejnovější aktualizace!
📚 Tento průvodce má obrovskou hodnotu, 🌟Toto je vzácná příležitost, nenechte si ji ujít! ⏰⌛💨
Sdílejte a lajkujte, pokud se vám líbí!
Vaše sdílení a lajky jsou naší neustálou motivací!