سلام دوستان عزیزم. آموزش امروز مدرسه وردپرس درباره روش افزودن آیکن به منو وردپرس هستش. چیزی که امروزه در خیلی از وب سایت ها میبینیم و چه بسا باعث زیباتر شدن وبسایت میشه.

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

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

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

توجه : در این آموزش از Font Awesome استفاده می کنیم

افزودن آیکن به منو وردپرس : مرحله 1

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

منوها در وردپرس

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

menu3

حالا یکی از کلاس های آیکن رو در اینجا وارد کنید. برای مثال : fa-home و بعد ذخیره کنید.

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

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

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

امیدوارم که به دردتون بخوره

موفق باشید

4 دیدگاه برای “افزودن آیکن به منو وردپرس

  • سیروس
    - ۲۷ آذر , ۱۳۹۳

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

  • میزبانی وب هاست سنتر
    - ۲۳ دی , ۱۳۹۳

    ممنون به خاطر مطلبتون عالی بود

  • طراحی وبسایت
    - ۲ اردیبهشت , ۱۳۹۵

    بسیار عالی بود، ممنون بابت به اشتراک گذاری

  • sina
    - ۲۱ شهریور , ۱۳۹۶

    خیلی ممنون از مطلب عالی
    واقعا مفید و کاربردی بود

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

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

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