Ինչպե՞ս է WordPress-ը կանչում երկրորդական/բազմ մակարդակի նավիգացիոն բարի մաքսային մենյու:

շատ网络 营销մարդիկ ընտրում ենWordPressԱրիկառուցել կայք, սակայն որոշ թեմաների նավարկության տողը չի աջակցում երկրորդական/բազմաստիճան մենյու: Եթե բավարարված չեք, կարող եք փորձել ձեռքով ավելացնել կամ փոփոխել թեմայի ընտրացանկի ոճը:

Փոփոխությունը սկսվում է header.php-ից: Այս կաղապարի ֆայլում կարևոր գործառույթ է մենյուի ցուցադրումը:

Եթե ​​դուք օգտագործում եք կոդը՝ կատեգորիան որպես մենյու կանչելու համար, դա նույնպես հնարավոր է, բայց հարմար չէ տեսակավորել ցանկի տարրերը։

Ենթակատեգորիաներով գրացուցակը հեշտ չէ կարգավորել, այնպես որ ես նաև ցանկանում եմ իմ թեմային ավելացնել ընտրացանկի գործառույթ, ինչպես մյուս թեմաները:

Դժվար չէ նոր ստեղծված թեմային ավելացնել մենյուի հարմարեցման գործառույթը, հիմնականում 2 քայլ կա։

Առաջին քայլը՝ 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 ընտրացանկ:

Երկրորդ քայլը, 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')); ?>

Քայլ XNUMX. Կարգավորումների ընտրացանկ

Մենյուի գրանցումից և մենյուի ցուցադրման դիրքը թեմայի ֆայլում սահմանվելուց հետո, դուք կարող եք ստեղծել նոր ցանկի տարր 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 ֆայլում և պահպանեք այն:

Պահելուց հետո թարմացրեք ձեր կայքի առաջին էջը, կարող եք տեսնել էֆեկտը, դա շա՞տ պարզ է։