آموزش تغییر آیکون‌‎های material design در وردپرس

این آموزش به شما نشون میده چطور آیکون‌های Material Design رو در قالب‌های وردپرس تغییر بدین.

Material Design مجموعه کاملی از آیکون‌های طراحی Material برای scalable vector graphics در وبسایت‌هاست. که ممکنه برای برخی از قالب‌های وردپرس استفاده بشه. بیاین روش ویرایش اون رو بررسی کنیم. دو راه برای به روز رسانی آیکون‌ها وجود داره:

• استفاده از شورتکدها
• استفاده از CSS

برای روش اول: داشبورد وردپرس رو باز کنین و به Pages > All Pages> Home برین. خطوط شورتکد رو با رفرنس آیکون material-design پیدا کنین:

 

 

حالا بیاین File Manager سرور رو باز کنیم و فایل wp-content/themes/theme####/material/material-design.css رو اونجا پیدا کنیم. برای بررسی محتواش، اون رو باز کنین. چند نوع از هر نماد رو اونجا پیدا میکنین. کلاس CSS مربوط به آیکون جدید رو جستجو کنین و عنوان رو از فایل کپی کنین:

 

 

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

 

برای روش دوم، با ماوس کلیک راست کنین و از ابزار Inspect element استفاده کنین تا کلاس CSS رو برای آیکون ویرایش کنین. کلاس CSS برای arrow رو کپی کنین.

به داشبورد وردپرس برگردین و به Appearance > Editor> style.css  برین. کلاس CSS رو برای آیکون قرار بدین و مطمئن شین که مقدار خط content رو داره.

به فایل wp-content/themes/theme####/material/material-design.css برگردین و مقداری رو که می‌خواهین به جای مقدار پیش‌فرض استفاده کنین، جستجو کنین.

مقدار محتوای جدید رو در فایل style.css قرار بدین. به خاطر داشته باشین که برای اعمال اصلاحات CSS به درستی، از !important استفاده کنین. کلاس CSS نهایی باید به صورت زیر باشه:

بعد از اتمام تغییرات، فایل style.css رو به روز کنین و برای مشاهده نتیجه، صفحه اصلی رو ریفرش کنین.