در این آموزش به ساخت مگا منو می پردازیم.

بسیاری از سایت ها دارای منو های ناوبری هستند که صفحات مشخصی را نمایش می دهد، گاهی این منو ها ساده و بدون زیر منو هستند و گاهی دارای زیر منو می باشند و گاهی هم دارای زیر منو های پیشرفته تری همراه با عکس و ستون می باشند که به مگا منو معروف هستند. 

 

مگا منو چیست

یک مگا منو، یک منوی کشویی ساده نیست بلکه  شامل یک نوع گسترده  زیر منو می باشد.این نوع از منو یک نگاه ویژه و حرفه ای  می خواهد.مگا منو یک راه عالی برای نمایش اطلاعات سایت به صورت عمقی می باشد که تقریبا تمام دسته بندی های سایت را نمایش می دهد.فرض کنید شما یکی از منوهایتان ۱۵ زیر دسته بندی داشته باشد اگر بخواهید آن ها را به صورت کشویی ساده نمایش دهید سبک دهی جالبی ندارد و می توان از مگا منو استفاده کرد.

 ساخت مگا منو

  1. ایجاد یک فیلد سفارشی برای نوع پستی منو

     

     

     

     

     

    • این فیلد بعدا برای افزودن محتوا استفاده می شود
  2. نمایش فیلد سفارشی هر باری که یک منو را می خواهیم بسازیم

     

     

     

     

     

    • ساخت یک کلاس برای گسترس  Walker_Nav_Menu  برای نمایش فیلد دلخواه
    • این walker سفارشی ما برای  شی فید می باشد. 
    • بروزرسانی wp_nav_menu  برای شامل شدن شی فیلد سفارشی
  3. افزودن کلاس های سبک دهی css برای سبک دهی به مگا منو 

 

ساخت یک متا سفارشی برای منو.

برای ساخت یک متای سفارشی برای منو می توانید از آموزش های زیر استفاده کنید.

  1. استفاده از پلاگین Sweet Custom Menu Plugin.
  2. استفاده از پلاگین menu-item-custom-fields
  3. آموزش پلاگین custom-menu-wizard

نمایش متا فیلد  سفارشی در منو

برای افزودن فیلد های متا در منو ما ،برای  نمایش آن از طریق ()wp_nav_menu نیاز داریم.این حلقه خصیصه های منو را نمایش می دهد.

در ابتدا ما باید کلاس Walker_Nav_Menu را برای ساخت walker دلخواه خود که فیلد دلخواه ما را نمایش می دهد که در اینجا  subtitle می باشد ،   گسترش دهیم.کلاس دلخواه خود راMy_Walker می نامیم که آن را باید در functions.php قالب مربوطه خود  قرار می دهیم.ما تابع start_el را برای افزودن فیلد خود می سازیم.

class My_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $output .= $indent . '<li id="menu-item-'. $item->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 .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $item->subtitle;
        $item_output .= $args->after;

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

برای اطلاعات بیشتر : Walker  را مشاهده نمایید

بعد از آن  ما باید walker  دلخواه را در حلقه وردپرس قرار دهیم.کد زیر را در جایی که می خواهید منوی خود را نمایش دهید قرار دهید که معمولا در header.php قرار می گیرد

 

$walk = new My_Walker();
wp_nav_menu( array( 'theme_location' => 'primary','menu_class' => 'nav navbar-nav navbar-right', 'items_wrap' => '<ul>%3$s</ul>', 'walker' => $walk ) );

 

 

یا در تم فرزند خود از کد زیر استفاده کنید

function my_wp_nav_menu_args( $args = '' ) {
  $args['walker'] = new My_Walker();
  return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

 

حال می توانید به منو ها بروید و ببینید که متای سفارشی مربوطه در سایت شما ساخته شده است

 

 

حال باید برای آن کلاس های css را تعریف کنید ،style.css را باز کرده و کد زیر را در آن قرار دهید.

/* Mega Menu */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns,
.dropdown_fullwidth {
  margin:-3px auto;
  position:absolute;
  left:-999em; /* Hides the drop down */
  text-align:left;
  padding:10px 5px 10px 5px;
  border:1px solid #777777;
  border-top: 2px solid #960000;

  /* Gradient background */
  background:#FFF;

  /* Rounded Corners */
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
.dropdown_fullwidth{width: 80%;}

ul.navbar-nav > li:hover > .dropdown_1column,
ul.navbar-nav > li:hover >.dropdown_2columns,
ul.navbar-nav > li:hover > .dropdown_3columns,
ul.navbar-nav > li:hover >.dropdown_4columns,
ul.navbar-nav > li:hover >.dropdown_5columns {
  left:-1px;top:auto;
}

ul.navbar-nav > li:hover >.dropdown_fullwidth{
  position: fixed;
  left:10%;top:auto;
  z-index: 99;
}

 

در آخر شما فقط کافیست که کد مربوط به نمایش منو خود را بسازید و آن را در وارد نمایید.این یک مگا منوی ساده  و کاربردی بود که در این آموزش آن را بررسی کردیم.

 

تاریخ آخرین بروزرسانی : ۸ شهریور ۱۳۹۵
میلاد میلادی

باور هایت را که پرورش دهی به هرچیزی دست خواهی یافت.

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.