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

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

سلام و عرض ادب و احترام خدمت شما دوستان عزیز
در ادامه آموزش های وردپرس در خدمت شما دوستان عزیز هستم با یکی دیگر از این آموزش های مهم در این زمینه.دوستان عزیز در وب سایت وردپرسی شما مطمئنا در مورد یک کسب و کار و یا یک مورد خاصی وب سایت داری میکنید که این زمینه کاری شما حتما دسته بندی هایی نیز دارد که شما موظف هستید این دسته بندی ها را در وب سایت وردپرسی خود اعمال کنید.هنگامی که این دسته بندی ها را اعمال میکنید در قسمت هدر صفحه اصلی وب سایت شما این دسته بندی های به نمایش در می اید اما در برخی از وب سایت ها ممکن است دیده باشید که این دسته بندی ها دارای آیکون هایی نیز هستند که در کنار آن ها قرار گرفته است و حالت خاص و زیبایی به ان ها داده است همانند تصویر زیر:

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

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

حال باید کد های مربوط به ساخت آیکون ها را بنویسیم که به صورت زیر است:

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