વર્ડપ્રેસ સેકન્ડરી/મલ્ટી-લેવલ નેવિગેશન બાર કસ્ટમ મેનુને કેવી રીતે કૉલ કરે છે?

ઘણુંઈન્ટરનેટ માર્કેટિંગલોકો પસંદ કરે છેવર્ડપ્રેસઆવોવેબસાઇટ બનાવો, પરંતુ કેટલીક થીમ્સની નેવિગેશન બાર સેકન્ડરી/મલ્ટી-લેવલ મેનુઓને સપોર્ટ કરતી નથી. જો તમે સંતુષ્ટ ન હોવ, તો તમે થીમની મેનુ શૈલીને મેન્યુઅલી ઉમેરવા અને સંશોધિત કરવાનો પ્રયાસ કરી શકો છો.

ફેરફાર 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 ફાઈલ નથી, તો એક નવી બનાવો અને તેને સાચવવા માટે ઉપરોક્ત કોડ કોપી કરો.

પ્રવેશ કરોવર્ડપ્રેસ બેકએન્ડ, અને પછી દેખાવ → મેનુ પર જાઓ.

જો તમે નીચેની સ્ક્રીન જોઈ શકો છો, તો તેનો અર્થ એ કે તમે ▼ તરીકે નોંધણી કરાવી છે

ઉપરોક્ત 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 ફાઇલ▼માં "નીચેના મેનુ" પર કૉલ કરો

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

ત્રીજું પગલું, સેટિંગ્સ મેનૂ

મેનૂ રજીસ્ટર થયા પછી અને થીમ ફાઇલમાં મેનૂની ડિસ્પ્લે પોઝિશન વ્યાખ્યાયિત કરવામાં આવે તે પછી, તમે વર્ડપ્રેસ પૃષ્ઠભૂમિમાં એક નવી મેનૂ આઇટમ બનાવી શકો છો.

પછી, નોંધાયેલ મેનુમાં નવી બનાવેલી મેનૂ આઇટમ સોંપો, અને અનુરૂપ સંબંધ સૂચવો ▼

વર્ડપ્રેસ મલ્ટી-લેવલ મેનુ નેવિગેશન બાર બનાવો

હવે ચાલો વર્ડપ્રેસ મલ્ટી-લેવલ મેનૂ કેવી રીતે બનાવવું તે વિશે વાત કરીએ:

સૌપ્રથમ તમારી પોતાની વર્ડપ્રેસ થીમની ફંક્શન ફાઈલમાં મૂળ મેનુ કોડ કાઢી નાખો.

અથવા આ કોડ સીધો ઉમેરો ▼

<?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>

• નોંધ: ખાતરી કરો કે આ કોડમાં અન્ય ડિવ્સ શામેલ નથી, અન્યથા તે બાહ્ય ડિવ દ્વારા બંધાયેલ હશે.

આગળનું પગલું એ ડ્રોપડાઉન 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;}

• થીમની style.css ફાઇલમાં ઉપરોક્ત CSS કોડ ઉમેરો અને તેને સાચવો.

સેવ કર્યા પછી, તમારી વેબસાઇટના આગળના પૃષ્ઠને તાજું કરો, તમે અસર જોઈ શકો છો, શું તે ખૂબ જ સરળ છે?