http://wpmen.ir/

یکی از ارکان اصلی هر سایت منو های آن سایت می باشد.در وردپرس منو ها به صورت داینامیک می باشد به صورتی که کاربران با قراردادن لینک های مورد نظر منو های خود را می سازند.هر سایتی ممکن است منوهای منحصر به فرد خود را داشته باشد با طراحی های خاص.بعضی منو ها مگا منو(mega menu) و بعضی به صورت ساده می باشند.

اگر بخواهیم استایل منو ها را تغییر داده و به سبک دلخواه در بیاوریم باید کلاس های پیشفرضی که وردپرس به منو ها داده را بدانیم.در این قسمت از آموزش وردپرس  نحوه نمایش منو ها و نحوه استایل دهی آن ها را نیز نمایش می دهیم.اما بهتر است از یک طراح وب نیز در این باره کمک گرفته تا با تجربیاتی که دارد راحت تر این کار انجام شود.

ابتدا باید کد زیر را در functions.php قرار داده  تا منوها  اگر در پوسته ( theme ) وجود نداشته باشد فعال شوند.برای تم های پیش فرض و وردپرسی شده اکثرا این گزینه به صورت پیشفرض قرار دارد و نیاز به این مرحله نمی باشد  ولی اگر در قسمت نمایش گزینه فهرست ها وجود نداشت این کد را در functions.php قرار می دهیم.

 

//defenition of top mnenu
function register_top_menu(){
	register_nav_menus(
		array(
			'top_menu' =>__('منوهای بالا')
			)
		);
}
add_action('init','register_top_menu');

 چیزی که باید دانست  اینست که وردپرس منو ها را به صورت نامرتب شده (عدم دلخواه ) لیست می کند .با کد زیر،  منو ها را نمایش  در جایی که می خواهیم نمایش می دهیم.

<?php wp_nav_menu(); ?>

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

<?php wp_nav_menu(array( 'sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'container_id' => 'header', 'theme_location'  => 'header') ); ?>

کد بالا مانند کد html زیر عمل می کند

<div id="header" class="main-menu"><ul id="menu-categories" class="menu">

 برای اینکه استایل های مان را روی منو ها بگذاریم کلاس های زیر را در فایل css خود قرار می دهیم

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

اگر منو های ما hover هم داشته باشند و یا در کلاسی باشند از کد زیر در css استفاده می کنیم

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

یک نمونه دیگر از نمایش  منو در صفحه مربوطه تان

<menu class="menu__content">
   <?php 
   wp_nav_menu(array(
    'theme_location'  => 'top_menu',
    'menu'            => '',
    'container'       => 'false',
    'container_class' => false,
    'container_id'    => '',
    'menu_class'      => '',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '%3$s',        
    'depth'           => 0,
    )); 
    ?>
</menu>

آموزش وردپرس

منبع :‌ مردان وردپرس

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

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

ارسال نظر

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

Time limit is exhausted. Please reload CAPTCHA.