افزودن انیمیشن به وردپرس [ آموزش با افرونه + بدون افزونه]

افزودن انیمیشن به وردپرس یکی از راه‌های مؤثر برای جذاب‌تر کردن تجربه‌ کاربری است! بسیاری از کاربران وردپرس برای این کار به افزونه‌ها متوسل می‌شوند؛ و اغلب نیز همیشه نصب افزونه‌های متعدد بهترین راه‌حل است. گاهی ممکن است به دلایل امنیتی، سرعت سایت یا حتی سادگی کار، ترجیح دهید بدون استفاده از افزونه، افکت‌های بصری را به سایت اضافه کنید.

شاید در نگاه اول کمی پیچیده به نظر برسد؛ اما واقعیت این است که با چند تکنیک ساده می‌توانید با استفاده از هر دو روش، انیمیشن‌های زیبا و کاربردی به صفحات وردپرس اضافه کنید. در این مقاله، افزودن انیمیشن‌ به هر دو روش در در وردپرس را بررسی می‌کنیم.

افزودن انیمیشن‌ با افزونه در وردپرس

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

1. ویجت Lottie Animations برای المنتور در ژاکت

ویجت Lottie Animations یکی از حرفه‌ای‌ترین ابزارهای طراحی شده برای المنتور است که به‌طور خاص برای افزودن انیمیشن‌های Lottie بدون نیاز به افزونه‌های جانبی یا کدنویسی توسعه یافته است. تنها با چند کلیک ساده می‌توانید فایل JSON انیمیشن خود را آپلود کرده و آن را در صفحات مختلف استفاده کنید.

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

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

2. افزونه Animate It برای افزودن انیمیشن‌های CSS

افزونه Animate It بر پایه‌ کتابخانه‌ معروف Animate.css ساخته شده است و به کاربران اجازه می‌دهد تا تنها با چند کلیک، افکت‌های مختلفی مانند fade، bounce، zoom، rotate و ده‌ها انیمیشن دیگر را به عناصر دلخواه در صفحات وردپرس اضافه کنند. این ابزار به‌ ویژه برای کسانی مفید است که به دنبال افزودن جذابیت بصری به رابط کاربری خود هستند، بدون آنکه نیازی به یادگیری زبان CSS یا JavaScript داشته باشند. همچنین این افزونه وردپرس در بسیاری از قالب‌ها و صفحه‌سازها به خوبی عمل می‌کند.

Animate It با حجم بسیار کم و استفاده‌ آسان، یک گزینه مناسب برای سایت‌هایی است که به دنبال انیمیشن‌های سبک و سریع هستند. بنابراین شما می‌توانید نحوه فعال‌شدن انیمیشن را مشخص کنید: هنگام لود شدن صفحه، اسکرول، کلیک یا حتی با تأخیر زمانی خاص. یکی دیگر از ویژگی‌های مثبت این افزونه، سازگاری بالای آن با المنتور و ویرایشگر کلاسیک است که باعث می‌شود در طیف وسیعی از پروژه‌ها قابل استفاده باشد. (دانلود مستقیم از سایت وردپرس)

3. افزونه Blocks Animation برای ویرایشگر گوتنبرگ

اگر از گوتنبرگ به عنوان ویرایشگر اصلی وردپرس استفاده می‌کنید، افزونه Blocks Animation می‌تواند به شما کمک کند تا انیمیشن‌هایی حرفه‌ای و جذاب را مستقیما روی هر بلوک محتوا پیاده‌سازی کنید. این افزونه با افزودن یک پنل تنظیمات ساده به رابط گوتنبرگ، امکان انتخاب از میان چندین افکت حرکتی، بدون نیاز به نصب افزونه‌های سنگین یا استفاده از کدهای سفارشی را فراهم می‌سازد. همچنین ویژگی‌هایی مثل تاخیر در اجرا یا زمان‌بندی انیمیشن‌ها نیز در این ابزار گنجانده شده است.

Blocks Animation یک راهکار سبک و مؤثر برای بالا بردن تعامل کاربری در صفحات وردپرسی است. به این ترتیب اگر به دنبال ایجاد حرکات نرم و طبیعی برای جلب توجه کاربران به بخش‌های خاصی از محتوا هستید، این افزونه می‌تواند بدون تأثیر منفی بر سرعت سایت، این هدف را برآورده کند. در ضمن این افزونه کاملا با ساختار گوتنبرگ سازگار است! اگر از سایت آماده وردپرس استفاده می‌کنید و قالب شما از گوتنبرگ پشتیبانی می‌کند، کافی‌ست افزونه Blocks Animation را نصب کرده و جلوه‌های حرکتی را تنها با چند کلیک روی صفحات خود فعال کنید.

در ادامه تعدادی از بهترین سایت آماده موجود در سایت ژاکت را مشاهده می‌کنید: 

روش‌های افزودن انیمیشن بدون افزونه در وردپرس

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

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

استفاده از CSS برای افزودن انیمیشن ساده به وردپرس

یکی از ساده‌ترین و در عین حال مؤثرترین روش‌ها برای افزودن انیمیشن به وردپرس، استفاده از CSS است. اگر قالب وردپرس یا صفحه‌ساز شما اجازه‌ وارد کردن کلاس‌های سفارشی را می‌دهد (که اغلب چنین است)، می‌توانید با چند خط کد CSS، انیمیشن‌هایی مثل محو شدن، حرکت، تغییر رنگ یا بزرگ‌نمایی را به عناصر مختلف اضافه کنید.

این روش نه تنها به هیچ افزونه‌ای نیاز ندارد؛ بلکه کاملا سبک، سریع و قابل کنترل است. بنابراین شما می‌توانید این کدها را در بخش «سفارشی‌سازی CSS» در تنظیمات قالب، یا در بخشAdditional CSS در پنل سفارشی‌سازی وردپرس وارد کنید. حتی اگر با المنتور یا گوتنبرگ کار می‌کنید، اغلب امکان اضافه ‌کردن کلاس به هر المان را دارید با یک مثال ساده درک بهتری از این موضوع پیدا خواهید کرد. فرض کنید می‌خواهید یک دکمه هنگام هاور شدن کمی بزرگ‌تر شود:

.zoom-on-hover {

Transition: all 0.3s ease;

}

.zoom-on-hover:hover {

Transform: scale(1.1);

}

با اضافه کردن کلاسzoom-on-hover  به دکمه یا هر عنصر دلخواه، این افکت به راحتی اعمال می‌شود. ویژگی‌های استفاده از CSS برای انیمیشن عبارتند از:

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

افزودن انیمیشن‌های Lottie با استفاده از کد

Lottie یک کتابخانه‌ متن‌باز است که توسط Airbnb توسعه داده شده و به شما این امکان را می‌دهد که انیمیشن‌های سبک، واکنش‌گرا و حرفه‌ای را به‌سادگی در وب‌سایت‌تان اجرا کنید. این انیمیشن‌ها با استفاده از فایل‌های JSON ساخته می‌شوند که معمولا خروجی آن‌ها از نرم‌افزارهایی مانند Adobe After Effects و افزونه Bodymovin است.

نکته‌ جالب اینجاست که برای استفاده از Lottie، لزوما نیازی به افزونه خاصی ندارید. به این ترتیب شما می‌توانید فایل JSON انیمیشن را در هاست خود آپلود کرده و با چند خط کد HTML و JavaScript در سایت نمایش دهید. این روش به شما کمک می‌کند بدون نصب هیچ افزونه‌ای، انیمیشن‌هایی بسیار حرفه‌ای به صفحات‌ وب‌سایتتان اضافه کنید. نمونه کد ساده برای افزودن Lottie:

<script src=https://unpkg.com/lottie-web@latest/build/player/lottie.min.js></script>

<div id=”lottie” style=”width: 300px; height: 300px;”></div>

<script>

Lottie.loadAnimation({

Container: document.getElementById(‘lottie’),

Renderer: ‘svg’,

Loop: true,

Autoplay: true,

Path: ‘your-animation-file.json’

});

</script>

در این مثال، فایل Lottie با مسیر your-animation-file.json بارگذاری می‌شود. پس شما می‌توانید این فایل را در هاست خود آپلود کرده و مسیر آن را در کد وارد کنید. در برخی قالب‌ها، لازم است فرمت JSON را به لیست فرمت‌های مجاز وردپرس اضافه کنید تا بتوانید آن را بارگذاری نمایید. ویژگی‌های استفاده از Lottie با کدنویسی به شرح زیر است:

• اجرای انیمیشن‌های حرفه‌ای و سبک با کیفیت بالا
• بدون نیاز به افزونه یا کتابخانه سنگین
• سازگار با موبایل و دستگاه‌های مختلف (Responsive)
• مناسب برای رابط‌های کاربری مدرن و مینیمال
• کنترل دقیق روی نحوه‌ اجرای انیمیشن (لوپ، توقف، تعامل کاربر)

افزودن انیمیشن‌های Lottie در المنتور بدون افزونه

در طراحی مدرن سایت، استفاده از انیمیشن‌های سبک و واکنش‌گرا به‌ویژه Lottie، به یکی از بهترین راه‌ها برای جلب توجه کاربر تبدیل شده است. اگرچه افزونه‌های زیادی برای افزودن انیمیشن به المنتور طراحی شده‌اند؛ اما گاهی اوقات باید بدون وابستگی به افزونه‌های اضافی، کار را پیش ببرید؛ به خصوص اگر دغدغه‌ سبک نگه داشتن سایت و بهینه‌سازی سرعت دارید!

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

استفاده از المنتور برای افزودن انیمیشن به وردپرس

ویجت HTML در المنتور شاید در نگاه اول برای افزودن انیمیشن به وردپرس خیلی ساده به نظر برسد؛ اما همین ویجت می‌تواند ابزار بسیار قدرتمندی برای افزودن انیمیشن‌ها باشد. بنابراین شما می‌توانید کدهای جاوااسکریپت موردنیاز برای اجرای Lottie را مستقیما در این ویجت قرار دهید و آن را با هر بخش از سایت مثل هدر، دکمه، اسلایدر یا حتی بک‌گراند هماهنگ کنید:

برای شروع، کافیست فایل Lottie خود را (با فرمت JSON) در وردپرس آپلود کنید. سپس در المنتور، ویجت HTML را به صفحه بکشید و کدی مشابه زیر را وارد کنید:

<script src=https://unpkg.com/lottie-web@latest/build/player/lottie.min.js></script>

<div id=”myLottie” style=”width:200px;height:200px;”></div>

<script>

Lottie.loadAnimation({

Container: document.getElementById(‘myLottie’),

Renderer: ‘svg’,

Loop: true,

Autoplay: true,

Path: ‘YOUR_FILE_PATH.json’

});

</script>

به همین سادگی، انیمیشن شما در المنتور بدون افزونه روی سایت اجرا می‌شود.

نحوه بارگذاری و استفاده از فایل‌های Lottie در المنتور

وردپرس به‌طور پیش‌فرض فرمت JSON را نمی‌پذیرد؛ اما می‌توانید این محدودیت را با یک قطعه کد ساده در فایل functions.php قالب یا از طریق افزونه‌های کدنویسی برطرف کنید:

Function allow_json_uploads($mimes) {

$mimes[‘json’] = ‘application/json’;

Return $mimes;

}

Add_filter(‘upload_mimes’, ‘allow_json_uploads’);

بعد از اضافه کردن این کد، می‌توانید فایل‌های انیمیشن Lottie را از مسیر رسانه  به افزودن بارگذاری کرده و URL آن را کپی کنید.

پس از اینکه فایل بارگذاری شد، کافیست مسیر آن را در بخش path: از کد Lottie وارد کنید. شما حتی می‌توانید چند ویجت HTML بسازید و برای هرکدام، انیمیشن متفاوتی تنظیم کنید. این ویژگی برای طراحی صفحه‌های لندینگ خلاقانه یا نمایش روندها و فرایندها بسیار کاربردی است.

نکات مهم در استفاده از انیمیشن‌های Lottie برای بهینه‌سازی عملکرد سایت

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

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

سخن پایانی

افزودن انیمیشن به وردپرس بدون افزونه، فرصتی عالی برای سبک نگه ‌داشتن سایت و داشتن کنترل بیشتر روی طراحی است. با استفاده از CSS یا کدهای Lottie می‌توان جلوه‌هایی جذاب و حرفه‌ای ایجاد کرد، بدون اینکه نیاز به نصب ابزارهای اضافی باشد.

البته برای کسانی که به دنبال راحتی و زمان‌بندی سریع‌تر هستند، استفاده از ابزارهایی مثل ویجت Lottie در المنتور یا افزونه Animate It گزینه‌ای مناسب و کاربردی است. البته هر روش مزایا و محدودیت‌های خاص خودش را دارد؛ بنابراین انتخاب یکی از آن‌ها بسته به سطح مهارت و نوع پروژه شما است! اگر در انتخاب روش مناسب تردید دارید، از سبک‌ترها شروع کنید و به تدریج سراغ گزینه‌های پیشرفته‌تر بروید.