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 цэсийн дуудлага

Цэс бүртгэгдсэний дараа theme template файлд дуудаж болно.Дараах кодыг 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')); ?>

Гурав дахь алхам бол тохиргооны цэс юм

Цэсийг бүртгэж, цэсийн харагдах байдлыг сэдэв файлд тодорхойлсны дараа та 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 файлд нэмээд хадгална уу.

Хадгалсны дараа вэбсайтынхаа нүүр хуудсыг шинэчилнэ үү, үр нөлөө нь харагдаж байна, энэ нь маш энгийн үү?