امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

آموزش ایجاد و مدیریت فهرست‌ها در وردپرس

wp-navigation-menus-dtuts.net

خوب اول از همه به‌خاطر آپدیت نکردن سایت در این چند وقت، از بازدیدگنندگان محترم سایت عذرخواهی می‌کنم. انشاالله در آینده با بروزرسانی‌های بیشتر و مفیدتر در خدمت شما بازدیدکنندگان و علاقه‌مندان محترم سایت خواهیم بود.

در این آموزش به بخش فهرست‌های وردپرس خواهیم پرداخت و سعی خواهیم کرد که توضیحات کاملی از نحوه ایجاد و مدیریت آنها ارائه دهیم. همان‌طور که می‌دانید، وردپرس امکان ایجاد فهرست‌های دل‌خواه را از بخش ” نمایش > فهرست‌ها ” به مدیر سایت می‌دهد. اما چگونه می‌توانیم از این فهرست‌ها در قالب سایت وردپرسی‌مان استفاده کنیم؟

ابتدا باید پوسته سایت‌مان از این امکان وردپرس پشتیبانی کند و برای این کار باید در فایل functions.php پوسته این امکان را با استفاده از کد زیر ثبت کنیم:

add_theme_support( 'menus' );

قدم بعدی ثبت این فهرست(ها) در فایل توابع پوسته‌مان می‌باشد. اگر قصد ثبن تنها یک فهرست دل‌خواه را داشته باشیم، از کد زیر استفاده می‌کنیم:

register_nav_menu( $location, $description );

و اگر قصد دارید بیشتر از یک فهرست دل‌خواه ایجاد کنید، از کد زیر باید استفاده کنید:

register_nav_menus( array( $location => $description ) );

نکته: تابع register_nav_menu خود به‌تنهایی امکان پشتیبانی از فهرست‌ها را برای‌مان ایجاد می‌کند و نیازی نیست از کد اولی که پیش‌تر برای‌تان معرفی کردم استفاده نمایید.

پارامترهای این تابع :

location$ : که از نوع string می‌باشد و وارد کردن آن الزامی است، برای شناسایی موقعیت فهرست استفاده می‌شود و همانند نامک (slug) است. مقدار پیش‌فرض آن تهی است.

description$ : هم از نوع string بوده و وارد کردن آن الزامی می‌باشد و توضیحی برای نمایش در عنوان موقعیت فهرست در بخش “مکان‌های موجود در پوسته” می‌باشد. مقدار پیش‌فرض آن تهی است.

مثال:

register_nav_menus(
		array(
			'main-nav' => 'The Main Menu', 
			'footer-nav' => 'The Footer Menu' 
		)
	);

مرحله بعدی ایجاد تابعی برای نمایش فهرست دل‌خواه‌مان می‌باشد.برای این منظور از تابع زیر استفاده می‌کنیم:

wp_nav_menu( $args );

پارامترهای زیر را می‌توان در تابع فوق تنظیم کرد:

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);

wp_nav_menu( $defaults );

در کد بالا، پارامترها را با مقادیر پیش‌فرض‌شان مشاهده می‌کنید که می‌توان آنها را به مقادیر دل‌خواه خود تغییر داد. و اما این پارامترها چه کاری انجام می‌دهند و به چه دردری می‌خورند؟

theme_location$ :  از نوع string بوده و وارد کردن آن اختیاری است.

  • در اینجا موقعیت فهرست که قبلاً با تابع register_nav_menu ثبت کرده‌ایم را وارد می‌نماییم.

menu$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • در این پارامتر می‌توانیم مستقیماً نام فهرست را که از بخش ” نمایش > فهرست‌ها ” ساخته‌ایم، وارد نماییم. مقادیر id, slug, name را قبول می‌کند.

container$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • اگر می‌خواهید فهرست مورد نظر (ul) داخل یک div و یا nav قرار گیرد، از این گزینه می‌توانید استفاده کنید. اگر هم نمی‌خواهید قهرست‌تان داخل container قرار گیرد از مقدار false به شکل زیر می‌توانید استفاده نمایید:

‘container’ => false

container_class$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • از این پارامتر برای تعیین کلاس مورد نظر برای container فهرست استفاده می‌شود. مقدار پیش‌فرض:

menu-{menu slug}-container

container_id$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • از این پارامتر هم می‌توان برای تعیین id مورد نظر برای container استفاده کرد که مقدار پیش‌فرض آن تهی است.

menu_class$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • این پارامتر تعیین کننده نام کلاس برای ul فهرست می‌باشد. می‌توانید چندین نام را با قرار دادن یک فاصله (space) میان‌شان، برای ul فهرست‌تان تعیین نمایید.

مقدار پیش‌فرض : menu

menu_id$ : از نوع string بوده و وارد کردن آن اختیاری است. مشخص کننده آی‌دی برای ul فهرست‌تان. مقدار پیش‌فرض :

menu-{menu slug};

برای موارد تکراری مقدارهای menu-{menu slug}-1 و menu-{menu slug}-2 و … اختصاص داده می‌شود.

echo$ : از نوع boolean بوده و وارد کردن آن اختیاری است.

  • برای تعیین اینکه فهرست “چاپ شود” و یا اینکه “برگردانده (return) شود”؟ 
  • برای return کردن از مقدار 0 استفاده کنید. 

مقدار پیش‌فرض: true

fallback_cb$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • این پارامتر یک نام تابع را دربر می‌گیرد که این تابع را در زمان‌هایی که فهرست ما وجود ندارد، فراخوانی می‌کند. در صورت استفاده از این پارامتر، باید تابع مورد نظرمان را نیز تعریف کنیم.

مقدار پیش‌فرض : wp_page_menu

before$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • این پارامتر تعیین‌کننده textی است که می‌خواهید قبل از تگ <a> لینک‌های فهرست‌تان چاپ شود. مقدار پیش‌فرض: تهی

after$ : از نوع string بوده و وارد کردن آن اختیاری است. تعیین‌کننده text چاپی بعد از تگ </a> لینک‌های فهرست.

link_before$ : از نوع string بوده و وارد کردن آن اختیاری است. تعیین‌کننده text چاپی قبل از text لینک‌ها.

link_after$ : از نوع string بوده و وارد کردن آن اختیاری است. تعیین‌کننده text چاپی بعد از text لینک‌ها.

items_wrap$ : از نوع string بوده و وارد کردن آن اختیاری است.

  • این پارامتر شامل ترکیبی از پارامترهای دیگر است که توسط شماره مشخص شده‌اند.s$1% شامل مقدار پارامتر menu_id می‌باشد، %2$s شامل مقدار پارامتر menu_class و %3$s شامل مقدار پارامتر آیتم‌های لیست می‌باشد. درصورتی که یکی از این شماره‌ها در ترکیب این دستور قرار نگیرد، آن مورد از ساختار فهرست حذف خواهد شد. مقدار پیش‌فرض :

<ul id=”%1$s”>%3$s</ul>

depth$ : از نوع integer بوده و وارد کردن آن اختیاری است.

  • این پارامتر شامل تعداد مراحلی است که آیتم‌های فهرست می‌توانند به‌عنوان زیرمنو بصورت سلسله مراتبی نمایش یابند. مقدار 0 به معنای همه مراحل موجود می‌باشد و مقدار 1- لینک‌های فهرست را در ;g مراحل موجود بصورت یک دست زیر هم نمایش می‌دهد. مقدار پیش‌فرض : 0.

walker$ : از نوع object بوده و وارد کردن آن اختیاری است.

  • از این پارامتر برای مدیریت زیرمنوهای فهرست می‌توان استفاده کرد. جهت استفاده از این پارمتر، باید قبلاً یک فایل php برای تابع walkerمان ساخته و تابع را در آن تعریف نمایید. این فایل را بایستی در فایل functions.php پوسته include نمایید و سپس می‌توانید آن را بصورت زیر در پارامتر بالا تنظیم کنید:
'walker' => new Bootstrapwp_Walker_Nav_Menu()

مقدار پیش‌فرض : new Walker_Nav_Menu

در زیر مثالی از یک تابع walker را برای‌تان معرفی می‌کنم که کاری از Rachel Baker می‌باشد.

     /**
     * class Bootstrap_Walker_Nav_Menu()
     *
     * Extending Walker_Nav_Menu to modify class assigned to submenu ul element
     *
     * @author Rachel Baker
     **/
class Bootstrapwp_Walker_Nav_Menu extends Walker_Nav_Menu {

	function __construct() {

	}
	  function start_lvl(&$output, $depth) {

    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }

}

این فایل را به صورت زیر می‌توانید در فایل توابع پوسته include کنید :

include 'includes/class-bootstrapwp_walker_nav_menu.php';

با فرض اینکه فایل را در پوشه‌ای با نام includes دخیره کرده‌اید.

در فایل بالا کلاسی با نام dropdown-menu به لیست‌ زیرین اختصاص می‌دهد. که می‌تواند در استایل دادن آنها کمک کند.

اکنون با در نظر گرفتن مواردی که در بالا یاد گرفتیم، بگذارید یا یک مثال شما را در جهت درک بهتر موضوع راهنمایی کنم:

register_nav_menus(
		array(
			'main-nav' => 'The Main Menu', 
			'footer-nav' => 'The Footer Menu' 
		)
	);

function dtuts_main_nav() {
	// display the wp3 menu if available
    wp_nav_menu(array(
    	'container_id' => 'access',
    	'container_class' => 'wrap clearfix',
    	'menu' => 'The Main Menu',  					// nav name
    	'menu_id' => 'nav',
    	'theme_location' => 'main-nav',                 // where it's located in the theme
    	'before' => '',                                 // before the menu
        'after' => '',                                  // after the menu
        'link_before' => '',                            // before each link
        'link_after' => '',                             // after each link
        'depth' => 0,                                   // limit the depth of the nav
    	'fallback_cb' => 'dtuts_main_nav_fallback'      // fallback function
	));
} /* end dtuts main nav */

function dtuts_footer_nav() {
	// display the wp3 menu if available
    wp_nav_menu(array(
    	'container_class' => 'menu footer-nav clearfix',        // class of container (should you choose to use it)
    	'container_id' => 'footer-nav',
    	'menu' => 'The Footer Menu',  					// nav name
    	'menu_id' => 'nav2',							// adding custom nav class
    	'theme_location' => 'footer-nav',               // where it's located in the theme
    	'before' => '',                                 // before the menu
        'after' => '',                                  // after the menu
        'link_before' => '',                            // before each link
        'link_after' => '',                             // after each link
        'depth' => 0,                                   // limit the depth of the nav
    	'fallback_cb' => 'dtuts_footer_nav_fallback'      // fallback function
	));
} /* end dtuts footer nav */

// this is the fallback for header main menu
function dtuts_main_nav_fallback() {
	wp_page_menu( array(
		'show_home' => true,
    	'menu_id' => 'nav main-nav clearfix',      // adding custom nav class
		'include'     => '',
		'exclude'     => '',
		'echo'        => true,
        'link_before' => '',                            // before each link
        'link_after' => ''                             // after each link
	) );
}

// this is the fallback for footer menu
function dtuts_footer_nav_fallback() {
	wp_page_menu( array(
		'show_home' => true,
    	'menu_class' => 'nav footer-nav clearfix',      // adding custom nav class
		'include'     => '',
		'exclude'     => '',
		'echo'        => true,
        'link_before' => '',                            // before each link
        'link_after' => ''                             // after each link
	) );
}

در کد بالا فهرستی دل‌خواه را در یک تابع با نام dtuts_main_nav تعریف کردیم و فهرستی دیگر را در تابعی دیگر با نام dtuts_footer_nav تعریف کردیم. حال برای نمایش آن فقط کافیست این تابع را بصورت زیر در مکان دل‌خواه پوسته‌مان قرار دهیم:

<?php dtuts_main_nav(); ?>

و برای دیگری :

<?php dtuts_footer_nav(); ?>

سپس در بخش ” نمایش > فهرست‌ها ” یک فهرست جدید ایجاد می‌کنیم و آیتم‌های دل‌خواه‌مان را به آن اضافه کرده و ذخیره می‌کنیم و بعد در قسمت “مکان‌های موجود در پوسته” فهرست ساخته شده را انتخاب کرده و ذخیره می‌نماییم.

امیدوارم این آموزش مورد قبول‌تان واقع شده باشد و استفاده لازم را برده باشید.

درباره امین بهشتی

یک ایرانی ترک زبان که علاقه زیادی به طرّاحی وِب و گرافیک دارد!
در این سایت سعی می‌کنم مطالب جالب، مفید و کاربردی را در جهت آموزش به اشتراک بگذارم!
امیدوارم لحظات خوشی را در سایت سپری نمایید و مطالب سایت مورد استفاده شما قرار بگیرد.
سپاس

    • با سلام،
      این کار را براحتی بصورت کاملاً پویا به روش زیر می‌توانید انجام دهید:
      در بخش “نمایش->فهرست‌ها” بالای صفحه سمت چپ، “تنظمیات صفحه” را اگر کلیک کنید باز شه، یک بخش بنام “نمایش خصوصیات پیشرفته فهرست” وجود داره که اگر تیک گزینه “هدف پیوند” را بزنید، به تنظیمات آیتم‌هایی که به فهرست‌تان اضافه کردید، یک گزینه بنام “نمایش پیوند در پنجره/زبانه تازه” اضافه خواهد کرد. به همین راحتی!

  1. سلام
    خسته نباشید
    واقعا که قالب بسیار زیبا و خوشکلی دارید و هم بسیار زیبا اموزش داده شده
    لطف میکنید
    یه سوال آیا این اموزش قابلیت on mouse hover هم هست
    منظورم اینه با حرکت موس روی منو فعال بشه و با رد شدنش خود بخود غیر فعال بشه
    ممنون میشم راهنمایی کنید که اگر هست من هم داخل قالبم از این منو استفاده کنم
    با تشکر وارزوی توفیق
    موفق باشید

    • با سلام و تشکر از لطف و محبت‌تان،

      این آموزش در واقع نحوه ایجاد و مدیریت منوها هست و موردی که فرمودید مربوط میشه به استایل‌دهی منوها.

      شما بعد از اینکه منوهاتون را ایجاد کردید می‌توانید با استایل‌دهی‌های مختلف، نحوه نمایش آنها را تنظیم کنید.

      در گوگل یک جستجویی بکنید، آموزش‌های خوبی فکر کنم بتونید پیدا کنید در این مورد.

      سپاس

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.