როგორ უწოდებს 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. მთავარი მენიუ 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>

• შენიშვნა: დარწმუნდით, რომ ეს კოდი არ შეიცავს სხვა 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 ფაილში და შეინახეთ იგი.

შენახვის შემდეგ განაახლეთ თქვენი ვებგვერდის პირველი გვერდი, ხედავთ ეფექტს, ეს ძალიან მარტივია?