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

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

Want create site? Find Free WordPress Themes and plugins.

وجود یک لوگو یا آیکون مرتبط با هر برگه در کنار نوشته‌ی آن در منوی وردپرس، یکی از جذاب‌ترین قسمت‌های یک سایت به شمار می‌رود که موجب کیفیت و زیبایی قالب وردپرس می‌شود. در این پست از وب‌سایت حلقه وردپرس قصد داریم روش اضافه کردن آیکون به منوی وردپرس را بدون استفاده از هرگونه افزونه و با اضافه کردن چند کد به فایل‌های قالب را شما آموزش دهیم. با ما همراه باشید…

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

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

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

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

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

پس از آن فیلد جدید‌ی تحت عنولن توضیح به اطلاعات منوها اضافهمی‌شود.

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

در قدم بعدی یکی از کلاس‌های آیکون‌های در نظر گرفته شده را در این فیلد وارد کنید و سپس اطلاعات را ذخیره کنید. (برای مثال 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 قالب وارد کنید.

در اینجا افزودن تصاویر آیکون به منو وردپرس از وب سایت حلقه وردپرس به پایان می‌رسد.

موفق باشید!

Did you find apk for android? You can find new Free Android Games and apps.

پاسخ دهید

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