Hvernig kallar WordPress sérsniðna valmynd á auka/fjölþrepa leiðsögustiku?

mikið af网络 营销fólk velurWordPressKomaByggja stöð, en leiðsögustikan í sumum þemum styður ekki auka-/fjölþrepa valmyndir. Ef þú ert ekki ánægður geturðu reynt að bæta við eða breyta valmyndarstíl þemunnar handvirkt.

Breytingin byrjar á header.php. Mikilvægur aðgerð í þessari sniðmátsskrá er að birta valmyndina.

Ef þú notar kóðann til að kalla flokkinn sem valmynd er það líka mögulegt, en það er ekki þægilegt að flokka valmyndaratriðin.

Skráin með undirflokkum er ekki auðveld í meðförum, svo ég vil líka bæta sérsniðinni valmyndaraðgerð við þemað mitt eins og önnur þemu.

Það er ekki erfitt að bæta valmyndaraðlögunaraðgerðinni við nýgerða þemað, það eru aðallega 2 skref.

Fyrsta skrefið, WordPress matseðill skráning

Til að nota valmyndina þarftu fyrst að skrá þig, opna aðgerðaskrána undir þemanu og bæta við eftirfarandi kóða ▼

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

• Ef það er engin functions.php skrá undir þemað, búðu til nýjan og afritaðu kóðann hér að ofan til að vista hann.

Skráðu þig innWordPress stuðningur, og farðu síðan í Útlit→ Valmynd.

Ef þú getur séð skjáinn hér að neðan þýðir það að þú hefur skráð þig sem ▼

Ofangreint skráir 2 valmyndir:

1. Toppvalmynd efst matseðill.
2. aðalvalmynd Main matseðill.

Annað skrefið, WordPress valmyndarsímtalið

Eftir að matseðillinn hefur verið skráður er hægt að kalla hann í þemasniðmátskrána.Setjið eftirfarandi kóða í header.php skrána og þú getur kallað hann þar sem þú vilt birta valmyndina.

Í header.php skránni, hringdu í "top menu"▼

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

Í header.php skránni skaltu hringja í "aðalvalmyndina"▼

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

Hringdu í "neðstu valmyndina" í footer.php skránni▼

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

Skref XNUMX: Stillingarvalmynd

Eftir að valmyndin hefur verið skráð og birtingarstaða valmyndarinnar er skilgreind í þemaskránni geturðu búið til nýtt valmyndaratriði í WordPress bakgrunninum.

Síðan skaltu tengja nýstofnaða valmyndaratriðið við skráða valmyndina og leggja til samsvarandi samband ▼

Gerðu wordpress multi-level valmyndarleiðsögustiku

Nú skulum við tala um hvernig á að búa til WordPress fjölþrepa valmynd:

Eyddu fyrst upprunalega valmyndarkóðanum í aðgerðaskránni í þínu eigin WordPress þema.

eða bættu þessum kóða beint við ▼

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

• Athugið: verður að vera inniBætt utan við.

Finndu svo PHP kóðann fyrir þemað til að kalla valmyndina, ef hann er hrár er hann venjulega svona ▼

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

fjarlægðu það og settu ▼ í staðinn

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

• Athugið: Gakktu úr skugga um að þessi kóði innihaldi ekki aðrar divs, annars verður hann afmarkaður af ytri div.

Næsta skref er að bæta við fellivalmyndinni JS fallkóða og bæta eftirfarandi kóða við JS skrá þemunnar ▼

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

WordPress valmynd CSS stíll

Að lokum, fegrun í CSS stíl.

Hvers konar áhrif ætti að vera, gefðu ímyndunaraflinu fullan leik, CSS getur gert það ▼

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

• Bættu ofangreindum CSS kóða við style.css skrá þemunnar og vistaðu hann.

Eftir vistun skaltu endurnýja forsíðu vefsíðunnar þinnar, þú getur séð áhrifin, er það mjög einfalt?