Како WordPress повикува прилагодено мени за навигациска лента за секундарно/повеќе нивоа?

многуИнтернет маркетингЛуѓето избираат да користатWordPressДојдиизгради веб-локација, но лентата за навигација на некои теми не поддржува менија на две нивоа/повеќе нивоа. Ако не сте задоволни, можете да се обидете рачно да го додадете или измените стилот на менито на темата.

Измената треба да започне од header.php Важна функција во оваа датотека со шаблон е прикажувањето на менито.

Исто така, можно е да се користи код за повикување категории како менија, но незгодно е да се подредуваат ставките од менито.

Исто така, тешко е да се справите со директориуми со подкатегории, така што сакам да додадам приспособена функција од менито на мојата тема како темите на другите луѓе.

Не е тешко да се додадат функции за прилагодување на менито на новосоздадената тема. Постојат два главни чекори.

Првиот чекор, регистрација на менито на WordPress

За да го користите менито, прво мора да се регистрирате, да ја отворите датотеката со функции под темата и да го додадете следниот код ▼

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

• Ако нема датотека functions.php под темата, креирајте нова, копирајте го горниот код во неа и зачувајте ја.

登录WordPress backend, внесете „Изглед“ → „Мени“ во низа.

Ако можете да го видите следниот екран, тоа значи дека регистрацијата е успешна ▼

2 менија се регистрирани погоре:

1. Горно мени Топ мени.
2. Главното мени Мain лента со менија.

Чекор 2: Повик за мени на WordPress

Откако ќе се регистрира менито, може да се повика во датотеката со шаблон за тема. Ставете го следниов код во датотеката header.php и повикајте го каде што сакате да се прикаже менито.

Во датотеката header.php, повикајте го „Топ мени“ ▼

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

Во датотеката header.php, повикајте го „Главното мени“ ▼

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

Повикајте „Долно мени“ во датотеката footer.php ▼

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

Чекор 3. Мени за поставување

Откако менито е регистрирано и локацијата за прикажување на менито е дефинирана во датотеката со тема, можете да креирате нова ставка од менито во задниот дел на WordPress.

Потоа, доделете ја новосоздадената ставка од менито на регистрираното мени и предложете ја соодветната врска ▼

Направете лента за навигација во менито на повеќе нивоа на wordpress

Сега да разговараме за тоа како да направите мени на повеќе нивоа на WordPress:

Започнете со бришење на оригиналниот код од менито во датотеката со функции на вашата сопствена тема на WordPress.

Или додајте го овој код директно ▼

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

• Забелешка: мора да биде внатре Додадено надвор.

Потоа пронајдете го PHP-кодот каде што темата го повикува менито, ако е оригинален обично ќе биде вака ▼

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

Избришете го и заменете го со ▼

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

• Забелешка: Осигурајте се дека овој код не содржи други div, инаку ќе биде ограничен со надворешното div.

Следниот чекор е да го додадете паѓачкиот код на функцијата JS и да го додадете следниов код во датотеката JS на темата ▼

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

Мени на WordPress CSS стилови

Конечно, разубавување во CSS стил.

Каков ефект треба да биде тоа? Дајте ѝ целосна игра на вашата имагинација. CSS може да го направи тоа ▼

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

• Додадете го горенаведениот CSS код во датотеката style.css на темата и зачувајте ја.

По зачувувањето, освежете ја насловната страница на вашата веб-локација и ќе го видите ефектот. Зар не е многу едноставно?