امروز در این آموزش قصد داریم در مورد بالا بردن کیفیت آیکون ها از طریق تصاویر svg به وسیله ی افزونه WP SVG Icons واستون یه چیزایی بگیم که واستون مفید باشه

 

 

 

قبل از اینکه در مورد افزونه بگیم میخواهیم یه توضیحاتب رو در مورد تصاویر svg بگیم که بیش تر با این تصاویر آشنا بشید

svg چییست ؟؟؟
واژه SVG مخفف Scalable Vector Graphics به معنای «تصاویر برداری مقایس‌پذیر» است.

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

توضیح svg به زبان ساده تر
تصاویر SVG چون بر مبنای عدد و نسبت هستند، به پیکسل‌ها وابستگی‌ای ندارند و در هر مقیاسی بدون افت کیفیت نمایش داده می‌شوند. تصاویر توسط کنسرسیوم جهانی وب (W3C) به صورت یک استاندارد پذیرفته شده‌اند و هم اکنون حدود ۸۵٪ از مرورگرهای موجود از آن‌ها پشتیبانی می‌کنند.

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

به فرمت svg آشنا شدید حالا بریم سراغ افزونه
بعد از اینکه افزونه را نصب کردید آن را فعال کنید در قسمت داشبورد وردپرس شما یک گزینه افزوده می شود به اسم WP SVG Icons افزوده می شود

افزونه افزونه WP SVG Icons شامل چند قسمته

1. Default Icon set : آیکون های ثابتی در این افزونه وجود دارد که در این قسمت قابل نمایش و می توان به روی آن کلیک shortcode آن را کپی و هر جایی که میخواهد قابل نمایش باشد کپی کنید
2. Custom Icon Set : در این قسمت شما می توانید آیکون اضافه کنید به قسمت Default
3. Settings : تنظیمات موجود را در این قسمت می توانید انجام دهید از جمله نمایش این ایکون در داخل چه تگی قرار گیرد که ثابت آن تگ i می باشد
4. Upgrade : خرید نسخه پولی این افزونه

در قسمت نوشته ها نیز مانند تصویر زیر یک گزینه افزوده می شود به اسم Add Icon به روی آن کلیک کنید و آیکون مد نظر خود را کلیک و خودش اتوماتیک در بین نوشته شما قرار میگیرد

مقاله که می خواهیم واستون توضیح بدیم بیش تر برای بالا بردن وب سایت و شکل ظاهر آن می باشد با استفاده از افزونه فونت آیکون

 

 

 

می دونید که حجم عکس بیش تر از حجم نوشته است همچنین عکس ها در زمان کوچک بزرگ شدن کیفیتشون از دست میدن خب چکار باید بکنیم این افزونه که در این مقاله قصد داریم توضیح بدیم واسه این کار درس شده هدف استفاده از فونت ایکون ها در نوشته های خود می باشد

این افزونه را در قسمت افزودن افزونه جستجو و آن را اضافه کنید افزونه Wow Icons واسه اینکار خیلی مناسبه هم کلاس مورد نظر ایکون رو بهت میده هم در قسمت نوشته ها و محصولات اگر قالب شما فروشگاهی باشد یک گزینه در بالا فعال می شود به اسم Wow Icons که به روی ان کلیک کنید یه پنجره باز می شود یک نوع فونت ایکون را انتخاب و در قسمت جستجو فونت آیکون مد نظر خود را جستجو وبه روی Insert کلیک کنید

در افزونه Wow Icons از چه نوع فونت ایکون های فونت ایکون هایی می توان استفاده کرد

• Font Awesome
• Fontello
• IcoMoon
• Open Iconic
• WP Dashicons
• Google Material Icons
• JustVector Social Font
• Payment Font

در تنظیمات اصلی این افزونه شما می توانید فونت ایکون مد نظر خود را تیک بزنید و ایکون مورد نظر خود را جستجو کنید و به روی آن کلیک کنید در زمان کلیک کد کلاس فونت ایکون مورد نظر رو بهتون میده هر جایی دلتون خواست می تونید استفاده کنید

استفاده از فونت ایکون ها هم باعث می شود سرعت وب سایت وردپرسی شما بالا رود هم کافیت ایکون های شما را بالا میبرد من معمولا زمانی که از تصاویر با پسوند .png استفاده می کنم در زمان بزرگ کوچک شدن کلا یه جوری میشه اون شفافیتش رو از دست میده راه حل از استفاده از فونت ایکون امیدوارم این مقاله واستون مفید باشه