ವರ್ಡ್ಪ್ರೆಸ್ ಸೆಕೆಂಡರಿ/ಮಲ್ಟಿ-ಲೆವೆಲ್ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಕಸ್ಟಮ್ ಮೆನುವನ್ನು ಹೇಗೆ ಕರೆಯುತ್ತದೆ?

ಬಹಳಷ್ಟುಇಂಟರ್ನೆಟ್ ಮಾರ್ಕೆಟಿಂಗ್ಜನರು ಆಯ್ಕೆ ಮಾಡುತ್ತಾರೆವರ್ಡ್ಪ್ರೆಸ್ಬನ್ನಿವೆಬ್‌ಸೈಟ್ ನಿರ್ಮಿಸಿ, ಆದರೆ ಕೆಲವು ಥೀಮ್‌ಗಳ ನ್ಯಾವಿಗೇಶನ್ ಬಾರ್ ದ್ವಿತೀಯ/ಬಹು-ಹಂತದ ಮೆನುಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ನೀವು ತೃಪ್ತರಾಗದಿದ್ದರೆ, ನೀವು ಥೀಮ್‌ನ ಮೆನು ಶೈಲಿಯನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಸೇರಿಸಲು ಅಥವಾ ಮಾರ್ಪಡಿಸಲು ಪ್ರಯತ್ನಿಸಬಹುದು.

ಬದಲಾವಣೆಯು 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>

'menu_navi')); ?>

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>

• ಗಮನಿಸಿ: ಈ ಕೋಡ್ ಇತರ ಡಿವಿಗಳನ್ನು ಹೊಂದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಇಲ್ಲದಿದ್ದರೆ ಅದು ಹೊರಗಿನ ಡಿವಿಯಿಂದ ಸೀಮಿತವಾಗಿರುತ್ತದೆ.

ಮುಂದಿನ ಹಂತವು ಡ್ರಾಪ್‌ಡೌನ್ 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 ಫೈಲ್‌ಗೆ ಸೇರಿಸಿ ಮತ್ತು ಅದನ್ನು ಉಳಿಸಿ.

ಉಳಿಸಿದ ನಂತರ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಮೊದಲ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ, ನೀವು ಪರಿಣಾಮವನ್ನು ನೋಡಬಹುದು, ಇದು ತುಂಬಾ ಸರಳವಾಗಿದೆಯೇ?