پس‌زمینه متحرک در وردپرس می‌تواند به یک بخش معرفی یا صفحهٔ رویداد جلوه بدهد، اما نباید خواندن متن و استفاده از دکمه‌ها را دشوار کند. دو مسیر این راهنما، قابلیت پس‌زمینهٔ ذره‌ای SeedProd و یک نمونهٔ سادهٔ CSS هستند. برای یک تغییر ظاهری کوچک، نیازی به افزودن حرکت به تمام صفحات نیست.
چرا روش قدیمی Particle Background WP تغییر کرد؟
افزونهٔ Particle Background WP که در نسخهٔ قبلی مقاله معرفی شده بود، طبق صفحهٔ رسمی وردپرس از ۲۵ سپتامبر ۲۰۲۴ به درخواست سازنده به‌صورت دائمی بسته شده است. بنابراین نصب آن از مخزن دیگر ممکن نیست و این مقاله آن را به‌عنوان گزینهٔ تازه توصیه نمی‌کند.
اگر از آن استفاده می‌کنید، ابتدا صفحات وابسته و شورت‌کدهای قدیمی را شناسایی کنید. پس‌زمینهٔ جایگزین را روی همان بخش آماده کنید تا پس از حذف وابستگی، متن و ارتفاع صفحه به‌هم نریزد. بسته‌شدن به درخواست سازنده را نباید بدون سند، رخداد امنیتی بنامیم.
روش اول: پس‌زمینه متحرک در وردپرس با SeedProd
معرفی رسمی Particle Backgrounds در SeedProd این قابلیت را برای طرح‌های پولی توضیح می‌دهد. وجود SeedProd Lite به معنی دسترسی به آن نیست. پیش از خرید، امکانات طرح فعلی و نیاز واقعی پروژه را بررسی کنید.
- صفحه یا قالبی را که با SeedProd ساخته‌اید در همان سازنده باز کنید.
- بخش یا Section مورد نظر را انتخاب کنید؛ تنظیم مربوط به یک بخش است.
- به تب Advanced بروید و Particle Background را فعال کنید.
- یک سبک موجود انتخاب و شفافیت، رنگ و جهت را در گزینه‌های قابل‌دسترس تنظیم کنید.
- تعداد و اندازهٔ ذرات را محدود نگه دارید و تعامل با ماوس را فقط در صورت نیاز فعال کنید.
- پیش‌نمایش را ببینید، ذخیره کنید و نتیجهٔ موبایل را بررسی کنید.
این روش، صفحهٔ ساخته‌شده با هر ابزار دیگری را خودکار به SeedProd تبدیل نمی‌کند. برای صفحهٔ Elementor، اول قابلیت‌های همان ابزار را بسنجید؛ اضافه‌کردن سازندهٔ دوم فقط برای یک افکت می‌تواند مدیریت طراحی را پیچیده کند.
روش دوم: یک گرادیان کوتاه با CSS
اگر فقط یک حرکت ملایم رنگ لازم دارید، می‌توانید از CSS استفاده کنید. کلاس hn-soft-bg را به بلوک Group یا سکشن هدف بدهید. کد زیر را در بخش CSS سفارشی سایت یا استایل قالب فرزند قرار دهید؛ نقطهٔ ابتدای نام، فقط در کد CSS نوشته می‌شود.
.hn-soft-bg {
background: linear-gradient(120deg, #191c24, #633417, #191c24);
background-size: 200% 200%;
color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
.hn-soft-bg {
animation: hn-bg-shift 4s ease-out 1;
}
@keyframes hn-bg-shift {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
}این نمونه افکت ذره‌ای نیست و فقط گرادیان را یک‌بار جابه‌جا می‌کند. رنگ‌ها نمونه‌اند؛ لینک، دکمه و متن داخل بخش را با رنگ واقعی برند تنظیم کنید. اجرای کد را به سکشن محدود کنید، نه تمام بدنهٔ سایت.
خوانایی و ترجیح کاهش حرکت
در نمونهٔ CSS، بدون انیمیشن هم پس‌زمینه و متن دیده می‌شوند. تنظیم prefers-reduced-motion ترجیح کاربر برای کاهش حرکت را منعکس می‌کند؛ وقتی این ترجیح فعال باشد، نمونهٔ بالا حرکت نمی‌کند. در افزونهٔ انتخابی هم رفتار واقعی این حالت را بررسی کنید.
حرکت مداوم تزئینی را بی‌دلیل تکرار نکنید. برای افکت‌های طولانی، امکان توقف یا نسخهٔ ثابت در نظر بگیرید. لایهٔ ذرات نباید کلیک روی لینک و فرم را بگیرد یا متن را در بخشی از حرکت کم‌کنتراست کند.
سرعت و خطاهای رایج
تعداد ذرات، اندازهٔ بوم، تعامل ماوس و اسکریپت‌های دیگر بر هزینهٔ پردازش اثر دارند. صرفاً کم‌کردن سرعت حرکت تضمین سبک‌شدن نیست. نمونه را روی گوشی معمولی و هنگام اسکرول آزمایش کنید؛ اجرای روان در رایانهٔ قوی کافی نیست.
اگر افکت دیده نمی‌شود، انتخاب سکشن، اعمال کلاس، کش CSS و تنظیم کاهش حرکت را بررسی کنید. اگر متن یا دکمه ناپدید شده است، ترتیب لایه‌ها و رنگ را اصلاح کنید. برای حل مشکل از قواعد سراسری و نامشخص روی همهٔ عناصر استفاده نکنید.
پس‌زمینهٔ متحرک درمان کندی سایت نیست. اگر بارگذاری محتوای اصلی دیر انجام می‌شود، علت را جداگانه رفع کنید؛ سرگرم‌کردن کاربر با انیمیشن جای اصلاح عملکرد را نمی‌گیرد.
مطالعهٔ مرتبط
بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.
