اضافه کردن آیکون به منوی وردپرس
اضافه کردن آیکون به منوی وردپرس

اضافه کردن آیکون به منوی وردپرس

امروزه در خیلی از وب سایت ها میبینیم که در کنار منوی سایت، عکس هایی کوچک و جذاب قرار داده اند که چه بسا باعث زیباتر شدن وبسایت شده است.

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

1-قدم اول

اضافه کردن آیکون به منوی وردپرس
اضافه کردن آیکون به منوی وردپرس

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

 

2-قدم دوم

اضافه کردن آیکون به منوی وردپرس
اضافه کردن آیکون به منوی وردپرس

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

 

3-قدم سوم

سایت رو بارگذاری مجدد کنید. تغییری ایجاد نشد؟ باید هم اینطور باشه چرا که بخش توضیح منو به صورت پیشفرض غیرفعال هستش و ما خودمون باید فعالش کنیم. برای این کار یک کلاس تعریف می کنیم. کد زیر را در 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 .= ‘<i class=”fa ‘.$item->description.'”></i>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‘</a>’;
$item_output .= $args->after;

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

4- قدم چهارم
حالا فایل header.php پوسته را باز کرده و جایی که منو فراخوان شده است کد زیر را قرار دهید:
<?php $walker = new Menu_With_Description; ?>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $walker ) ); ?>

5-قدم پنجم

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

اگر مشکلی و یا خطایی دیدید دوباره آموزش رو از ابتدا مطالعه کنید.

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

تیم آقای وردپرس

تیم تولید محتوا و پشتیبانی سایت آقای وردپرس

دیدگاهتان را بنویسید