سلام دوستان عزیزم. آموزش امروز مدرسه وردپرس درباره روش افزودن آیکن به منو وردپرس هستش. چیزی که امروزه در خیلی از وب سایت ها میبینیم و چه بسا باعث زیباتر شدن وبسایت میشه.
منو وردپرس دارای ویژگی به نام توضیحات هستش که به صورت پیشفرض غیرفعال میباشد. حالا در این قسمت روش فعال سازی توضیحات منو وردپرس و افزودن آیکن به منو وردپرس رو میگم.
اگر پوسته شما از ویژگی فهرست ها پشتیبانی نمی کند به مقاله فهرست ها در وردپرس مراجعه کنید.
توجه : در این آموزش از Font Awesome استفاده می کنیم
افزودن آیکن به منو وردپرس : مرحله 1
به منو فهرست ها رفته و از بخش تنظیمات صفحه گزینه توضیح را فعال کنید
بعد خواهید دید که فیلد جدیدی به نام توضیح به منوها اضافه می شود.
حالا یکی از کلاس های آیکن رو در اینجا وارد کنید. برای مثال : 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 آشنا باشید
آموزش امروز مدرسه وردپرس درباره ” افزودن آیکن به منو وردپرس ” به پایان رسید
امیدوارم که به دردتون بخوره
موفق باشید
خیلی خوب میشد که بگید فونت ها رو از کجا بگیریم تو کدوم قسمت از سایت و با چجوری اضافه کنیم.
بازم ممنون
ممنون به خاطر مطلبتون عالی بود
بسیار عالی بود، ممنون بابت به اشتراک گذاری
خیلی ممنون از مطلب عالی
واقعا مفید و کاربردی بود