با سلام خدمت شما دوستان مدرسه وردپرس، با آموزش افزودن توضیحات به فهرست وردپرس در خدمت شما هستیم.

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

افزودن توضیحات به فهرست وردپرس

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

قدم اول : فعال کردن ویژگی توضیحات فهرست

برای شروع کار به مسیر پیشخوان وردپرس > نمایش > فهرست ها بروید. و در بالای صفحه قسمت تنظیمات صفحه ویژگی توضیح رو فعال کنید.

فعال کردن ویژگی توضیحات فهرست

خب حالا باید توضیحات خودتون رو به آیتم های فهرست خودتون اضافه کنید.

افزودن توضیحات به آیتم های فهرست

 

خب کار شما با قسمت پیشخوان وردپرس تموم شد! حالا مرحله اضافه کردن کدها به پوسته شروع میشه.

قدم دوم : اضافه کردن کلاس ها و توابع

برای اضافه کردن کدها (توابع و کلاس ها) به پوسته خودتون به مسیر پوسته رفته و فایل functions.php رو باز کنید و کدهای زیر رو به این فایل اضافه کنید.

class Menu_With_Description 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 .= '<br /><span class="sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

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

خب این مرحله هم به پایان رسید. به همین راحتی!

قدم سوم : نمایش توضیحات در پوسته

برای نمایش توضیحات در پوسته قطعه کد زیر رو در هر کجا از پوسته که دوست دارید قرار بدهید.

<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

این مرحله ام تموم شد و فقط مرحل آخر باقی مونده!

قدم آخر : نحوه نمایش توضیحات فهرست در پوسته

این قسمت از کلاس و توابع بالا نحوه نمایش خروجی توضیحات در فهرست را مشخص میکند.

$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

با استفاده از قطعه کد Css زیر میتوانید استایل دلخواه خودتون رو برای توضیحات فهرست اعمال کنید.

.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

خب تبریک میگم شما توانستید ویژگی توضیحات فهرست رو به پوسته خودتون اضافه کتید.

نتیجه کار شما در آخر به شکل های زیر می باشد:


menudescriptions

ممنونم که امروز هم با ما بودید. امیدوارم از آموزش افزودن توضیحات به فهرست وردپرس لذت برده باشید.

دیدگاه خود را بیان کنید

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

-- بارگیری کد امنیتی --