আপনার ওয়াডপ্রেস সাইটের জন্য সুন্দর একটি মেনু তৈরি করবেন যেভাবে।

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

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


 

Step #1

প্রথমে WordPress Editor থেকে header.php ওপেন করুন এবং আপনার আগের মেনু ডিলেট করে দিন। এর পর এই কডটি পেস্ট করে দিন।

<nav id="cssmenu">
<?php
 wp_nav_menu(array(
 'menu' => 'Main Menu',
 'container_id' => 'cssmenu',
 'walker' => new CSS_Menu_Maker_Walker()
 ));
 ?>

 </nav>

Step #2

এবার আপনার থিমের functions.php ওপেন করে আগের যে মেনু ফাংশন দিওয়া ছিলো তা ডিলেট করে দিন। এবার এই কোডটি পেস্ট করুন।


class CSS_Menu_Maker_Walker extends Walker {

var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}

function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;

/* Add active class */
if(in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}

/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? 'pln" style="margin: 0px; padding: 0px; font-size: 1em; outline: none; color: rgb(238, 238, 238);"> . esc_attr( $class_names ) . '"' : '';

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

$output .= $indent . '<li' . $id . $value . $class_names .'>';

$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}

Step #3

এবার CSS যোগ করার পালা। তা style.css edit করে এই নিচের কোডটি ড়েস্ট করে দিন।


/* Starter CSS for Menu */
#cssmenu {
 padding: 0;
 margin: 0;
 border: 0;
 width: auto;
}
#cssmenu ul,
#cssmenu li {
 list-style: none;
 margin: 0;
 padding: 0;
}
#cssmenu ul {
 position: relative;
 z-index: 597;
}
#cssmenu ul li {
 float: left;
 min-height: 1px;
 vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
#cssmenu ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
#cssmenu ul ul li {
 float: none;
}
#cssmenu ul ul ul {
 top: 0;
 left: 190px;
 width: 190px;
}
#cssmenu ul li:hover > ul {
 visibility: visible;
}
#cssmenu ul ul {
 bottom: 0;
 left: 0;
}
#cssmenu ul ul {
 margin-top: 0;
}
#cssmenu ul ul li {
 font-weight: normal;
}
#cssmenu a {
 display: block;
 line-height: 1em;
 text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
 background: #333333;
 border-bottom: 4px solid #1b9bff;
 font-family: 'sans-serif';
 font-size: 12px;
}
#cssmenu > ul {
 *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
 content: '';
 display: block;
 clear: both;
}
#cssmenu ul {
 text-transform: uppercase;
}
#cssmenu ul ul {
 border-top: 4px solid #1b9bff;
 text-transform: none;
 min-width: 190px;
}
#cssmenu ul ul a {
 background: #1b9bff;
 color: #ffffff;
 border: 1px solid #0082e7;
 border-top: 0 none;
 line-height: 150%;
 padding: 16px 20px;
 font-size: 12px;
}
#cssmenu ul ul ul {
 border-top: 0 none;
}
#cssmenu ul ul li {
 position: relative;
}
#cssmenu ul ul li:first-child > a {
 border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
 background: #4eb1ff;
 color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
 -moz-border-radius: 0 0 3px 3px;
 -webkit-border-radius: 0 0 3px 3px;
 border-radius: 0 0 3px 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 -moz-box-shadow: 0 1px 0 #1b9bff;
 -webkit-box-shadow: 0 1px 0 #1b9bff;
 box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
 -moz-border-radius: 0 0 0 3px;
 -webkit-border-radius: 0 0 0 3px;
 border-radius: 0 0 0 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
 content: '+';
 position: absolute;
 top: 50%;
 right: 15px;
 margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
 background: #1b9bff;
 color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
 content: '+';
 margin-left: 5px;
}
#cssmenu ul li.last ul {
 left: auto;
 right: 0;
}
#cssmenu ul li.last ul ul {
 left: auto;
 right: 99.5%;
}
#cssmenu a {
 background: #333333;
 color: #CBCBCB;
 padding: 0 20px;
}
#cssmenu > ul > li > a {
 line-height: 48px;
 font-size: 12px;
}

HTML source file Download করুন এখান থেকে। DOWNLOAD প্রথম টিউন করছি তাই ভুল হলে ক্ষামা করবেন। আর একটা কথা আমি আমি টিউনের ভিতর ইমেজ এড করতে পারছি না। আমার ওয়েবসাইট WebProjectBD ঘুরে আসেন। আমার ফেসবুক | Dipto Paul

Level New

আমি প্রযুক্তি পাগল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 9 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 21 টি টিউন ও 92 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

I am a web designer and learning development. http://wptechtune.blogspot.com http://webprojectbd.blogspot.com


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

thank you……ভাই

Level 2

nice tune.. now give me the tips. how i can make custom advance search box in the middle of the home page ??

ধন্যবাদ ভাই ।

Try করে দেখি

    @যোবায়ের হোসাইন জনি: আপনাকেও ধন্যবাদ।

vai….khaisi bash frown emoticon
funchtion .ph te akta code sisilam..then update a click korlam..r site load hoy na
frown emoticon
Internal server error
This website might have encountered a technical problem and cannot fullfill your request.

khaisi bash 🙁

funchtion .php te akta code disilam..then update a click korlam..r site load hoy na
:/

Internal server error
This website might have encountered a technical problem and cannot fullfill your request.

oi ei code e prob ase thik kor taratari

class CSS_Menu_Maker_Walker extends Walker {
 
var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
 
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}
 
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
 
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
 
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
 
/* Add active class */
if(in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}
 
/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}
 
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? 'pln" style="margin: 0px; padding: 0px; font-size: 1em; outline: none; color: rgb(238, 238, 238);"> . esc_attr( $class_names ) . '"' : '';
 
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
 
$output .= $indent . '<li' . $id . $value . $class_names .'>';
 
$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
 
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
 
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
 
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}