اگر با المنتور کار کرده باشید، حتماً یه بار با این مشکل روبرو شدید: یه آیکون SVG قشنگ پیدا کردید، آپلودش کردید، رفتید تا رنگ آیکون رو تغییر بدید… ولی انگار نه انگار. رنگ آیکون تکون نمیخوره!
امروز توی این مقاله از تکنوآل، میخوام یه افزونه وردپرسی رایگان رو معرفی کنم که این مشکل رو یهبار برای همیشه حل میکنه و اختصاصی توسط تیم تکنوآل نوشته شده: افزونه آیکونال.
مشکل المنتور برای تغییر رنگ چیه؟
قبل از اینکه بریم سراغ معرفی افزونه، بذارید ریشه مشکل رو با هم بفهمیم.
فایلهای SVG معمولاً رنگهاشون رو بهصورت مستقیم و ثابت داخل کدشون ذخیره میکنن. مثلاً اینطوری:
fill=”#۰۰۰۰۰۰″ یا stroke=”#۳۳۳۳۳۳″
المنتور برای اینکه بتونه رنگ آیکون رو از طریق پنل تنظیماتش کنترل کنه، به جای این رنگهای ثابت، انتظار داره از یه دستور استاندارد CSS به اسم “currentColor” استفاده شده باشه. وقتی این دستور وجود داشته باشه، المنتور میتونه هر رنگی که شما انتخاب کنید رو جایگزینش کنه.
مشکل اینجاست که اکثر آیکونهایی که از اینترنت دانلود میکنید این ویژگی رو ندارن و باید دستی ویرایش بشن. یعنی باید کد SVG رو باز کنید، تکتک مقادیر رنگ رو پیدا کنید و جایگزین کنید. اگه آیکون ساده باشه شاید ۵ دقیقه طول بکشه، اما اگه دهها یا صدها آیکون داشته باشید، میتونه ساعتها وقتتون رو بگیره.
افزونه آیکونال دقیقاً همین کار رو بهصورت خودکار انجام میده.
افزونه آیکونال چیه؟
آیکونال یه افزونه سبک و رایگان برای وردپرس هست که توسط تیم تکنوآل توسعه داده شده. وقتی نصبش میکنید، هر فایل SVG که در رسانه وردپرس آپلود بشه رو بهصورت خودکار بررسی میکنه و مقادیر “fill” و “stroke” رو به “currentColor” تبدیل میکنه.
نتیجهش چیه؟ آیکون شما بلافاصله بعد از آپلود آماده استفاده در المنتور هست و میتونید رنگش رو از بخش استایل المنتور هر طور دوست دارید در هر حالتی تغییر بدید.
امکانات افزونه آیکونال
۱. تبدیل خودکار هنگام آپلود
این قابلیت اصلی افزونهست. وقتی فعاله (که پیشفرض هست)، هر SVG که آپلود کنید بدون اینکه شما هیچ کاری بکنید، آماده استفاده در المنتور میشه. کاملاً در پسزمینه اتفاق میافته و هیچ تأخیری توی فرآیند آپلود ایجاد نمیکنه.
۲. تبدیل دستهجمعی
اگه قبل از نصب آیکونال، تعداد زیادی آیکون SVG در رسانهتون داشتید نگران نباشید! از بخش «تبدیل دستهجمعی» میتونید با یه کلیک همه آیکونهای قبلی رو هم تبدیل کنید. افزونه یه نوار پیشرفت هم نشون میده که میفهمید چقدر از کارش مونده.
۳. لیست استثناها
بعضی وقتها میخواید یه آیکون دستنخورده بمونه. مثلاً لوگوی یه برند معروف مثل گوگل یا اپل که رنگش بخشی از هویتشه و نباید تغییر کنه. از بخش «استثناها» میتونید این فایلها رو انتخاب کنید تا افزونه کاری باهاشون نداشته باشه. حتی اگه موقع اضافه کردن استثنا بخواید فایل جدیدی آپلود کنید، افزونه خیلی حرفهای تشخیص میده که نباید اون فایل رو تبدیل کنه.
۴. نسخه پشتیبان خودکار
قبل از هر تبدیل، افزونه میتونه یه نسخه پشتیبان از فایل اصلی ذخیره کنه. این یعنی اگه روزی به هر دلیلی به نسخه اصلی آیکون نیاز داشتید، بهش دسترسی دارید.
۵. بررسی وضعیت سرور
از بخش «وضعیت سرور» میتونید ببینید که هاستتون همه ابزارهای لازم برای کارکرد درست افزونه رو داره یا نه. این بخش بهخصوص برای کسایی که با هاستهای محدود کار میکنن خیلی مفیده.
چطور نصبش کنم؟
نصب آیکونال مثل هر افزونه وردپرسی دیگهای خیلی راحته:
۱. فایل ZIP افزونه رو از پایین صفحه دانلود کنید
۲. از داشبورد وردپرس به مسیر افزونهها ← افزودن برید
۳. روی «بارگذاری افزونه» کلیک کنید و فایل ZIP رو آپلود کنید
۴. افزونه رو فعال کنید
۵. از مسیر تنظیمات ← آیکونال وارد پنل تنظیماتش بشید
همین! از این لحظه به بعد هر SVG که آپلود کنید، خودکار برای ویرایش آمادهست.
خلاصه امیدوارم آیکونال بتونه یه دردسر کوچیک ولی آزاردهنده رو از سر راهتون برداره. اگه سوالی یا پیشنهادی داشتید یا به مشکلی برخوردید، توی بخش نظرات منتظرتونم!
تا ابزار بعدی از تکنوآل، موفق باشید!
