چگونه از فونت آیکون های وردپرس(Dashicons) استفاده کنیم؟

وردپرس هم مشابه مجموعه های Font Awesome ،Themify و IcoMoon آیکون های اختصاصی خود را دارد که می توانید برخی از آنها را در منوهای پنل مدیریتی(نوشته ها، دیدگاه ها، رسانه) مشاهده کنید، این آیکون ها از نسخه ۳٫۸ و با عنوان دَش آیکونز(Dashicons) به وردپرس اضافه شدند.

آیکون های فوق به صورت پیش فرض فقط در بخش مدیریتی سایت(Back-end) در دسترس می باشند، اما با چند خط کد ساده می توانید از آنها در قالب وب سایت تان(Front-end) استفاده نمائید. هر چند آیکون های وردپرس گستردگی و تنوع سایر مجموعه ها را ندارد اما ممکن است در برخی سناریوها نیاز شما را برطرف کند.

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

۱- Dashicons و پست تایپ های سفارشی(Custom Post Types)

برای ایجاد یک پست تایپ سفارشی کافی است تابع register_post_type را فراخوانی کرده و پارامترهای آن را ست کنید، در این مرحله تنها کاری که لازم است انجام دهید مقداردهی menu_icon با نام کلاس CSS آیکون مدنظرتان است.

به عنوان مثال در نمونه کد زیر برای پست تایپ سفارشی سوالات متداول(FAQ) از فونت آیکون dashicons-editor-help استفاده کردیم.

function register_modiredev_faq_post_type()
{

    $labels = array(
        'name' => __( 'سوالات متداول', 'modiredev' ),
        'singular_name' => __( 'سوالات متداول', 'modiredev' ),
        'add_new' => __( 'افزودن سوال', 'modiredev' ),
        'add_new_item' => __( 'سوال جدید', 'modiredev' ),
        'edit_item' => __( 'ویرایش سوال', 'modiredev' ),
        'all_items' => __( 'لیست سوالات متداول', 'modiredev' )
    );

    $args = array(
        'label' => __( 'سوالات متداول', 'modiredev' ),
        'description' => __( 'سوالات متداول', 'modiredev' ),
        'public' => true,
        'labels' => $labels,
        'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail' ),
        'menu_position' => 20,
        'menu_icon' => 'dashicons-editor-help'
    );

    register_post_type( 'faq', $args );
}

add_action( 'init', 'register_modiredev_faq_post_type' );

 

برای انتخاب آیکون دلخواهتان کافی است به لیست آیکون های Dashicons مراجعه کرده و روی آیکون مدنظرتان کلیک نمائید.

انتخاب فونت آیکون dashicons

 

سپس نام آن را مطابق تصویر زیر کپی کرده و در تابع register_post_type استفاده نمائید.

کپی نام کلاس فونت آیکون dashicons

 

خروجی نهایی بدین صورت خواهد بود.

استفاده از dashicons در پست تایپ سفارشی

 

۲- Dashicons و صفحات مدیریتی(Menu Page)

همانطور که ملاحظه کردید تابع register_post_type برای هر پست تایپ منوی موردنیاز آن را به صورت خودکار تولید می کند، اما این امکان وجود دارد که با تابع add_menu_page منوهای مختلفی را مستقیما به پنل مدیریتی وردپرس اضافه نمائید، بسیاری از افزونه ها و قالب ها از این راهکار برای افزودن صفحه تنظیمات، صفحه لایسنس و … استفاده می کنند.

به طور مثال در نمونه کد زیر یک صفحه تنظیمات برای قالب وب سایت ایجاد کردیم، همچنین آیکون dashicons-admin-generic به عنوان آرگومان ششم تابع add_menu_page ارسال شده است.

function add_modiredev_options_menu()
{
    add_menu_page(
        __( 'تنظیمات قالب', 'modiredev' ),
        __( 'تنظیمات قالب', 'modiredev' ),
        'edit_posts',
        'modiredev-options',
        'render_modiredev_options_page',
        'dashicons-admin-generic',
        '۲۶٫۱'
        );
}

add_action( 'admin_menu', 'add_modiredev_options_menu' );

function render_modiredev_options_page(){
   echo '<h1>صفحه تنظیمات قالب</h1>';	
}

 

نتیجه کار به صورت زیر خواهد بود.

منوهای وردپرس و dashicons

 

۳- dashicons و قالب وب سایت

قابل انکار نیست که فونت آیکون ها مزایای بسیاری همچون کیفیت بالا، حجم پایین و استایل دهی راحتر را به همراه دارند، به همین خاطر بسیاری از قالب ها در بخش های مختلف خود (منوها، فرم های جستجو و جزئیات پست ها – Post Meta) به جای تصاویر از فونت آیکون ها استفاده می کنند.

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

نمایش فونت آیکون dashicons در قالب وب سایت

 

مطمئنا در یک پروژه وب تعداد محدودی از این آیکون ها مورد استفاده قرار خواهد گرفت، حال آنکه مجموعه های این چنینی آیکون های متنوع و زیادی دارند که نیازی به بارگذاری همه آنها نیست، در چنین شرایطی می توانید به کمک ابزار Fontello فقط آیکون های لازم را انتخاب کرده و فایل نهایی را در قالب CSS به وب سایت تان اضافه نمائید.

راه حل دیگر استفاده از Dashicons است، آیکون هایی که به صورت پیش فرض در وردپرس موجود هستند و تنها کاری که باید انجام دهید فعال سازی آنها در بخش Front سایت است، برای این منظور کافی است کدهای زیر به فایل functions.php اضافه کنید.

function modiredev_load_dashicons_font() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'modiredev_load_dashicons_font' );

 

حالا می توانید از کلاس dashicons به همراه کلاس آیکون (در این مثال dashicons-format-status) به صورت زیر در صفحات، منوها و بخش های مختلف وب سایت تان استفاده کنید.

<span class="dashicons dashicons-format-status"></span>

 

اگر در لیست آیکون ها بر روی گزینه Copy HTML کلیک کنید کد HTML به صورت خودکار تولید خواهد شد.

کپی HTML فونت آیکون dashicons

 

همچنین با انتخاب گزینه Copy CSS می توانید از کد Unicode آیکون به صورت زیر استفاده کنید.

.entry-author:before {
  font-family: "dashicons";
  content: "\f130";
}

ایجاد شورتکد برای Dashicons

روش دیگر فراخوانی Dashicons ایجاد یک شورتکد(Shortcode) اختصاصی است، بدین ترتیب شما می توانید در هر جایی(نوشته ها، صفحات، کدهای PHP) از آیکون های مدنظرتان استفاده کنید.

برای این منظور لازم است کدهای زیر را در فایل functions.php قرار دهید.

function modiredev_dashicons_shortcode( $atts )
{
    $atts = shortcode_atts(array(
        'icon' => 'admin-generic',
    ), $atts, 'dashicon');
    if ( ! empty( $atts['icon'] ) ) {
        return '<span class="dashicons dashicons-' . esc_attr( $atts['icon'] ) . '"></span>';
    }
}

add_shortcode( 'dashicon', 'modiredev_dashicons_shortcode' );

 

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

[dashicon icon="format-status"]

 

جمع بندی

Dashicons یک راه حل سریع، دم دستی و بهینه برای استفاده از فونت آیکون ها است، هر چند که تعداد این آیکون ها نسبت به سایر مجموعه ها کمتر است اما در ورژن های مختلف وردپرس بر تعداد آنها افزوده می شود، در وردپرس ۵٫۲ تقریبا ۱۳ آیکون جدید وارد این مجموعه شده است که می تواند تا حدودی نیاز شما را مرتفع کند.

نظرات و سوالات کاربران

پاسخی بگذارید

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