ওয়ার্ডপ্রেসে একটি আলাদা নতুন মেনু তৈরি ও ডিজাইন করার সহজ উপায়

  • by
অসাধারণ সুন্দর একটি মেনু ডিজাইন

আজ আমরা দেখবো কিভাবে ওয়ার্ডপ্রেসে একটি আলাদা নতুন মেনু তৈরি করা যায়। কারণ বিভিন্ন প্রয়োজনে আলাদা আলাদা টেম্পলেট বা পেইজের জন্য নতুন নতুন মেনুর দরকার হতে পারে। হয়তোবা আপনি এমন একটি মেনু তৈরি করতে চান, যা কেবল একটি নির্দিষ্ট পেইজেই দেখাতে চাচ্ছেন। কিন্তু পুরাতন মেনুতে ঐ লিঙ্ক যুক্ত করলে তা সব পেইজেই দেখাবে। তাই নতুন একটি মেনু তৈরি করে হেডারের পুরাতন মেনুর জায়গাতে ব্যবহার করতে পারেন। এটা মূলতঃ কনটেন্ট ম্যানেজমেন্ট সিস্টেম সাজানোর একটি অন্যতম উপায়।

ওয়ার্ডপ্রেস মেনু হচ্ছে দরকারি পেজ ও ক্যাটাগরির লিঙ্কগুলোকে সাজিয়ে রাখার একটি অন্যতম মাধ্যম। অতিরিক্ত মেনু তৈরি করার ফিচারটি ওয়ার্ডপ্রেস ৩.০ থেকে যুক্ত করা হয়েছে। এই রচনায় আমরা দেখাবো, কিভাবে ওয়ার্ডপ্রেস থিমে নতুন মেনু যোগ করতে হয় এবং কিভাবে তাতে সুন্দর স্টাইল ও সি এস এস ডিজাইন যোগ করতে হয়।

কিভাবে ওয়ার্ডপ্রেসে মেনু যোগ করবেন

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

function register_my_menu() {
register_nav_menu('main-menu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' );

এখানে, প্রধান মেনুটির ইউনিক নাম হচ্ছে main-menu’। এখন এই মেনুটি যদি থিমে প্রদর্শন করতে হয়, তাহলে নিচের কোডটি মেনুর জন্য নির্দিষ্ট জায়গায় যোগ করে দিতে হবে।

<div id="main-menu">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu') ); ?>
</div>

এখন হয়তো ভাবছেন। এই মেনুটিকে কিভাবে ডিজাইন করবেন। সাধারণভাবে, উপরোক্ত কোডটি নিন্মোক্ত এইচটিএমএল রেজাল্টটি আউটপুট হিসেবে প্রদর্শন করে থাকে। অর্থাৎ যা কিছুই মেনু হিসেবে প্রদর্শন করা হবে, তা মোটামুটি নিচের এইচটিএমএল প্যাটার্নের মতো করে দেখানো হবে। এটার আবার ১,২ ও ৩ এমন বিভিন্ন লেভেল থাকতে পারে।

<div id="main-menu">
<ul>
         <li>Home</li>
         <li>Contact</li>
         <li>Privacy</li>
         <li>Products</li>
         <li>Sitemap</li>
</ul>
</div>

ওয়ার্ডপ্রেস মেনু হচ্ছে মূলত একটি আন-অর্ডারেড লিস্ট। তাই এই মেনুটিকে সাজাতে হলে ডিভিশন ক্লাসের সাথে আন-অর্ডারেড লিস্টের এইচটিএমএল সিলেক্টরগুলোও যোগ করতে হবে।

মেনুর জন্য সিএসএস সিলেক্টরঃ

যেমন, এখানে ডিভিশন আইডি হচ্ছে main-menu। তাই সিএসএসের জন্য এইচটিএমএল সিলেক্টর হবেঃ

#main-menu

#main-menu{} //কন্টেইনার ক্লাস।

#main-menu ul {} //প্রথম unordered list এর জন্য কন্টেইনার ক্লাস।

#main-menu ul ul {} //আনঅর্ডার লিস্টের এক ধাপ নিচের আরও একটি আনঅর্ডার লিস্ট।

#main-menu li {} //প্রত্যেকটি ন্যাভিগেশন মেনু আইটেম।

#main-menu li a {} //প্রত্যেকটি ন্যাভিগেশন মেনু আইটেমের লিংক বা অ্যাংকর টেক্সট

#main-menu li ul {} //নিচে কোনও আইটেম থাকলে আনঅর্ডার লিস্ট।

#main-menu li li {} //প্রত্যেকটি ড্রপডাউন ন্যাভিগেশন আইটেম।

#main-menu li li a {} //প্রত্যেকটি ড্রপডাউন ন্যাভিগেশন আইটেমের অ্যাংকর টেক্সট।

স্বাভাবিক ভাবে মেনুর ডিজাইন তৈরি করতে এই অ্যাংকর টেক্সটগুলো ব্যবহার করতে হবে। নিচে আমরা খুব সিম্পল একটি মেনু তৈরি করে এর ডিজাইনগুলো দেখবো। আমাদের মেনুটি হবে ৩ লেভেলের। অর্থাৎ, প্রথম, দ্বিতীয় ও তৃতীয় স্তরে আনঅর্ডার লিস্ট ব্যবহার করা হবে।

তাহলে চলুন শুরু করি।

আমাদের মেনুর এইচটিএমএল স্ট্রাকচার হবে নিচের মতোঃ


<header class="top">
        <nav class="main-menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li class="has-submenu">
                    <a href="#">About</a>
                    <ul>
                        <li class="has-submenu">
                            <a href="#">FAQ</a>
                            <ul>
                                <li><a href="#">How it works</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Blog</a></li>
                <li class="has-submenu"><a href="#">Products</a>
                    <ul>
                      <li><a href="#">Product One</a></li>
                      <li><a href="#">Product Two</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>

তো এবার মেনু ডিজাইন করার পালা।

প্রথমে আমরা হেডার কন্টেইনারের প্রশস্ততা ও মার্জিন ঠিক করবো।

.top{
    width: 1200px;
    margin: 0 auto; 
}

এবার মূল মেনুর প্রশস্ততা ও মার্জিন ঠিক করবো। আমরা এখানে মেনুর প্রশস্ততা হেডারের সমান রাখতে চাচ্ছি। আর তাই ১০০% প্রশস্ত ও মার্জিন অটো করে দিয়েছি। ফলে এটা স্ক্রিনের মাঝামাঝি অবস্থানে দেখাবে।

.main-menu{
    width: 100%;
    margin: 0 auto;
}

এবার মূল মেনুর আনঅর্ডার লিস্টের স্টাইল ঠিক করবো। এখানে আমরা প্যাডিং ০ ও মার্জিন ০ দিবো। এর ফলে লিস্টের উপরে ও নিচে কোনও ফাঁকা স্থান থাকবে না। এরপর list-style: none; দিবো। ফলে আনঅর্ডার লিস্টের যেই গোল গোল চিহ্নগুলো দেখা যায় ওগুলো মুছে যাবে। এবং position: relative; রাখবো। ফলে একটার পরে আরেকটা দেখাবে, কোনও ভাবেই একটা এলিমেন্ট যেনো অপর এলিমেন্টের সীমারেখা না ছাড়িয়ে যায় সেজন্য এটা দেয়া হয়।

.main-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

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

.main-menu > ul > li {
    display: inline-block;
    background-color: blue;
    position: relative;
    padding: 0 1.5rem;
}
.main-menu > ul > li > a {
    display: inline-block;
    padding: 1.5rem ;
    font-weight: bold;
}

এর মাধ্যমে আমাদের লিস্ট আইটেম গুলো ব্লক হিসেবে দেখাবে। এবং position: relative; থাকার ফলে একটি অপরটির পরে দেখাবে। padding: 0 1.5rem; দিয়ে উপরে নিচে ০ ও দুইপাশে 1.5rem প্যাডিং রাখা হয়েছে। আমি এখানে rem ব্যবহার করছি। কারণ এর ফলে একটা সামঞ্জস্য থাকবে।

অ্যাংকর ট্যাগের ক্ষেত্রে display: inline-block; রেখেছি। এর ফলে এলিমেন্টগুলো পাশাপাশি দেখাবে। padding রেখেছি 1.5rem ; এর ফলে অ্যাংকরের পরিধি বাড়বে। ফলে সহজে ক্লিক করা যাবে। ফন্ট এখানে গাড় রাখতে চাই। তাই bold ব্যবহার করেছি।

প্রথম লেভেলের স্টাইল করা হয়েছে। এবার আসি দ্বিতীয় লেভেলে।

.main-menu li ul{
    /*display: none;*/
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    width: 15rem;
    background-color: blue;
    transition: all 200ms ease;
}

padding: 0; margin: 0; দিয়ে সব ধরনের অতিরিক্ত মার্জিন ও প্যাডিং মুছে দেয়া হয়েছে। এখন opacity: 0; দিয়ে অস্বচ্ছতাও স্বচ্ছ করে দেয়া হয়েছে। visibility: hidden; দিয়ে দ্বিতীয় লেভেলের মেনু লুকানো হয়েছে। এখানে এর পরিবর্তে display: none; ব্যবহার করা যায়। তবে এর ফলে নিচের লেভেলের মেনুগুলো স্ট্যাবল থাকবে না। যদি না জাভাস্ক্রিপ্ট ব্যবহার করা হয়। কিন্তু এখানে আমরা শুধুমাত্র সিএসএস ব্যবহার করছি। তাই, visibility: hidden; এটাই ভালো। উপরের এলিমেন্ট থেকে ১০০% নিচে থাকার জন্য top: 100%; বামদিক ঘেষে থাকার জন্য left: 0; ব্যবহার করেছি। আমরা মেনুর প্রশস্ততা নিয়েছি width: 15rem; এবং ট্রাঞ্জিশন নিয়েছি ২০০ মিলি সেকেন্ড। যার ফলে পরবর্তীতে মেনুটি খোলা হলে খুব স্মুদ একটি ইফেক্ট তৈরি হবে।

মূল মেনু যার একটি সাবমেনু আছে, তাতে কার্সর নিয়ে গেলে খুব সহজেই নিচের মেনুটি যাতে খুলে যায় এজন্য আমরা হোভার ইফেক্ট যুক্ত করবো। আর তা হচ্ছেঃ

  .main-menu li:hover > ul {
    display: block;
     opacity: 1;
     visibility: visible;
     margin-top: .3rem; 
     background-color: blueviolet;  
 }

এবার দ্বিতীয় লেভেলের মেনুটি যাতে ব্লক আকারে দেখানো হয় এবং তা প্রথম লেভেলের মত হয়, এজন্য এতে আমরা নিচের সেটিংসগুলো যুক্ত করবো।

 .main-menu li ul a {
    display: block;
    padding: 1rem;
    font-weight: bold;
}

এর নিচে সাবমেনু থাকলে তার ডিজাইন ঠিক করার জন্য আমরা নিচের কোড যুক্ত করবো।

.has-submenu > ul > li {
    position: relative;
    z-index: 1;
    border-bottom: .3rem solid white;
    padding: .3rem;
}

এর ফলে উপরের ও নিচের মেনু দেখতে একই রকম মনে হবে। তৃতীয় লেভেলের মেনুর জন্য নিচের ডিজাইন ব্যবহার করা হবে।

/* 3rd level. */
.main-menu li ul li ul {
 left: 100%;
 top: -.3rem;
 margin: .3rem;
}
.main-menu a{
    color:cornsilk;
    text-decoration: none;
}

এটা দিয়ে তৃতীয় লেভেলের মেনু যাতে ১০০% ডানদিকে উপর থেকে -.3rem দুরুত্বে থাকে ও বাম দিকের মার্জিন .3rem থাকে তা নিশ্চিত করা হয়েছে। এবার মেইন মেনুর রং সাদাটে ও টেক্সট ডেকোরেশন মুছে দিবো।

 .main-menu a{
    color:cornsilk;
    text-decoration: none;
}

এবার, তিন লেভেলের পাশে ড্রপ ডাউন তীর চিহ্নের জন্য নিচের স্টাইলগুলো ব্যবহার করবো।

/* Drop down arrows. */
.main-menu > ul > li.has-submenu:after,
.main-menu li ul li.has-submenu:after {
 content: '';
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 0;
 height: 0;
}

/* 1st level arrows. */
.main-menu > ul > li.has-submenu:after {
 right: 1.5rem;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-top: 5px solid rgba(255, 255, 255, 0.945);
}

/* 2nd level arrows. */
.main-menu li ul li.has-submenu:after{
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid rgba(255, 255, 255, .945);
 right: 1.5rem;
}

আমাদের সম্পূর্ণ মেনুটি তৈরি হয়ে গেলো। পরের ধাপে আমরা এই মেনুটিকে কী করে মোবাইল ফ্রেন্ডলি করা যায় তা দেখবো। আজ এ পর্যন্তই। সবাই ভালো থাকবেন ও সুস্থ থাকবেন। সবগুলো ধাপ সঠিকভাবে অনুসরন করলে আপনার মেনুটি নিচের মত দেখাবে।

সঠিকভাবে তৈরি করলে আপনার মেনুটি এমন দেখাবে
সঠিকভাবে তৈরি করলে আপনার মেনুটি এমন দেখাবে

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.