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ແລະຫຼັງຈາກນັ້ນໄປທີ່ Appearance → Menu.

ຖ້າທ່ານສາມາດເຫັນຫນ້າຈໍຂ້າງລຸ່ມນີ້, ມັນຫມາຍຄວາມວ່າທ່ານໄດ້ລົງທະບຽນເປັນ ▼

ຂ້າງເທິງນີ້ລົງທະບຽນ 2 ເມນູ:

1. ເມນູເທິງສຸດ Top Menubar.
2. ເມ​ນູ​ຕົ້ນ​ຕໍ Main ແຖບເມນູ.

ຂັ້ນຕອນທີສອງ, ໂທຫາເມນູ 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>

• ຫມາຍເຫດ: ໃຫ້ແນ່ໃຈວ່າລະຫັດນີ້ບໍ່ມີ divs ອື່ນໆ, ຖ້າບໍ່ດັ່ງນັ້ນມັນຈະຖືກຜູກມັດດ້ວຍ div ພາຍນອກ.

ຂັ້ນຕອນຕໍ່ໄປແມ່ນການເພີ່ມລະຫັດຟັງຊັນ JS ແບບເລື່ອນລົງ ແລະເພີ່ມລະຫັດຕໍ່ໄປນີ້ໃສ່ໄຟລ໌ JS ຂອງຫົວຂໍ້ ▼

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

ຮູບແບບ CSS ຂອງເມນູ WordPress

ສຸດທ້າຍ, ຄວາມງາມແບບ 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 ຂອງຫົວຂໍ້ ແລະບັນທຶກມັນ.

ຫຼັງຈາກປະຫຍັດ, ໂຫຼດຫນ້າຈໍຄືນຫນ້າຂອງເວັບໄຊທ໌ຂອງທ່ານ, ທ່ານສາມາດເບິ່ງຜົນກະທົບ, ມັນງ່າຍດາຍຫຼາຍບໍ?