چراحلقه وردپرس

تفاوت ما

محصولاتی با کیفیت و اختصاصی با فروش آسان و سریع و نصب و اجرای دقیق توسط پشتیبانان حلقه وردپرس با تخفیفات ویژه باعث خواهد شد حلقه وردپرس تفاوت ایجاد کند

پشتیبانی حرفه ای

با تغییر کادر پشتیبانی حلقه وردپرس ، پشتیبانی به سه روش مختلف از طریق تیکت با پاسخگویی کمتر از 24 ساعت و تلفنی و تلگرامی انجام می گیرد و نگرانی بابت خدمات محصولات نخواهید داشت

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

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

(آخرین بروزرسانی در : تیر ۱۱, ۱۳۹۴)

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

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

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

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

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

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

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

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

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

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

موفق باشید!

دیدگاه ها

پاسخ دهید

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