نحوه استفاده از Dashicon ها در وردپرس

Dashicons یک مجموعه اصلی داخلی از آیکون‌های فونت در وردپرس هستند که در وردپرس 3.8 زمانی که طراحی مجدد UI باطن عظیم را انجام دادند معرفی شدند و به طور پیش‌فرض برای پیوندهای مختلف در وردپرس استفاده می‌شوند. نوار مدیریت سمت چپ این آیکون‌ها در حالی که برای هسته ساخته شده‌اند، می‌توانند در پلاگین‌ها و تم‌های سفارشی شما استفاده شوند، نه تنها هنگام تعریف انواع پست سفارشی یا ایجاد پنل‌های مدیریت سفارشی، بلکه در صورت تمایل در طراحی تم جلویی. بهترین از همه، بسیار آسان است!

استفاده از Dashicons برای انواع پست سفارشی

هنگامی که یک نوع پست سفارشی جدید را در وردپرس ثبت می کنید، تنها کاری که باید انجام دهید این است که آرگومان menu_icon را برابر با نام کلاس CSS Dashicon که می خواهید استفاده کنید تنظیم کنید و این نماد به عنوان نمادی که در سمت چپ نام نوع پست سفارشی شما در پنل مدیریت وردپرس نمایش داده می شود. به سادگی از صفحه فرود Dashicons دیدن کنید و روی هر نمادی که می‌خواهید کلیک کنید. استفاده کنید و نام کلاس را در بالا در کنار نماد خواهید دید تا بتوانید آن را کپی و جایگذاری کنید.

مثال:

// ثبت نوع پست سفارشی جدید به نام Portfolio
register_post_type('portfolio', array(
	'عمومی' => درست است،
	'menu_icon' => 'dashicons-portfolio',
	'label' => __('Portfolio', 'Local')
);

عکس از صفحه:

در زیر یک اسکرین شات نشان می دهد که نماد Dashicon برای نوع پست نمونه کارها چگونه به نظر می رسد. نمی‌دانم به یاد دارید یا نه، اما قبل از Dashicons باید یک URL تصویر سفارشی برای نماد نوع پست خود تنظیم می‌کردید و زمانی که از افزونه‌های زیادی در سایت استفاده می‌کردید، اغلب اوقات آیکون‌ها مطابقت نداشتند و ادمین بسیار بد به نظر می‌رسید. اکنون نمادهای نوع پست شما با رابط کاربری پیش‌فرض WP مطابقت دارند و ظاهر خوبی دارند.

استفاده از Dashicon ها در طراحی تم Front-End

این روزها بسیاری از تم ها از نمادها برای قسمت جلویی برای مواردی مانند متای پست (تاریخ، دسته بندی، برچسب، نویسنده) و همچنین نمادهای سرصفحه مانند نمادهای کاربر، جستجو و فروشگاه استفاده می کنند. در حالی که پرکاربردترین و محبوب‌ترین نماد فونت موجود در اینجا FontAwesome است و برای اکثر پروژه‌ها عالی عمل می‌کند. همچنین یک مجموعه آیکون بسیار بزرگ است که شامل بسیاری از آیکون‌ها می‌شود که احتمالاً هرگز از آنها استفاده نمی‌کنید. می‌توانید از یک وب‌سایت تولیدکننده فونت مانند Fontello استفاده کنید تا فقط از نمادهای مورد نیاز خود یک شیوه نامه ایجاد کنید. اما جایگزین دیگر استفاده از Dashicons است که قبلاً در نصب وردپرس شما گنجانده شده است تنها کاری که باید انجام دهید این است که اسکریپت ها را در قسمت جلویی بارگذاری کنید.

به سادگی موارد زیر را به functions.php طرح زمینه خود اضافه کنید تا Dashicon ها را در قسمت جلویی بارگیری کنید (اگر تم موجود را سفارشی می کنید و طرح زمینه خود را نمی سازید، از طریق یک تم فرزند وارد کنید).

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

اکنون می توانید یک نماد را از طریق HTML وارد کنید:

به سادگی جایی که می گوید “menu” را به نمادی که می خواهید استفاده کنید تغییر دهید. این HTML را می توان در هر جایی از موضوع که می خواهید یک نماد نمایش داده شود، جایگذاری کنید. حتی می‌توانید با چسباندن HTML در قسمت «برچسب» آیتم منو، HTML را در آیتم‌های منوی خود وارد کنید.

چگونه یک کد کوتاه Dashicons ایجاد کنیم

یک راه حل دیگر برای استفاده از Dashicons در قسمت جلویی ایجاد یک کد کوتاه است که می توانید در هر نقطه از سایت از آن استفاده کنید. اگر سایتی را برای مشتری ایجاد می‌کنید و می‌خواهید آیکون‌ها را در سایت آسان‌تر کنید، این گزینه خوبی است تا مجبور نباشند با HTML درگیر شوند. در زیر نمونه ای از شکل ظاهری آن کد آمده است، به سادگی کد را به فایل functions.php خود (یا سایر فایل های غیرقابل بارگذاری شده توسط functions.php) اضافه کنید

add_shortcode( 'dashicon', function( $atts ) {
	$atts = shortcode_atts( آرایه(
		'icon' => 'منو'،
	), $atts, 'bartag' );
	if ( ! خالی ( $atts[ 'icon' ] ) ) {
		return '';
	}
});

استفاده از کد کوتاه:

[dashicon icon="chart-pie"]

توجه: کد کوتاه بالا فرض می‌کند که شما قبلاً مرحله قبلی را دنبال کرده‌اید و صفحه سبک Dashicons را در قسمت جلویی خود بارگیری کرده‌اید. اگر این کار را انجام نداده اید، می توانید به سادگی تابع “wp_enqueue_style” را از قطعه بالا مستقیماً به کد کوتاه اضافه کنید و شیوه نامه فقط زمانی بارگذاری می شود که از یک نماد استفاده شود. با این حال، توصیه می‌شود اسکریپت را به صورت سراسری بارگیری کنید، در غیر این صورت، شیوه نامه dashicons در پاورقی سایت شما بارگیری می‌شود، بنابراین نمادها پس از رندر شدن سایت شما ارائه می‌شوند و باعث ایجاد یک “فلش” خفیف می‌شوند.