ساخت اسلایدر ریسپانسیو در وردپرس با افزونه رایگان

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

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

ساخت اسلایدر ریسپانسیو در وردپرس

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

آیا خود وردپرس بلوک اسلایدر داره؟

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

چرا نباید از Responsive jQuery Slider استفاده کنید؟

نسخه قدیمی این مقاله افزونه Responsive jQuery Slider رو پیشنهاد می‌داد، اما این افزونه دیگه انتخاب مناسبی نیست. برای نسخه 1.1.1 و نسخه‌های قدیمی‌تر اون، آسیب‌پذیری امنیتی XSS ذخیره‌شده ثبت شده و نسخه اصلاح‌شده‌ای هم براش معرفی نشده. XSS ذخیره‌شده یعنی ممکنه کد مخرب داخل سایت ذخیره بشه و بعد برای کاربران اجرا بشه. اطلاعات بیشتر درباره این مشکل توی گزارش CVE-2025-22798 اومده.

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

معرفی افزونه رایگان Image Slider Block

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

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

نصب افزونه Image Slider Block

1. از پیشخوان وردپرس وارد بخش «افزونه‌ها ← افزودن افزونه تازه» بشید.
2. عبارت «Image Slider Block» رو توی کادر جست‌وجو بنویسید.
3. نام افزونه و سازنده اون رو با صفحه رسمی افزونه تطبیق بدید تا گزینه اشتباهی رو نصب نکنید.
4. روی «هم‌اکنون نصب نمایید» کلیک کنید و بعد دکمه «فعال نمایید» رو بزنید.

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

آموزش ساخت اسلایدر ریسپانسیو در وردپرس

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

1. نوشته یا برگه‌ای رو باز کنید که می‌خواید اسلایدر توی اون دیده بشه.
2. برای اضافه کردن یک بلوک تازه، روی دکمه «+» کلیک کنید.
3. عبارت «Image Slider» رو جست‌وجو کنید و بلوک افزونه رو بزنید.
4. تصاویر دلخواهتون رو داخل بلوک بارگذاری کنید یا اون‌ها رو از کتابخانه رسانه بردارید.
5. پیش‌نمایش صفحه رو ببینید و جابه‌جایی بین تصاویر رو امتحان کنید.
6. اگه همه‌چیز درست بود، نوشته یا برگه رو منتشر یا به‌روزرسانی کنید.

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

تنظیم و بهینه‌سازی اسلایدر

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

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

برای تصاویر متن جایگزین بنویسید

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

حجم تصاویر رو پایین نگه دارید

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

نمایش اسلایدر رو روی موبایل بررسی کنید

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

جایگزین کردن اسلایدر قدیمی بدون خراب شدن صفحه

1. از سایت و پایگاه داده نسخه پشتیبان بگیرید.
2. صفحه‌هایی رو پیدا کنید که شورت‌کد Responsive jQuery Slider داخلشون هست.
3. افزونه Image Slider Block رو نصب و فعال کنید.
4. توی هر صفحه، بلوک جدید رو اضافه کنید و تصاویر اسلایدر قبلی رو داخلش بذارید.
5. صفحه رو روی موبایل و کامپیوتر ببینید و از نمایش درست اسلایدر مطمئن بشید.
6. شورت‌کد قدیمی رو فقط وقتی پاک کنید که اسلایدر جدید درست کار می‌کنه.
7. بعد از اصلاح همه صفحه‌ها، افزونه Responsive jQuery Slider رو غیرفعال و حذف کنید.

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

جمع‌بندی

خود وردپرس بلوک اختصاصی اسلایدر تصویر نداره، ولی با افزونه رایگان Image Slider Block می‌تونید بدون کدنویسی اسلایدر بسازید. از تصاویر هم‌اندازه و کم‌حجم استفاده کنید، برای هر تصویر متن جایگزین بنویسید و حتماً نتیجه رو روی موبایل هم ببینید. اگه Responsive jQuery Slider هنوز روی سایتتون فعاله، اول نسخه پشتیبان بگیرید و اسلایدرهای جدید رو بسازید؛ بعد می‌تونید افزونه قدیمی رو حذف کنید.

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

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

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