Kodi WordPress imayitanitsa bwanji menyu yachiwiri / yamitundu ingapo?

zambiri zaKutsatsa Paintanetianthu amasankhaWordPressBweraniMangani malo okwerera, koma cholozera chamitu ina sichigwirizana ndi ma menyu achiwiri/magawo angapo.Ngati simukukhutitsidwa, mutha kuyesa kuwonjezera pamanja kapena kusintha masitayilo amutuwo.

Kusinthaku kumayambira ku header.php Ntchito yofunikira mufayilo ya template iyi ndikuwonetsa menyu.

Ngati mugwiritsa ntchito kachidindo kuti muyitane gulu ngati menyu, ndizothekanso, koma sikoyenera kusanja zinthu za menyu.

Maulalo omwe ali ndi magawo ang'onoang'ono sakhala osavuta kugwiritsa ntchito, chifukwa chake ndikufunanso kuwonjezera machitidwe azokonda pamutu wanga monga mitu ina.

Sizovuta kuwonjezera ntchito yosinthira menyu pamutu womwe wangopangidwa kumene, pali masitepe awiri.

Gawo loyamba, kulembetsa menyu ya WordPress

Kuti mugwiritse ntchito menyu, muyenera kulembetsa kaye, kutsegula fayilo yomwe ili pansi pamutuwo, ndikuwonjezera nambala iyi ▼

<?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' => __('底部菜单') ) );
}
?>
  • Ngati palibe fayilo ya function.php pansi pamutuwu, pangani yatsopano ndikujambula kachidindo pamwambapa kuti musunge.

fufuzaniWordPress backend, ndiyeno pitani ku Mawonekedwe→Menyu.

Ngati mutha kuwona chophimba pansipa, zikutanthauza kuti mwalembetsa ngati ▼

Nambala 1 ya menyu ya WordPress

Pamwambapa amalembetsa 2 menyu:

  1. Apamwamba menyu Top Menubar.
  2. menyu yayikulu Main menyu.

Gawo lachiwiri, kuyimba kwa menyu ya WordPress

Menyu ikalembetsedwa, ikhoza kutchedwa mu fayilo ya template ya mutu.Ikani kachidindo kotsatira mu fayilo ya header.php, ndipo mutha kuyitcha komwe mukufuna kuwonetsa menyu.

Pamutu.php wapamwamba, imbani "zapamwamba menyu"▼

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

Pamutu.php wapamwamba, imbani "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')); ?>

Itanani "zam'munsi" mu footer.php file▼

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

Gawo lachitatu, menyu zoikamo

Menyu ikalembetsedwa ndipo malo owonetsera a menyu amatanthauzidwa mufayilo yamutu, mutha kupanga chinthu chatsopano chamtundu kumbuyo kwa WordPress.

Kenako, perekani zomwe zangopangidwa kumene ku menyu yolembetsedwa, ndikuwonetsa ubale wofananira ▼

Kodi WordPress imayitanira bwanji menyu yachiwiri / yamitundu ingapo?Chithunzi cha 2

Pangani mawu a wordpress multilevel menyu navigation bar

Tsopano tiyeni tikambirane za momwe mungapangire WordPress menyu yamagulu angapo:

Choyamba chotsani kachidindo koyambirira mufayilo yanu ya WordPress.

kapena onjezani nambala iyi mwachindunji ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
  • Zindikirani: ayenera kukhala mkatiWowonjezera kunja.

Kenako pezani nambala ya PHP kuti mutuwo utchule menyu, ngati ili yaiwisi, nthawi zambiri imakhala motere ▼

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

chotsani ndikusintha ndi ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>
  • Zindikirani: Onetsetsani kuti codeyi ilibe ma div ena, apo ayi idzamangidwa ndi div yakunja.

Chotsatira ndikuwonjezera nambala yantchito ya JS ndikuwonjezera nambala yotsatira pa fayilo ya JS ▼

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

Mawonekedwe a WordPress Menyu CSS

Pomaliza, kukongoletsa kalembedwe ka CSS.

Zochita ziyenera kukhala zotani, perekani sewero lathunthu m'malingaliro anu, CSS ikhoza kuchita ▼

#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;}
  • Onjezani kachidindo ka CSS pamwambapa pafayilo yamutu wa style.css ndikusunga.

Mukasunga, tsitsimutsani tsamba loyamba la tsamba lanu, mutha kuwona zotsatira zake, ndi zophweka?

Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) adagawana "Kodi WordPress imayitanira bwanji menyu yachiwiri / yamitundu ingapo? , kukuthandizani.

Takulandirani kugawana ulalo wa nkhaniyi:https://www.chenweiliang.com/cwl-1521.html

Takulandilani panjira ya Telegraph yabulogu ya Chen Weiliang kuti mupeze zosintha zaposachedwa!

🔔 Khalani oyamba kupeza "ChatGPT Content Marketing AI Tool Usage Guide" m'ndandanda wapamwamba kwambiri! 🌟
📚 Bukuli lili ndi phindu lalikulu, 🌟Uwu ndi mwayi wosowa, musaphonye! ⏰⌛💨
Share ndi like ngati mukufuna!
Kugawana kwanu ndi zomwe mumakonda ndizomwe zimatilimbikitsa nthawi zonse!

 

发表 评论

Imelo yanu sidzasindikizidwa. Minda yofunikira imagwiritsidwa ntchito * Chizindikiro

pindani pamwamba