سبد خرید
0

هیچ محصولی در سبد خرید نیست.

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

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

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

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

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

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

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

 

 

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

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

 

 

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

 

برای روش دوم، با ماوس کلیک راست کنین و از ابزار 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 رو به روز کنین و برای مشاهده نتیجه، صفحه اصلی رو ریفرش کنین.

ارسال دیدگاه

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

توسط
تومان