استفاده از تصاویر با فرمت SVG در وردپرس با افزونه SVG Support

استفاده و تنظیمات تصاویر SVG در سایت وردپرسی، با استفاده از CSS بسیار سخت و زمانبر می باشد.
اما با نصب این افزونه می توانید تصاویر SVG را به راحتی تنظیم نمایید!

Scalable Vector Graphics (SVG) در طراحی وب سایت مدرن جایگاه ویژه ای دارد و به شما امکان می دهد تصاویر با اندازه کوچک را به هر اندازه دلخواهی بدون از دست دادن کیفیت بهینه سازی کرد.

این افزونه نه تنها پشتیبانی از SVG را فراهم می کند، همچنین به شما اجازه می دهد تا به راحتی کد کامل فایل SVG خود را با استفاده از برچسب IMG وارد کنید.
با افزودن کلاس “style-svg” به عناصر IMG ، این افزونه به صورت پویا هر عنصر IMG حاوی کلاس “style-svg” را با SVG کامل جایگزین می کند.

هدف اصلی این است  طراحی با استفاده از عناصر SVG می باشد. معمولا در styling و CSS، استفاده از embed, object  ویا img tag محدود هستند.

امکانات
◾ پشتیبانی از کتابخانه رسانه
◾ پشتیبانی از کد SVG دلخواه
◾ سازگاری با ویجت های جدید تصویر (وردپرس 4.8+ )
◾ امکان استفاده از عناصر SVG به طور مستقیم با استفاده از CSS
◾ صفحه تنظیمات با دستورالعمل های فوق العاده آسان
◾ محدودیت دسترسی آپلود SVG برای مدیران
◾ تنظیم کلاس CSS سفارشی دلخواه
◾ بسیار ساده برای استفاده

نحوه استفاده

ابتدا، افزونه SVG Support را نصب و فعال کنید.

پس از فعال شدن، شما می توانید تصاویر SVG را مانند هر فایل دیگر آپلود کنید.

به عنوان مدیرسایت ، شما می توانید در صفحه تنظیمات مدیریت Settings > SVG Support، محدودیت آپلود فایل SVG را تنها به مدیران تخصیص دهید و حتی می توانید کلاس CSS دلخواهی تعریف نمایید.

اگر تنها نیاز به آپلود فایل های SVG برای استفاده به عنوان تصاویر دارید، لازم نیست که “حالت پیشرفته” را فعال کنید.
در حالت پیش فرض غیرفعال می باشد و تضمین می کند که اسکریپت نمایش داده نمی شود و تنظیمات غیر ضروری مخفی می ماند.

کاربران پیشرفته می توانند “حالت پیشرفته” را در قسمت Settings > SVG Support فعال نمایند.

با استفاده از حالت پیشرفته، شما می توانید تصاویر SVG خود را بسادگی با اضافه کردن کلاس “style-svg” (یا کلاس سفارشی که شما تعریف کردید) به برچسب های IMG استفاده نمایید.

مثلا:

<img class="style-svg" alt="alt-text" src="image-source.svg" />

یا

<img class="your-custom-class" alt="alt-text" src="image-source.svg" />

در نتیجه کدهای بالا، تمام تصاویر IMG را به صورت داینامیک با کد فعلی SVG شما جایگزین و محتویات داخلی را قابل استفاده می کند.

شما می توانید کلیه ویژگی ها را از تصاویر IMG حذف کنید.
همچنین می توانید تنظیم نمایید که هنگام درج SVG در یک پست یا صفحه، کلاس دلخواهی به تگ IMG اضافه نمایید.

از ورژن 2.3.11 به بالا، می توانید تمامی فایل های SVG را با یک checkbox رندر نمایید.
علاوه بر این، شما می توانید انتخاب کنید که از نسخه minified یا expanded فایل JS استفاده کنید.

اگر یک پست/صفحه شامل SVG به عنوان featured image ذخیره شده باشد، یک کادر checkbox برجسته نمایش داده می شود تا شما بتوانید آن را بصورت inline (فقط اگر حالت پیشرفته فعال باشد) نمایش داده شود.

لطفا توجه داشته باشید: اگر SVG شما نشان داده نشود، احتمال دارد که ارتفاع و عرض آن 0 باشد. در این مورد، شما باید ارتفاع و عرض را در CSS خود برای فایل های SVG تنظیم کنید تا به درستی نمایش داده شود.

امنیت

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

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

نصب و راه اندازی

-از طریق wp-admin
1. در قسمت پلاگین ها، add new را انتخاب نمایید.
2. “SVG Support” را در فیلد جستجو تایپ کنید.
3. روی نصب پلاگین کلیک کنید.
4. روی فعال کردن پلاگین کلیک کنید.

یا
1. نسخه فشرده svg-support.zip از طریق Plugins> add new> upload آپلود نمایید.
2. روی فعال کردن پلاگین کلیک کنید

-از طریق FTP
1. دانلود پوسته پلاگین و آن را در روی کامپیوتر خود از حالت فشرده خارج نمایید.
2. پوشه svg-support خود را در مسیر/wp-content/plugins/ directory هاست آپلود کنید.
3. افزونه را از طریق منوی Plugins در وردپرس فعال کنید.

تصاویر

تنظیمات پایه

تنظیمات پیشرفته

Featured Image checkbox جهت اجرای SVG بصورت inline

Inline SVG در front end markup

دانلود افزونه

نام و نام خانوادگی و ایمیل رو به طور کامل برای دریافت رایگان وارد کنید.

دریافت لینک دانلود