WordPress ले माध्यमिक/बहु-स्तर नेभिगेसन बार कस्टम मेनुलाई कसरी कल गर्छ?

एकदम धेरै网络 营销मानिसहरूले रोज्छन्WordPressआउनुहोस्स्टेशन बनाउनुहोस्, तर केही विषयवस्तुहरूको नेभिगेसन पट्टीले माध्यमिक/बहु-स्तर मेनुहरूलाई समर्थन गर्दैन। यदि तपाईं सन्तुष्ट हुनुहुन्न भने, तपाईंले विषयवस्तुको मेनु शैली म्यानुअल रूपमा थप्न वा परिमार्जन गर्न प्रयास गर्न सक्नुहुन्छ।

परिमार्जन header.php बाट सुरु हुन्छ। यस टेम्प्लेट फाइलमा एउटा महत्त्वपूर्ण कार्य मेनुको प्रदर्शन हो।

यदि तपाइँ मेनुको रूपमा कोटीलाई कल गर्न कोड प्रयोग गर्नुहुन्छ भने, यो पनि सम्भव छ, तर मेनु वस्तुहरू क्रमबद्ध गर्न यो सुविधाजनक छैन।

उपश्रेणीहरूको साथ डाइरेक्टरी ह्यान्डल गर्न सजिलो छैन, त्यसैले म अन्य विषयवस्तुहरू जस्तै मेरो विषयवस्तुमा अनुकूलन मेनु प्रकार्य थप्न चाहन्छु।

नयाँ बनाइएको थिममा मेनु अनुकूलन प्रकार्य थप्न गाह्रो छैन, त्यहाँ मुख्यतया २ चरणहरू छन्।

पहिलो चरण, 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 ब्याकइन्ड, र त्यसपछि उपस्थिति → मेनुमा जानुहोस्।

यदि तपाईंले तलको स्क्रिन देख्न सक्नुहुन्छ भने, यसको मतलब तपाईंले ▼ को रूपमा दर्ता गर्नुभएको छ

माथिको दर्ता २ मेनुहरू:

1. शीर्ष मेनु शीर्ष मेनुबार।
2. मुख्य मेनु एमain मेनुबार।

दोस्रो चरण, 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)});});

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 फाइलमा थप्नुहोस् र बचत गर्नुहोस्।

बचत गरेपछि, तपाइँको वेबसाइटको अगाडिको पृष्ठलाई ताजा गर्नुहोस्, तपाइँ प्रभाव देख्न सक्नुहुन्छ, यो धेरै सरल छ?