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

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

برای اینکار ابتدا باید در فایل فانکشن کد زیر را قرار دهید ؛

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

پس از قراردادن این کد انتهای فایل functions.php در پوسته خود آن را ذخیره کنید.

حال در بخش فهرست باید محل My Custom Menu اضافه شده باشد مانند در تصویر زیر ؛

 

اضافه شدن منو در قسمت فهرست وردپرس

اضافه شدن منو در قسمت فهرست وردپرس

 

فراخوانی فهرست وردپرس در محل مدنظر در پوسته

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

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

 

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

div.custom-menu-class ul {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}
div.custom-menu-class li {
    padding: 20px;
    display: inline;
}

و تمام حالا شما یک منوی داینامیک قابل کنترل از پیشخوان وردپرس در پوسته خود دارید.

امیدواریم این آموزش کوتاه مفید واقع شود.

موفق باشید

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

سلام خدمت همراهان عزیز حلقه وردپرس !

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

 

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

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

 

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

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

 

فعال کردن توضیحات بخش وردپرس

فعال کردن توضیحات بخش وردپرس

 

خب حالا در زیر هر منو هنگام ویرایش بخش توضیحات اضافه شده که میتونید از آن بخش برای نوشتن توضیحات استفاده کنید به شکل زیر ؛

توضیحات فعال شده ی فهرست

توضیحات فعال شده ی فهرست

 

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

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 );
	}
}

کدهای بالا را به فایل فانکشن functions.php قالب خود اضافه کنید.

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

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

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

<?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>';

یعنی Class انتخابی ما sub بوده است که باید به آن استایل دهیم.

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

امیدوارم آموزش مفیدی بوده باشد.

موفق و پیروز باشید./