قرار دادن آیکون برای ابزارک ها توسط کاربران

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

در این مطلب قصد دارم روشی ابداعی و بسیار ساده را برای این موضوع به شما آموزش دهم.

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

 

function wpsrc_load_dashicons(){
    wp_enqueue_script('dashicons');
}
add_action('wp_enqueue_scripts', 'wpsrc_load_dashicons');

خوب تا به اینجا وردپرس، دش آیکون را در پوسته ما لود خواهد کرد، از این آیکون ها می توانید در بخش های مختلف پوسته تان استفاده نمایید.

حالا قطعه کد زیر را هم به فایل فانکشنتان اضافه کنید:

//Making Widgets Iconable !
add_action('in_widget_form', 'Plugins_form_hook');
/**
 * Hooks to the plugins form and adds a custome field to them 
 */
function plugins_form_hook($widget_instance){
    $widget_options_all = get_option($widget_instance->option_name);
    $settings = '';
    if(isset($widget_instance->number) && isset($widget_options_all[$widget_instance->number]['wpsrcIcon']) ){
        $settings = $widget_options_all[$widget_instance->number]['wpsrcIcon'];
    }
?>
<label for="<?php echo $widget_instance->get_field_id('wpsrcIcon'); ?>">نام کامل آیکون و افکت: </label>
<input style="direction:ltr;" type="text" id="<?php echo $widget_instance->get_field_id('wpsrcIcon'); ?>" name="<?php echo $widget_instance->get_field_name('wpsrcIcon'); ?>" value="<?php echo $settings; ?>">
<?php
}

add_filter( 'widget_update_callback', 'wpsrc_widgets_update_callback', null, 4 );
/**
 * Saves the value of choosen icon
 */
function wpsrc_widgets_update_callback($instance, $new_instance, $old_instance, $instanceObj){
    $instance['wpsrcIcon'] = ( ! empty( $new_instance['wpsrcIcon'] ) ) ? $new_instance['wpsrcIcon']  : '';
    return $instance;
}

add_filter('widget_display_callback', 'wpsrc_widgets_display_hook', null, 3);
/**
 * Hooks to the plugins title and outputs the selected icon
 */
function wpsrc_widgets_display_hook($instance, $widget_class, $args){
    if (!isset($instance['wpsrcIcon'])) {
        return $instance;
    }

    $instance['title'] =  '<span class="dashicons' . $instance['wpsrcIcon'] . '"></span>' . $instance['title'];
    remove_filter( 'widget_title', 'esc_html' );
    return $instance;
}

// /Making Widgets Iconable !

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

خوب حالا به پنل ادمین رفته و ابزارکی در یکی از سایدبارهایتان قرار دهید، اگر همه چیز را به درستی انجام داده باشید، باید به همه ابزارک ها فیلدی اضافه شده باشد که در جلوی آن یک فیلد متنی قرار دارد، با نوشتن عبارت dashicons-format-chat
در فیلد متنی، و مشاهده وبسایتتان خواهید دید که آیکون مورد نظر با استایلی اولیه در عنوان ابزارکتان نمایش داده خواهد شد.

لیست دیگر آیکون های مجموعه dashicons را می توانید در صفحه زیر مشاهده نمایید:
https://developer.wordpress.org/resource/dashicons/

با کلیک بر روی هر آیکون نام آن را می توانید در جلوی تصویر بزرگ آن مشاهده نمایید.

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

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

برای طراحان: دقت کنید که این روش به آیکون و آیکون گذاری محدود نیست و بسیار کنترل بیشتری می توان به کاربران در پنل ادمین ارائه کرد! مثل امکان انتخاب رنگ پس زمینه ابزارک و غیره …

این مطلب اختصاصی وردپرس سورس بوده و راه کار ارائه شده نیز کاملا اختصاصی می باشد.

موفق باشید.

اگر مفید بود به اشتراک بگذارید ! کلوب فیس نما گوگل پلاس

جوابی بنویسید

ایمیل شما نشر نخواهد شدخانه های ضروری نشانه گذاری شده است. *

*