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

اگه می‌خواید بخش‌هایی مثل دکمه تماس، ایمیل، منو یا شبکه‌های اجتماعی بیشتر به چشم بیان، آیکون متحرک می‌تونه کمکتون کنه. البته LivIcons که قبلاً در این مقاله معرفی شده بود، دیگه انتخاب مناسبی نیست؛ چون پروژه LivIcons Evolution متوقف شده و نباید روی دریافت آپدیت یا سازگاری آینده اون حساب کنید.

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

چرا دیگه LivIcons رو پیشنهاد نمی‌کنیم؟

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

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

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

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

قبل از شروع، یادتون باشه که انیمیشن باید به فهم بهتر صفحه کمک کنه. حرکت زیاد یا دائمی می‌تونه تمرکز کاربر رو به هم بزنه. بهتره حرکت کوتاه و هدفمند باشه و فقط برای بخش‌های مهم از اون استفاده کنید.

نصب افزونه رایگان Font Awesome

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

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

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

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

داخل بلوک روی دکمه «Choose Icon» بزنید تا انتخاب‌گر آیکون باز بشه. حالا می‌تونید اسم یا موضوع آیکون دلخواهتون رو جست‌وجو کنید. برای نمونه، با جست‌وجوی واژه envelope آیکون‌های مربوط به ایمیل نمایش داده می‌شن. روی آیکون موردنظرتون بزنید تا همون لحظه وارد نوشته بشه.

در انتخاب‌گر آیکون، فهرست‌های Family و Style برای تغییر خانواده و مدل ظاهری آیکون هستن. اگه از تنظیمات پیش‌فرض رایگان افزونه استفاده می‌کنید، فقط گزینه‌های رایگان در دسترستون قرار می‌گیرن. آیکون‌های پولی به Font Awesome Pro Kit نیاز دارن و برای انجام این آموزش لازم نیستن.

متحرک کردن آیکون داخل ویرایشگر

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

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

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

استفاده درست از آیکون‌های متحرک

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

اگه هدفتون افزودن آیکون شبکه‌های اجتماعی به منوی سایت هست، آموزش افزودن شبکه‌های اجتماعی به منوی وردپرس هم می‌تونه مسیر مناسب‌تری رو نشونتون بده.

تصاویر مربوط به نسخه قدیمی LivIcons

تصاویر زیر رابط و امکانات نسخه قدیمی LivIcons رو نشون می‌دن و برای اجرای روش تازه این آموزش لازم نیستن. اون‌ها رو فقط برای مقایسه با نسخه قدیمی نگه داشتیم.

رفع مشکلات رایج Font Awesome

چرا بلوک Font Awesome Icon دیده نمی‌شه؟

اول بررسی کنید افزونه Font Awesome نصب و فعال باشه. بعد صفحه ویرایش نوشته رو یک‌بار تازه‌سازی کنید و دوباره نام بلوک رو جست‌وجو کنید. طبق اطلاعات فعلی افزونه، پشتیبانی از انتخاب‌گر آیکون در ویرایشگر بلوکی به وردپرس ۵.۸ یا نسخه تازه‌تر نیاز داره.

چرا انتخاب‌گر آیکون باز نمی‌شه؟

اول اتصال اینترنت و کش مرورگر رو بررسی کنید. بعد از مسیر «تنظیمات ← Font Awesome» مطمئن بشید افزونه درست راه‌اندازی شده. اگه افزونه یا قالب دیگه‌ای نسخه متفاوتی از Font Awesome رو بارگذاری می‌کنه، از بخش Troubleshoot افزونه برای پیدا کردن تداخل نسخه‌ها کمک بگیرید.

چرا بعضی آیکون‌ها در فهرست نیستن؟

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

چرا انیمیشن در سایت اجرا نمی‌شه؟

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

جمع‌بندی

پروژه LivIcons Evolution متوقف شده و استفاده از اون برای یک سایت تازه انتخاب مطمئنی نیست. با افزونه رایگان Font Awesome می‌تونید بلوک اختصاصی آیکون رو به نوشته اضافه کنید، آیکون موردنظرتون رو از فهرست تصویری انتخاب کنید و ظاهر یا حرکت اون رو داخل خود ویرایشگر تغییر بدید. برای این روش به شورت‌کد و کدنویسی CSS نیازی ندارید. فقط حرکت‌ها رو کوتاه و هدفمند نگه دارید تا خواندن صفحه سخت نشه.

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

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