آموزش وردپرس, مقالات وردپرس

آموزش استفاده از آیکون های SVG در وردپرس

آموزش استفاده از آیکون های SVG در وردپرس

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

آموزش استفاده از آیکون های  SVG در وردپرس

 

آموزش استفاده از آیکون های SVG در وردپرس

آموزش استفاده از آیکون های SVG در وردپرس

 

آیکون های SVG آیکون هایی هستند که در قالب های جدید وردپرس از آن ها به جای Png استفاده میشود و دنیای آینده تصاویر تحت وب را به دست می گیرند و در حال حاظر هم کاربردهای زیادی دارند. همان طور که در پست های قبل در مورد آیکون های SVG توضیحاتی ارائه شد حال امروز آموزش استفاده از این آیکون ها را در وردپرس بررسی می کنیم.

قابلیت های آیکون های SVG

  • عدم وابستگی به پیکسل ها
  • آیکون هایی براساس قالب بندی XML
  • مبنای ریاضی داشته وبسیار دقیق ترسیم می شوند.
  • پشتیبانی 87% از مرورگرها از این تصاویر
  • این آیکون ها توسط سازمان جهانی وب به عنوان استاندارد وب پذیرفته شده اند.

تصاویر SVG چون بر مبنای عدد و نسبت هستند، به پیکسل‌ها وابستگی‌ای ندارند و در هر مقیاسی بدون افت کیفیت نمایش داده می‌شوند. تصاویر SVG توسط کنسرسیوم جهانی وب به صورت یک استاندارد پذیرفته شده‌اند.

آموزش افزونه WP SVG Icons برای افزودن آیکون های SVG در وردپرس

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

 

آموزش استفاده از آیکون های SVG در وردپرس

آموزش استفاده از آیکون های SVG در وردپرس

 

حال همان طور که در تصویر بالا مشاهده می کنید دو گزینه آیکون های پیش فرض و آیکون های سفارشی وجود دارد. در قسمت آیکون های پیش فرض تعداد زیادی آیکون مشاهده می کنید که با کلیک روی هر قسمت شورت کد مخصوص به آیکون مورد نظر را در اختیار شما قرار می دهد و می توانید در برگه ها و نوشته های خود از آن استفاده کنید. از طرفی با کلیک روی هر آیکون اندازه و  رنگ و پیکربندی مربوط به آن را از قسمت how to use انجام دهید.

 

آموزش استفاده از آیکون های SVG در وردپرس

آموزش استفاده از آیکون های SVG در وردپرس

 

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

 

آموزش استفاده از آیکون های SVG در وردپرس

آموزش استفاده از آیکون های SVG در وردپرس

 

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

نمایش آیکون های زنده و متحرک با افزونه Livicons

 

آموزش استفاده از آیکون های SVG در وردپرس

آموزش استفاده از آیکون های SVG در وردپرس

 

آیکن های زنده یا Live icon ها یکی از پرکاربرد ترین عناصر طراحی وبسایت می باشند که طرفداران بسیار زیادی نیز دارند. اینگونه آیکن ها  دارای فرمت  svg می باشند و عملکرد آنها به این گونه است که با رفتن موس بر روی آنها شروع به نمایش انیمیشنی می نمایند. حال قصد داریم افزونه ای که توسط آن قادر به نمایش آیکن های زنده در سایت وردپرسی خود خواهید بود را آموزش دهیم

افزونه Livicons برای نمایش آیکون های متحرک در وردپرس

یک افزونه حرفه ای برای ایجاد آیکن های زنده یا Live icon در وردپرس می باشد که قابلیت های زیادی را در اختیار شما قرار می دهد .  این افزونه شامل بیش از ۴۰۰ آیکن می باشد که حدود ۳۵۰ آیکن زنده ، بیش از ۵۰ آیکن ثابت و انواع دیگر آیکون ها می باشد.

ویژگی های افزونه Livicons

  • استفاده از آیکون ها به صورت استاتیک
  • رنگ بندی و اندازه دلخواه
  • سازگار با بوتسترپ
  • سازگار با انواع مرورگرها
  • بیش از 350 آیکون زنده و متحرک

پس همراهان عزیز وبسمتر اگر به دنبال افزونه ای برای استفاده از آیکون های زنده و متحرک در وب سایت وردپرسی خود هستید افزونه Livicons  گزینه بسیار مناسبی می باشد.

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

نوشته های مشابه

دیدگاهتان را بنویسید

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