Sut mae WordPress yn galw dewislen bar llywio uwchradd / aml-lefel?

llawer oMarchnata rhyngrwydmae pobl yn dewisWordPressDewchadeiladu gwefan, ond nid yw bar llywio rhai themâu yn cefnogi dewislenni uwchradd/aml-lefel. Os nad ydych yn fodlon, gallwch geisio ychwanegu neu addasu arddull dewislen y thema â llaw.

Mae'r addasiad yn dechrau o header.php Swyddogaeth bwysig yn y ffeil templed hwn yw arddangos y ddewislen.

Os ydych chi'n defnyddio'r cod i alw'r categori fel dewislen, mae hefyd yn bosibl, ond nid yw'n gyfleus i ddidoli'r eitemau dewislen.

Nid yw'r cyfeiriadur gydag is-gategorïau yn hawdd i'w drin, felly rwyf hefyd am ychwanegu swyddogaeth dewislen wedi'i haddasu at fy thema fel themâu eraill.

Nid yw'n anodd ychwanegu swyddogaeth addasu bwydlen i'r thema newydd, mae yna 2 gam yn bennaf.

Y cam cyntaf, cofrestru dewislen WordPress

I ddefnyddio'r ddewislen, yn gyntaf rhaid i chi gofrestru, agor y ffeil swyddogaethau o dan y thema, ac atodi'r cod canlynol ▼

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

• Os nad oes ffeil functions.php o dan y thema, crëwch un newydd a chopïwch y cod uchod i'w gadw.

登录Backend WordPress, ac yna ewch i Appearance→Dewislen.

Os gallwch weld y sgrin isod, mae'n golygu eich bod wedi cofrestru fel ▼

Mae'r uchod yn cofrestru 2 ddewislen:

1. A top menu Bar Dewislen Uchaf.
2. prif ddewislen Main bar dewislen.

Yr ail gam, galwad ddewislen WordPress

Ar ôl i'r ddewislen gael ei gofrestru, gellir ei alw yn y ffeil templed thema Rhowch y cod canlynol yn y ffeil header.php, a gallwch ei alw lle rydych chi am arddangos y ddewislen.

Yn y ffeil header.php, ffoniwch y "ddewislen uchaf"▼

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

Yn y ffeil header.php, ffoniwch y "prif ddewislen"▼

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

Ffoniwch y "ddewislen gwaelod" yn y ffeil footer.php ▼

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

Cam XNUMX: Dewislen gosodiadau

Ar ôl i'r ddewislen gael ei chofrestru a bod lleoliad arddangos y ddewislen wedi'i ddiffinio yn y ffeil thema, gallwch greu eitem ddewislen newydd yng nghefndir WordPress.

Yna, aseinio'r eitem ddewislen sydd newydd ei chreu i'r ddewislen gofrestredig, ac awgrymu'r berthynas gyfatebol ▼

Gwneud bar llywio dewislen aml-lefel wordpress

Nawr, gadewch i ni siarad am sut i wneud dewislen aml-lefel WordPress:

Yn gyntaf, dilëwch y cod dewislen gwreiddiol yn ffeil swyddogaethau eich thema WordPress eich hun.

neu ychwanegwch y cod hwn yn uniongyrchol ▼

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

• Sylwch: rhaid bod i mewnYchwanegwyd y tu allan.

Yna dewch o hyd i'r cod PHP ar gyfer y thema i alw'r ddewislen, os yw'n amrwd, fel hyn mae fel arfer ▼

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

ei dynnu a rhoi ▼ yn ei le

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

• Nodyn: Gwnewch yn siŵr nad yw'r cod hwn yn cynnwys divs eraill, fel arall bydd yn cael ei ffinio gan y div allanol.

Y cam nesaf yw ychwanegu'r cod swyddogaeth JS cwymplen ac ychwanegu'r cod canlynol at ffeil JS y thema ▼

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

Dewislen WordPress arddulliau CSS

Yn olaf, harddu arddull CSS.

Pa fath o effaith ddylai fod, rhowch chwarae llawn i'ch dychymyg, gall CSS ei wneud ▼

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

• Ychwanegwch y cod CSS uchod i ffeil style.css y thema a'i gadw.

Ar ôl arbed, adnewyddwch dudalen flaen eich gwefan, gallwch weld yr effaith, a yw'n syml iawn?