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' => __('底部菜单') ) );
}
?>

• థీమ్ క్రింద ఫంక్షన్స్.php ఫైల్ లేనట్లయితే, కొత్తదాన్ని సృష్టించండి మరియు దానిని సేవ్ చేయడానికి పై కోడ్‌ను కాపీ చేయండి.

లోనికి ప్రవేశించండిWordPress బ్యాకెండ్, ఆపై స్వరూపం→మెనూకి వెళ్లండి.

మీరు దిగువ స్క్రీన్‌ను చూడగలిగితే, మీరు ▼గా నమోదు చేసుకున్నారని అర్థం

పైవి 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')); ?>

మూడవ దశ, సెట్టింగుల మెను

మెను నమోదు చేయబడిన తర్వాత మరియు మెను యొక్క ప్రదర్శన స్థానం థీమ్ ఫైల్‌లో నిర్వచించబడిన తర్వాత, మీరు 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 ఫైల్‌కు జోడించి, దాన్ని సేవ్ చేయండి.

సేవ్ చేసిన తర్వాత, మీ వెబ్‌సైట్ మొదటి పేజీని రిఫ్రెష్ చేయండి, మీరు ప్రభావాన్ని చూడవచ్చు, ఇది చాలా సులభం?