WordPress ද්විතීයික/බහු මට්ටමේ සංචාලන තීරුව අභිරුචි මෙනුව අමතන්නේ කෙසේද?

ගොඩක්අන්තර්ජාල අලෙවිකරණයමිනිසුන් තෝරා ගනීවර්ඩ්ප්රෙස්එන්නවෙබ් අඩවියක් සාදන්න, නමුත් සමහර තේමා වල සංචාලන තීරුව ද්විතීයික/බහු මට්ටමේ මෙනු සඳහා සහය නොදක්වයි. ඔබ සෑහීමකට පත් නොවන්නේ නම්, ඔබට තේමාවේ මෙනු විලාසය අතින් එකතු කිරීමට හෝ වෙනස් කිරීමට උත්සාහ කළ හැක.

වෙනස් කිරීම 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 ගොනුවක් නොමැති නම්, නව එකක් සාදා එය සුරැකීමට ඉහත කේතය පිටපත් කරන්න.

ලොගින් වන්නWordPress පසුබිම, ඉන්පසු පෙනුම→ මෙනුව වෙත යන්න.

ඔබට පහත තිරය දැකිය හැකි නම්, එයින් අදහස් වන්නේ ඔබ ▼ ලෙස ලියාපදිංචි වී ඇති බවයි

ඉහත මෙනු 2ක් ලියාපදිංචි කරයි:

1. ඉහළ මෙනුවක් Top Menubar.
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 බහු මට්ටමේ මෙනු සංචාලන තීරුව සාදන්න

දැන් අපි වර්ඩ්ප්‍රෙස් බහු මට්ටමේ මෙනුවක් සාදා ගන්නේ කෙසේද යන්න ගැන කතා කරමු:

මුලින්ම ඔබේම වර්ඩ්ප්‍රෙස් තේමාවේ ක්‍රියාකාරී ගොනුවේ මුල් මෙනු කේතය මකන්න.

හෝ මෙම කේතය කෙලින්ම එකතු කරන්න ▼

<?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)});});

වර්ඩ්ප්‍රෙස් මෙනු 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 ගොනුවට එකතු කර එය සුරකින්න.

සුරැකීමෙන් පසු, ඔබේ වෙබ් අඩවියේ මුල් පිටුව නැවුම් කරන්න, ඔබට එහි බලපෑම දැකිය හැකිය, එය ඉතා සරලද?