ਵਰਡਪਰੈਸ ਸੈਕੰਡਰੀ/ਮਲਟੀ-ਲੈਵਲ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਕਸਟਮ ਮੀਨੂ ਨੂੰ ਕਿਵੇਂ ਕਾਲ ਕਰਦਾ ਹੈ?

ਬਹੁਤ ਸਾਰੇਇੰਟਰਨੈੱਟ ਮਾਰਕੀਟਿੰਗਲੋਕ ਚੁਣਦੇ ਹਨਵਰਡਪਰੈਸਆਉਣਾਇੱਕ ਵੈਬਸਾਈਟ ਬਣਾਓ, ਪਰ ਕੁਝ ਥੀਮਾਂ ਦੀ ਨੈਵੀਗੇਸ਼ਨ ਪੱਟੀ ਸੈਕੰਡਰੀ/ਮਲਟੀ-ਲੈਵਲ ਮੀਨੂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੀ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਸੰਤੁਸ਼ਟ ਨਹੀਂ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਥੀਮ ਦੀ ਮੇਨੂ ਸ਼ੈਲੀ ਨੂੰ ਹੱਥੀਂ ਜੋੜਨ ਜਾਂ ਸੋਧਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦੇ ਹੋ।

ਸੋਧ 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 ਸ਼ੈਲੀ ਦੀ ਸੁੰਦਰਤਾ.

ਕਿਸ ਕਿਸਮ ਦਾ ਪ੍ਰਭਾਵ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਆਪਣੀ ਕਲਪਨਾ ਨੂੰ ਪੂਰਾ ਖੇਡ ਦਿਓ, 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 ਫਾਈਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ।

ਸੇਵ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਦੇ ਪਹਿਲੇ ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕਰੋ, ਤੁਸੀਂ ਪ੍ਰਭਾਵ ਦੇਖ ਸਕਦੇ ਹੋ, ਕੀ ਇਹ ਬਹੁਤ ਸਧਾਰਨ ਹੈ?