वर्डप्रेस सेकेंडरी/मल्टी-लेवल नेविगेशन बार कस्टम मेन्यू को कैसे कॉल करता है?

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

संशोधन हेडर.php से शुरू होता है। इस टेम्पलेट फ़ाइल में एक महत्वपूर्ण कार्य मेनू का प्रदर्शन है।

यदि आप श्रेणी को मेनू के रूप में कॉल करने के लिए कोड का उपयोग करते हैं, तो यह भी संभव है, लेकिन मेनू आइटम को सॉर्ट करना सुविधाजनक नहीं है।

उप-श्रेणियों वाली निर्देशिकाओं को संभालना आसान नहीं है, इसलिए मैं अन्य विषयों की तरह ही अपनी थीम में कस्टम मेनू फ़ंक्शन भी जोड़ना चाहता हूं।

नव निर्मित थीम में मेनू अनुकूलन फ़ंक्शन जोड़ना मुश्किल नहीं है, मुख्य रूप से 2 चरण हैं।

पहला कदम, वर्डप्रेस मेनू पंजीकरण

मेनू का उपयोग करने के लिए, आपको पहले पंजीकरण करना होगा, थीम के तहत फ़ंक्शन फ़ाइल खोलनी होगी, और निम्न कोड संलग्न करना होगा

<?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 फ़ाइल नहीं है, तो एक नया बनाएं और इसे सहेजने के लिए उपरोक्त कोड को कॉपी करें।

登录वर्डप्रेस बैकएंड, और फिर प्रकटन → मेनू पर जाएँ।

यदि आप नीचे स्क्रीन देख सकते हैं, तो इसका मतलब है कि आपने . के रूप में पंजीकृत किया है

उपरोक्त 2 मेनू पंजीकृत करता है:

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

दूसरा चरण, वर्डप्रेस मेनू कॉल

मेनू पंजीकृत होने के बाद, इसे थीम टेम्पलेट फ़ाइल में बुलाया जा सकता है। निम्न कोड को शीर्षलेख.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>

'मेनू_नवी')); ?>

Footer.php फ़ाइल में "निचला मेनू" को कॉल करें▼

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

चरण XNUMX: सेटिंग्स मेनू

मेनू पंजीकृत होने के बाद और थीम फ़ाइल में मेनू की प्रदर्शन स्थिति परिभाषित की जाती है, आप वर्डप्रेस पृष्ठभूमि में एक नया मेनू आइटम बना सकते हैं।

फिर, नव निर्मित मेनू आइटम को पंजीकृत मेनू में असाइन करें, और संबंधित संबंध का सुझाव दें

वर्डप्रेस को बहु-स्तरीय मेनू नेविगेशन बार बनाएं

अब बात करते हैं कि वर्डप्रेस मल्टी-लेवल मेन्यू कैसे बनाया जाता है:

सबसे पहले अपनी खुद की वर्डप्रेस थीम की फंक्शन फाइल में से ओरिजिनल मेन्यू कोड को डिलीट करें।

या इस कोड को सीधे जोड़ें

<?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 से घिरा होगा।

अगला कदम ड्रॉपडाउन जेएस फ़ंक्शन कोड जोड़ना है और थीम की जेएस फ़ाइल में निम्न कोड जोड़ना है

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

वर्डप्रेस मेनू सीएसएस शैलियाँ

अंत में, 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 फ़ाइल में जोड़ें और इसे सेव करें।

सेव करने के बाद, अपनी वेबसाइट के फ्रंट पेज को रिफ्रेश करें, आप प्रभाव देख सकते हैं, क्या यह बहुत आसान है?