خانه / آموزش وردپرس / اضافه کردن آیکون به منوی وردپرس
اضافه کردن آیکون به منوی وردپرس
اضافه کردن آیکون به منوی وردپرس

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

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

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

۱-قدم اول

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

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

 

۲-قدم دوم

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

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

 

۳-قدم سوم

سایت رو بارگذاری مجدد کنید. تغییری ایجاد نشد؟ باید هم اینطور باشه چرا که بخش توضیح منو به صورت پیشفرض غیرفعال هستش و ما خودمون باید فعالش کنیم. برای این کار یک کلاس تعریف می کنیم. کد زیر را در 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 );
}
}

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

۵-قدم پنجم

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

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

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

درباره سید حامد حسینی

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

بیشتر بخوانید

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

در این آموزش قصد داریم تا به شما کاربران گرامی آموزش دهیم ، که چطور …

پاسخ دهید

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

دوره رایگان طراحی سایت از صفر تا صد

دوره رایگان طراحی سایت از صفر تا صد

برای شرکت در دوره رایگان آموزش طراحی قالب وردپرس ( طراحی سایت ) ایمیل خود را وارد کنید

اشتراک شما با موفقیت انجام شد ( ایمیل خود را چک کنید)