Wéi nennt WordPress Secondaire / Multi-Level Navigatiounsbar personaliséiert Menü?

e ganze KoupInternet MarketingLeit wielen ze benotzenWordPressKommteng Websäit bauen, awer d'Navigatiounsbar vu verschiddenen Themen ënnerstëtzt keng zwee-Niveau-/Multi-Level-Menüen. Wann Dir net zefridden sidd, kënnt Dir probéieren de Menüstil vum Thema manuell derbäizesetzen oder z'änneren.

D'Ännerung soll vun header.php ufänken.Eng wichteg Funktioun an dëser Schabloun Fichier ass d'Affichage vum Menü.

Et ass och méiglech Code ze benotzen fir Kategorien als Menüen ze ruffen, awer et ass onbequem fir Menüartikelen ze sortéieren.

Verzeechnes mat Ënnerkategorien sinn och schwéier ze këmmeren, also wëll ech och eng personaliséiert Menüfunktioun op meng Thema addéieren wéi aner Themen.

Et ass net schwéier, Menü Personnalisatiounsfunktiounen un en nei erstallt Thema ze addéieren. Et ginn zwee Haaptschrëtt.

Den éischte Schrëtt, WordPress Menü Aschreiwung

Fir de Menü ze benotzen, musst Dir Iech als éischt registréieren, d'Funktiounsdatei ënner dem Thema opmaachen an de folgende Code bäifügen ▼

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

• Wann et keng functions.php Datei ënner dem Thema ass, erstellt eng nei, kopéiert de Code hei uewen a späichert et.

aloggenWordPress Backend, gitt "Ausgesinn" → "Menu" an der Sequenz.

Wann Dir de folgenden Ecran gesitt, heescht et datt d'Aschreiwung erfollegräich ass ▼

2 Menue sinn uewen ugemellt:

1. En Top Menu Top Menubar.
2. En Haaptmenü Main Menübar.

Schrëtt 2: WordPress Menü Uruff

Nodeems de Menü ugemellt ass, kann et an der Thema Schabloun Datei genannt ginn.Set de folgende Code an d'header.php Datei a rufft et op wou Dir de Menü wëllt weisen.

An der header.php Datei, rufft "Top Menu"▼

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

An der header.php Datei, rufft "Main 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')); ?>

Rufft "Bottom Menu" an der footer.php Datei▼

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

Schrëtt 3. Setup Menü

Wann de Menü registréiert ass an d'Displayplaz vum Menü an der Themadatei definéiert ass, kënnt Dir en neit Menü Element am WordPress Backend erstellen.

Dann, zougewisen déi nei erstallt Menüpunkt un de registréierte Menü a proposéiert déi entspriechend Relatioun ▼

Maacht Wordpress Multi-Level Menü Navigatiounsbar

Loosst eis elo schwätzen iwwer wéi een e WordPress Multi-Level Menü mécht:

Fänkt un andeems Dir den ursprénglechen Menücode an Ärem eegene WordPress Thema Funktiounsdatei läschen.

Oder füügt dëse Code direkt ▼

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

• Bemierkung: muss an Dobaussen dobäigesat.

Fannt dann de PHP Code wou d'Thema de Menü nennt, wann et ursprénglech ass ass et normalerweis esou ▼

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

Läschen et an ersetzen et mat ▼

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

• Opgepasst: Vergewëssert Iech datt dëse Code keng aner Divs enthält, soss gëtt et vun der baussenzeger Div begrenzt.

De nächste Schrëtt ass den Dropdown JS Funktiounscode ze addéieren an de folgende Code an d'Thema JS Datei ▼

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

WordPress Menü CSS Stiler

Endlech, CSS Stil Verschéinerung.

Wat fir en Effekt soll et sinn? Gitt Är Fantasie voll Spill. CSS kann et maachen ▼

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

• Füügt den uewe genannte CSS Code an d'Thema style.css Datei a späichert et.

Nodeems Dir gespäichert hutt, erfrëscht Är Websäit Säit an Dir kënnt den Effekt gesinn.Ass et net ganz einfach?