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

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

آموزش قبلی این صفحه بر پایه Cyclone Slider بود؛ افزونه‌ای که دیگه گزینه امن و مناسبی برای نصب تازه نیست. برای همین، آموزش رو با یک افزونه رایگان و در دسترس در مخزن رسمی وردپرس بازنویسی کردیم. در ادامه، علاوه بر مراحل اصلی، کار با بلوک MetaSlider و شورت‌کد رو یاد می‌گیرید و چند نکته کاربردی برای سبک نگه داشتن اسلایدر هم می‌بینید.

چرا دیگه نباید از Cyclone Slider استفاده کنید؟

Cyclone Slider از مخزن رسمی وردپرس حذف شده و برای نسخه ۳.۲.۰ اون یک مشکل امنیتی جدی و بدون اصلاح شناخته‌شده گزارش شده. جزئیات این مشکل توی گزارش امنیتی Wordfence اومده. پس اگه هنوز این افزونه روی سایتتون نصبه، بهتره دیگه اسلایدر تازه‌ای باهاش نسازید.

قبل از حذف افزونه، حتماً از فایل‌ها و پایگاه داده سایتتون نسخه پشتیبان بگیرید. بعد صفحه‌هایی رو پیدا کنید که شورت‌کد Cyclone Slider داخلشون هست، اسلایدرهای موردنیاز رو با ابزار جایگزین بسازید و شورت‌کدهای قدیمی رو عوض کنید. شورت‌کد همون متن کوتاه داخل کروشه، مثل [metaslider id="123"]، هست که خروجی افزونه رو داخل محتوای صفحه نشون می‌ده.

نصب افزونه رایگان MetaSlider

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

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

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

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

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

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

تنظیم ظاهر و سرعت اسلایدر

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

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

نمایش اسلایدر در برگه یا نوشته

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

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

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

نکات مهم برای سرعت و نمایش بهتر

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

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

جمع‌بندی

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

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

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

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

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