نمایش آیکون‌های SVG در وردپرس؛ با بلوک آیکون و افزونه رایگان

برای گذاشتن آیکون کنار متن، دکمه یا بخش‌های مختلف سایتتون، دو راه امن و به‌روز پیش رو دارید. اگه یکی از آیکون‌های آماده به کارتون میاد، می‌تونید از بلوک داخلی آیکون وردپرس کمک بگیرید. برای فایل SVG اختصاصی هم افزونه رایگان Safe SVG گزینه خوبیه، چون فایل رو قبل از نمایش پاک‌سازی می‌کنه.

در این آموزش هر دو روش رو مرحله‌به‌مرحله با هم انجام می‌دیم. اگه قبلاً از WP SVG Icons و شورت‌کدهای اون استفاده می‌کردید، مسیر جایگزین‌کردن آیکون‌های قدیمی رو هم توضیح می‌دیم تا ظاهر سایتتون به هم نریزه.

چرا دیگه نباید از WP SVG Icons استفاده کنید

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

خوشبختانه خود وردپرس حالا بلوک Icon یا همون «آیکون» رو داره. این بلوک در وردپرس ۷.۰ اضافه شده و وردپرس ۷.۱ امکانات بیشتری برای ثبت و استفاده از مجموعه‌های SVG در اختیار توسعه‌دهنده‌ها می‌ذاره. اگه جزئیات فنی براتون مهمه، می‌تونید توضیحات رسمی تیم وردپرس رو بخونید.

روش اول: نمایش آیکون با قابلیت داخلی وردپرس

اگه وردپرس ۷.۰ یا نسخه جدیدتر روی سایتتون نصبه و آیکون موردنظرتون بین گزینه‌های آماده هست، به نصب افزونه نیازی ندارید. از پیشخوان وارد بخش «نوشته‌ها» یا «برگه‌ها» بشید و محتوای دلخواهتون رو با ویرایشگر بلوکی باز کنید.

داخل ویرایشگر روی دکمه «+» بزنید. «آیکون» یا Icon رو جست‌وجو کنید و بلوک آیکون رو به صفحه اضافه کنید. حالا می‌تونید آیکون مناسب رو از بین گزینه‌های موجود بردارید.

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

در آخر روی «ذخیره» یا «به‌روزرسانی» بزنید و نتیجه رو در سایت ببینید. حتماً صفحه رو یک بار هم با موبایل باز کنید تا مطمئن بشید آیکون زیادی بزرگ یا کوچک نیست و به متن کناری نچسبیده.

اگه بلوک آیکون رو پیدا نمی‌کنید، قبل از هر کاری نسخه وردپرس رو بررسی کنید. این قابلیت برای وردپرس ۷.۰ و نسخه‌های جدیدتره. آیکون‌هایی که می‌بینید ممکنه با توجه به قالب و افزونه‌های فعال سایتتون هم فرق کنن.

روش دوم: بارگذاری امن فایل SVG با افزونه رایگان Safe SVG

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

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

نصب افزونه Safe SVG

از پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید. داخل کادر جست‌وجو Safe SVG رو بنویسید. وقتی افزونه رو پیدا کردید، روی «هم‌اکنون نصب نمایید» بزنید و بعد فعالش کنید.

بارگذاری فایل SVG در کتابخانه رسانه

بعد از فعال‌کردن افزونه، به «رسانه ← افزودن پرونده رسانه‌ای تازه» برید. فایل SVG رو انتخاب کنید یا با ماوس داخل کادر بارگذاری بندازید. Safe SVG همون موقع فایل رو بررسی و پاک‌سازی می‌کنه.

حالا نوشته یا برگه‌ای رو که می‌خواید باز کنید و یک بلوک «تصویر» داخلش بذارید. روی «کتابخانه رسانه» بزنید، فایل SVG پاک‌سازی‌شده رو پیدا کنید و اون رو به محتوا اضافه کنید.

برای این تصویر یک متن جایگزین کوتاه و روشن بنویسید. متن جایگزین یا Alt، مفهوم تصویر رو برای کاربرهایی توضیح می‌ده که نمی‌تونن اون رو ببینن. مثلاً متن جایگزین آیکون سبد خرید می‌تونه «سبد خرید» باشه. ولی اگه آیکون فقط جنبه تزئینی داره و اطلاعاتی منتقل نمی‌کنه، بهتره متن جایگزین رو خالی بذارید.

تنظیم اندازه، رنگ و لینک آیکون

برای عوض‌کردن اندازه، اول آیکون رو انتخاب کنید و بعد عرض اون رو از تنظیمات بلوک تغییر بدید. اندازه‌ای رو در نظر بگیرید که با متن یا دکمه کنارش هماهنگ باشه. اگه آیکون جزئیات ریزی داره، خیلی کوچکش نکنید.

رنگ فایل SVG همیشه از تنظیمات بلوک تصویر تغییر نمی‌کنه. این قابلیت به ساختار فایل و شیوه تعریف رنگ داخل اون بستگی داره. اگه می‌خواید رنگ آیکون رو راحت‌تر کنترل کنید، بلوک داخلی آیکون معمولاً انتخاب ساده‌تریه. برای فایل اختصاصی هم می‌تونید پیش از بارگذاری، نسخه‌ای با رنگ مناسب از طراحتون بگیرید.

برای لینک‌دادن به آیکون، اون رو انتخاب کنید و روی نماد لینک در نوار ابزار بزنید. صفحه مقصد باید با مفهوم آیکون جور باشه؛ مثلاً آیکون پاکت می‌تونه کاربر رو به صفحه تماس با ما ببره. بااین‌حال، بهتره آیکون تنها بخش قابل‌کلیک نباشه و یک متن واضح هم کنارش بذارید.

اگه می‌خواید کنار گزینه‌های فهرست سایت آیکون بذارید، آموزش افزودن آیکون به منو در وردپرس دقیقاً همین مسیر رو نشونتون می‌ده. برای ساخت دکمه‌های واضح‌تر هم می‌تونید سراغ آموزش ساخت دکمه در وردپرس برید.

مهاجرت از WP SVG Icons به روش جدید

اگه WP SVG Icons هنوز روی سایتتون فعاله، عجله نکنید و همون اول حذفش نکنید. این افزونه آیکون‌ها رو با شورت‌کد نشون می‌داد. شورت‌کد یک تکه متن کوتاه داخل کروشه هست که افزونه اون رو به محتوای واقعی تبدیل می‌کنه. اگه افزونه رو زود غیرفعال کنید، ممکنه شورت‌کد خام داخل نوشته‌ها دیده بشه یا بعضی آیکون‌ها ناپدید بشن.

1. اول از فایل‌ها و پایگاه داده سایتتون یک نسخه پشتیبان بگیرید.
2. نوشته‌ها و صفحه‌هایی رو که آیکون قدیمی دارن پیدا کنید.
3. هر آیکون رو با بلوک داخلی آیکون یا یک فایل SVG پاک‌سازی‌شده عوض کنید.
4. صفحه رو ذخیره کنید و ظاهرش رو هم در دسکتاپ و هم در موبایل ببینید.
5. بعد از جایگزین‌کردن همه شورت‌کدها، افزونه قدیمی رو غیرفعال کنید و دوباره صفحه‌های مهم سایت رو بررسی کنید.
6. اگه همه‌چیز درست بود، افزونه WP SVG Icons رو حذف کنید.

نکات امنیتی و بهینه‌سازی آیکون‌های SVG

• فایل SVG رو فقط از طراح خودتون یا منبعی بگیرید که بهش اعتماد دارید.
• بارگذاری SVG رو با کدهای ناشناس و بدون ابزار پاک‌سازی فعال نکنید.
• اجازه بارگذاری فایل SVG رو فقط به کاربرهای قابل‌اعتماد سایت بدید.
• قبل از استفاده، فضای خالی دور آیکون و جزئیات اضافه فایل رو پاک کنید.
• برای چند آیکون ساده چند افزونه مختلف نصب نکنید؛ بلوک داخلی وردپرس معمولاً از پس نیازهای عادی برمیاد.
• بعد از هر تغییر، آیکون رو در موبایل و دسکتاپ هم ببینید.

جمع‌بندی

برای نمایش آیکون SVG در وردپرس دیگه بهتره سراغ WP SVG Icons نرید. اگه وردپرس ۷.۰ یا نسخه جدیدتر روی سایتتون نصبه، اول بلوک داخلی آیکون رو امتحان کنید؛ کار باهاش ساده‌تره و افزونه جداگانه هم نمی‌خواد. برای فایل SVG اختصاصی، افزونه رایگان Safe SVG رو نصب کنید تا فایل هنگام بارگذاری پاک‌سازی بشه.

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

سؤالات متداول

تیم تولید محتوا

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