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

खूपइंटरनेट मार्केटिंगलोक निवडतातवर्डप्रेसयास्टेशन तयार करा, परंतु काही थीमचा नेव्हिगेशन बार दुय्यम/मल्टी-लेव्हल मेनूला समर्थन देत नाही. तुम्ही समाधानी नसल्यास, तुम्ही थीमची मेनू शैली व्यक्तिचलितपणे जोडण्याचा किंवा सुधारण्याचा प्रयत्न करू शकता.

हे बदल header.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. एक मुख्य मेनू एमain मेनूबार.

दुसरी पायरी, वर्डप्रेस मेनू कॉल

मेनू नोंदणीकृत झाल्यानंतर, थीम टेम्पलेट फाईलमध्ये कॉल केला जाऊ शकतो. खालील कोड 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>

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

footer.php file▼ मधील "तळाशी मेनू" वर कॉल करा

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

पायरी XNUMX: सेटिंग्ज मेनू

मेनू नोंदणीकृत झाल्यानंतर आणि थीम फाइलमध्ये मेनूचे प्रदर्शन स्थान परिभाषित केल्यानंतर, आपण वर्डप्रेस पार्श्वभूमीमध्ये एक नवीन मेनू आयटम तयार करू शकता.

त्यानंतर, नोंदणीकृत मेनूवर नवीन तयार केलेला मेनू आयटम नियुक्त करा आणि संबंधित संबंध सुचवा ▼

वर्डप्रेस मल्टी लेव्हल मेनू नेव्हिगेशन बार बनवा

आता वर्डप्रेस मल्टी-लेव्हल मेनू कसा बनवायचा याबद्दल बोलूया:

प्रथम तुमच्या स्वतःच्या 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)});});

वर्डप्रेस मेनू सीएसएस शैली

शेवटी, 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 फाईलमध्ये जोडा आणि सेव्ह करा.

सेव्ह केल्यानंतर तुमच्या वेबसाइटचे फ्रंट पेज रिफ्रेश करा, तुम्हाला इफेक्ट दिसेल, हे खूप सोपे आहे का?