ওয়ার্ডপ্রেস কিভাবে সেকেন্ডারি/মাল্টি-লেভেল নেভিগেশন বার কাস্টম মেনু কল করে?

অনেকইন্টারনেট মার্কেটিংমানুষ নির্বাচন করেওয়ার্ডপ্রেসআসোএকটি ওয়েবসাইট তৈরি করুন, কিন্তু কিছু থিমের নেভিগেশন বার সেকেন্ডারি/মাল্টি-লেভেল মেনু সমর্থন করে না। আপনি যদি সন্তুষ্ট না হন, আপনি থিমের মেনু শৈলী ম্যানুয়ালি যোগ এবং পরিবর্তন করার চেষ্টা করতে পারেন।

পরিবর্তনটি 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>

'মেনু_নাভি')); ?>

footer.php ফাইলে "নীচের মেনু" কল করুন▼৷

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

তৃতীয় ধাপ, সেটিংস মেনু

মেনু নিবন্ধিত হওয়ার পরে এবং থিম ফাইলে মেনুটির প্রদর্শনের অবস্থান সংজ্ঞায়িত করার পরে, আপনি ওয়ার্ডপ্রেস পটভূমিতে একটি নতুন মেনু আইটেম তৈরি করতে পারেন।

তারপরে, নিবন্ধিত মেনুতে নতুন তৈরি মেনু আইটেমটি বরাদ্দ করুন এবং সংশ্লিষ্ট সম্পর্কের পরামর্শ দিন ▼

ওয়ার্ডপ্রেস মাল্টি-লেভেল মেনু নেভিগেশন বার তৈরি করুন

এখন আসুন ওয়ার্ডপ্রেস মাল্টি-লেভেল মেনু কীভাবে তৈরি করবেন সে সম্পর্কে কথা বলা যাক:

প্রথমে আপনার নিজস্ব ওয়ার্ডপ্রেস থিমের ফাংশন ফাইলের মূল মেনু কোডটি মুছুন।

অথবা সরাসরি এই কোড যোগ করুন ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• দ্রষ্টব্য: অবশ্যই থাকতে হবেবাইরে যোগ করা হয়েছে.

তারপর মেনুতে কল করার জন্য থিমের পিএইচপি কোডটি খুঁজুন, যদি এটি কাঁচা হয় তবে এটি সাধারণত এরকম হয় ▼

<?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 ফাইলে যোগ করুন এবং এটি সংরক্ষণ করুন।

সেভ করার পর আপনার ওয়েবসাইটের ফ্রন্ট পেজ রিফ্রেশ করুন, আপনি ইফেক্ট দেখতে পারবেন, এটা কি খুব সহজ?