Dashicons وردپرس چیه؟ چطوری از اون استفاده کنیم؟

وردپرس قدرت برقراری ارتباط سریع با مخاطبان رو به وسیله برقراری ارتباط بصری قوی داره، اصلاً به خاطر همین هم هست که از آیکون‌ها در همه جا از جمله وبسایت‌ های وردپرس خیلی استفاده میشه و یه جورایی باعث بهینه سازی سایت شما میشه.

وقتی شما یه تم رو می‌بینین و ازش خوشتون میاد، اون رو نصب می‌کنین و تا چند ماه هم ازش لذت می‌برین اما خب بالاخره کم کم براتون خسته کننده میشه و ازش زده می‌شین و قسمت سخت ماجرا تازه از جایی شروع میشه که پیدا کردن یه تم جدید خیلی کار سختیه و کلی زمان می‌بره! اینجاست که خدا خدا می‌کنین تا ای کاش یه راهی وجود داشت و اون چیزی که مد نظرتون بود رو بهتون نشون می‌داد!

قبل از این که بخواین غر بزنین و از زمین و زمان ناراحت بشین، بهتره با dashicons وردپرس که می‌تونه زیبایی رو مثل رنگ در نقاشی، به سایت وردپرس شما اضافه و به برجستگی شما کمک کنه، آشنا بشین. استفاده از این مورد همچنین، شما رو از تلاش اضافی و شلوغ کردن سایت خودتون با تصاویر غیرضروری که سرعت صفحه رو کم می‌کنن، نجات میده.

بنابراین، بیایین یه نگاهی به Dashicons وردپرس و نحوه استفاده موثر از اونها در وبسایت بندازیم.

dashicons وردپرس چیه؟

Dashicons وردپرس ، فونت‌های نماد رسمی WordPress است که سال‌ها پیش با نسخه 3.8 معرفی شدن. اگه از این فونت ها در وبسایت خودتون استفاده می‌کنین سراغ یه روش جالب و عالی رفتین. اونها پرونده‌های با کیفیت عالی SVG هستن که می‌تونین به راحتی در هر اندازه‌ای که میلتون می‌کشه و بدون پیکسل سازی، مقیاس بندی کنین.

از اونجایی که اونها از پشتیبانی بومی وردپرس برخوردار هستن (طبیعیه دیگه! چون که توسط خود وردپرس ایجاد شدن!) می‌تونین مستقیماً بدون بارگذاری اسکریپت‌های اضافی از اونها استفاده کنین. حدود 350 فونت آیکون وجود داره که می‌تونین اونها رو در منابع رسمی توسعه دهندگان وردپرس پیدا کنین.

اونها این آیکون ها رو بر اساس موضوع دسته بندی کردن، به علاوه شما می‌تونین یه قسمت جستجو پویا هم مشاهده کنین که بهتون امکان میده آیکون های موجود رو فیلتر کنین.

می‌تونین از dashicons وردپرس برای بالا بردن سرعت سایت خودتون در موارد زیر استفاده کنین:

• داشبورد وردپرس
• منوهای پیمایش
• صفحات و پست‌ها
• فراداده
• عناصر ویرایشگر
• پلاگین‌ها و تم‌های سفارشی
• پنل‌های مدیریت
• طراحی فرانت اند

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

بیاین ببینیم این تفاوت چیه؟!

تفاوت بین تصویر آیکون و فونت های آیکون چیه؟

فونت های آیکون و آیکون های تصویر تا حدودی مشابه هستن، اما به جای حروف الفبا، نمادهای برداری در فونت های آیکون وجود داره، یعنی در اصل، این فونت های آیکون شبیه تصاویری هستن که می‌تونین برای افزودن نمادها در وب سایت خودتون استفاده کنین، اما یه تصویر واقعی نیستن!!

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

چرا باید از dashicons وردپرس استفاده کنیم؟

استفاده از dashicons برای رفع کندی سایت شما گزینه خوبی هست، اما خب دلایلی دیگه‌ای هم برای این کار وجود داره:

• مثل متن‌هایی که در وبسایت خودتون ازشون استفاده می‌کنین، مقیاس پذیرن!
• حجم کمی داره و سرعت بارگذاری صفحه شما رو کند نمی‌کنن.
• قابلیت تنظیم رنگ نماد از طریق CSS و افزودن خصوصیات اضافی مثل رنگ شیب، سایه و غیره رو دارن.
• در ذخیره بیش از حد درخواست‌های HTTP عالی هستن، ولی اگه از تصاویر زیادی در سایت استفاده می‌کنین، مجبورین درخواست‌های زیادی برای واکشی اونها انجام بدین که این باعث افزایش زمان بارگیری صفحه میشه.
• استفاده و تنظیم dashicons وردپرس نسبت به تصاویر آسونه. می‌تونین نمادهای قابل شناسایی و خلاقانه رو بدون نیاز به این که دوباره نمادی برای پخش کننده ویدیو، ایمیل، موسیقی یا هر چیز مورد نیاز دیگه‌ای بسازین، اضافه کنین.
• قابلیت دسترسی بیشتری دارن چون که در خود وردپرس تعبیه شدن.

تو بخش بعدی این مقاله می‌خوایم به شما نشون بدیم که اصلاً از این dashicons وردپرس چطوری باید استفاده کنین، پس با ما همراه باشین:

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

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

1. Dashicons رو در سایت وردپرس خودتون فعال کنین

قبل از شروع کار، Dashicons رو در جایی که لازم دارین فعال کنین، به عنوان مثال یه تم! برای این منظور، باید چند تا کد به پرونده function.php اضافه کنین.

برای انجام این کار:

• ابتدا از داشبورد وردپرس خودتون به ویرایشگر Theme / Appearance برید.
• فایل function.php رو باز کنین.
• تا انتهای پرونده پیمایش کنین و چند خط کد برای ایجاد اسکریپت اضافه کنین.

مثال فوق برای فعال کردن Dashicons در فرانت اند هست.

قبل از ویرایش فایل functions.php مطمئن بشین که یه چایلد تم (Child theme) ایجاد کردین. به این دلیل که اگه مستقیماً پرونده طرح زمینه رو ویرایش کنین و سپس برای اون تم، به روزرسانیش کنین، تمام تغییراتی که در پرونده ایجاد می‌کنین لغو میشه.

2. کدهای HTML & CSS Dashicon رو پیدا کنین

WordPress.org یه کتابخونه از Dashicons ارائه میده، که به شما کمک می‌کنه کدهای CSS و HTML متعلق به هر نماد رو پیدا کنین. در اینجا، برای یافتن Dashicon هایی که می‌خواین استفاده کنین، به Developer Resources برید و سپس:

• روی آیکون مورد نظر خودتون کلیک کنین.
• از بین «Copy CSS» یا «Copy HTML» یکی رو انتخاب کنین.
• حالا، یه پنجره براتون باز میشه که شما فقط کد رو در کلیپ بورد کپی کنین.
• تصمیم بگیرین که کجا می‌‎خواین از نماد استفاده کنین، مثلاً مضامین، متادیتا، منوی پیمایش و غیره.
• کد کپی شده رو در Text Widget یا Text Editor مکان انتخاب شده جایگذاری کنین.
• Modify icon با استفاده از CSS سفارشی به نظر میرسه.

بله و تمااام!

راستی علاوه بر این موارد، به طور پیش فرض، اندازه تمام آیکون ها 20 پیکسل است. می‌تونین با استفاده از عناصر CSS از گزینه‌هایی مثل Google Chrome’s Inspect Element یا Firefox’s FireBug اون رو تغییر بدین.

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

ما درمورد این که چطوری از Dashicons وردپرس در سایت خودتون استفاده کنین، صحبت کردیم و الان می‌خوایم به شما بگیم که چطوری میشه از این ویژگی نهایت استفاده رو برای اهداف خاص برد.

1. استفاده در منوی پیمایش

برای افزودن dashicons وزدپزس به منو، مراحل زیر رو دنبال کنین:

• از داشبورد به Menus / Appearance برید.
• کدهای HTML طراحی شده برای آیکون منو رو از WordPress.org کپی کنین.
• اون رو روی «برچسب پیمایش» روی داشبورد بچسبونین.
• روی دکمه «ذخیره» کلیک کنین و سپس صفحه اصلی رو بارگیری کنین. حالا باید یه نماد جالب و واضح رو نشون بده.

2. استفاده در پست متا

شما می‌تونین از Dashicons درست در مقابل تاریخ، نام نویسنده، برچسب یا دسته بر اساس موضوع به علاوه داده هایی که نمایش می‌ده استفاده کنین.

همونطور که قبلاً Dashicons رو جذب کردین، فایل style.css رو باز کنین. در غیر این صورت، می‌تونین به سراغ ویرایشگر سفارشی CSS برین، که به شما اجازه نمی‎ده پس از به روزرسانی تم، تغییرات اعمال شده رو از دست بدین. بعد، کد CSS خودتون رو پس از پیدا کردن یه انتخاب منطبق اضافه کنین.

3. استفاده در وردپرس

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

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

جدا از مثال های بالا، می‌تونین از Dashicons در قسمت بک اند خودتون برای تعیین آیکون های مختلف برای انواع مختلف پست استفاده کنین، یا می‌تونین از اونها در عنوان پست یا عناوین عناصر استفاده کنین، یا اگه یه صفحه فرود سفارشی ایجاد می‌کنین، می‌تونین با استفاده از این ویژگی، بین صفحات مختلف تفاوت قائل بشین!

امیدواریم با خوندن این مقاله، الان همه چیز در مورد WordPress Dashicons کاملاً براتون روشن باشه. اونها نه تنها زیبایی وب سایت شما رو تضمین می‌کنن بلکه به راحتی قابل استفاده هستن و سرعت بارگذاری صفحه رو بهبود می‌بخشن.

در واقع چیزی که دش آیکون وردپرس به سایت شما هدیه می‌کنه، زیبایی و هوشمندی هست و این یکی از خفن‌ترین ترکیب‌ها برای شروع یه تولید محتوای درجه یک می‌تونه باشه!

در صورت نیاز به چند تا آیکون برای یک وب سایت وردپرس، Dashicons گزینه خیلی خوبی است. یا حتی وقتی که شما در حال ساخت backend وردپرس هستین، می‎تونین داشبورد وردپرس رو با استفاده از همون فونت آیکون تنظیم شده وردپرس ثابت نگه دارین.

اگه از Dashicons راضی هستین اما خب بعضی از آیکون ها رو از دست می‌دین، می‌تونین اون آیکون رو درخواست کنین! روند درخواست آیکون در github.com/WordPress/dashicons انجام میشه. همچنین، اگه می‌خواین نماد خودتون رو به کتابخانه Dashicons اضافه کنین، این کار از طریق صفحه GitHub نیز امکان پذیر است.

مجموعه آیکون های dashicons تا حدودی محدود هستن و فونت های آیکون بزرگتری در اون وجود داره. بنابراین، اگه به مجموعه آیکون های بیشتری نیاز دارین، Font Awesome رو بهتون توصیه می‌کنیم. اونها مجموعه بزرگی از آیکون های رایگان رو ارائه می‌دن و در صورت نیاز به آیکون های بیشتر، در صورت ارتقا به نسخه PRO، می‌تونین از آیکون های بیشتری از هم استفاده کنین.

بعد از این کار می‌تونین سرعت سایت خودتون رو با بهترین ابزار تست سرعتی که می‌شناسین چک کنین و از نتیجه شگفت زده بشین!