پوسته ووکامرس ثلث

پوسته ووکامرس ایرانی ثلث

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

مشاهده جزئیات بیشتر
پوسته ووکامرس ثلث

پوسته ووکامرس ایرانی ثلث

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

مشاهده جزئیات بیشتر
تعمیرگاه وردپرس

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

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

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

به اشتراک گذاری مطلب

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

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

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

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

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

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

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

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

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

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

موفق باشید!

دیدگاه ها

پاسخ دهید

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