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

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

المنتور، به‌عنوان یکی از محبوب‌ترین صفحه‌سازهای وردپرس، ابزارهای خیلی خوبی برای طراحی اسلایدر در اختیارت می‌ذاره. البته اگه بخوای حرفه‌ای‌تر کار کنی، می‌تونی از افزونه‌های مخصوص اسلایدر مثل Smart Slider 3 یا Slider Revolution هم استفاده کنی تا کنترل کامل روی ظاهر، انیمیشن‌ها و افکت‌ها داشته باشی.

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

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

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

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

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

انتخاب نوع اسلایدر

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

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

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

اضافه کردن تصاویر در المنتور

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

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

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

نکات مهم درباره اندازه و نسبت تصاویر برای اسلایدر در وردپرس

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

پس بهتره وقتی این گزینه فعال نیست یا کیفیت تصویر برات مهمه، همه عکس‌هایی که آپلود می‌کنی دقیقاً هم‌ارتفاع باشن و نسبت عرض به ارتفاع (Aspect Ratio) یکسان باشه تا اسلایدر یکنواخت بمونه. به طور عملی ارتفاع بین ۳۵۰ تا ۴۰۰ پیکسل معمولاً برای اسلایدرهای استاندارد صفحه کفایت می‌کنه و کار خوبیه که برای عرض از تصاویر با عرض مناسب صفحه استفاده کنی، مثلا تصاویر ساخته‌شده با عرضی بین ۱۲۰۰ تا ۱۹۲۰ پیکسل و ارتفاع ۳۵۰ تا ۴۰۰ پیکسل چشم‌نواز و ثابت در بیشتر قالب‌ها ظاهر می‌شن.

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

از طرف دیگه عکس‌ها رو پیش از آپلود فشرده کن تا سرعت صفحه لطمه نخوره، برای رزولوشن بالا نسخه retina هم در نظر بگیر (نسخه 2× برای نمایشگرهای با DPI بالا) و حتماً هر تصویر رو با تگ alt و عنوان مناسب ذخیره کن تا برای سئو هم مفید باشه. در نهایت وقتی تغییراتت رو انجام دادی ذخیره و به‌روزرسانی کن و اگه خواستی تصویری رو حذف کنی روی گزینه حذف کلیک کن تا از رسانه پاک بشه و فضای سایت نظم بمونه.

مدل‌های مختلف ساخت اسلایدر در وردپرس

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

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

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

اضافه کردن متا اسلایدر

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

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

به همین سادگی! حالا اگه صفحه رو ذخیره و به‌روزرسانی کنی، اسلایدری که ساختی همون‌جا نمایش داده می‌شه. اگر خواستی بعداً چیزی در ظاهر یا عملکردش تغییر بدی، فقط کافیه به بخش MetaSlider توی پیشخوان وردپرس برگردی و همون اسلایدر رو ویرایش کنی. تنظیماتش مثل نوع اسلایدر (Flex Slider، R. Slider، Nivo Slider و…) همونجا قرار دارن. معمولاً Flex Slider بهترین گزینه‌ست چون هم سبک‌تره، هم با اکثر قالب‌ها سازگاری داره و هم ریسپانسیوه.

در کل با این روش، بدون هیچ دردسری می‌تونی اسلایدر ساخته‌شده با افزونه‌ات رو داخل المنتور نمایش بدی و همه‌چیز رو کاملاً تحت کنترل خودت داشته باشی.

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

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

نکته‌ای که باید حتماً حواست باشه اینه که Slider Revolution یه افزونه پولیه و نسخه رایگانش معمولاً نسخه اصلی و ایمن نیست. استفاده از نسخه‌های کرک‌شده یا نال‌شده هم واقعاً ریسک داره چون می‌تونن کدهای مخرب یا فایل‌های آلوده داشته باشن و امنیت سایتت رو به خطر بندازن. پس اگه خواستی ازش استفاده کنی، حتماً باید نسخه‌ی اورجینال رو از سایت اصلی خودش بخری. قیمت نسخه‌های مختلفش بین حدود ۲۹ تا ۴۹ دلار متغیره، و با توجه به امکانات و آپدیت‌هایی که ارائه می‌ده، هزینه‌ش برای سایت‌های حرفه‌ای منطقیه.

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

بهترین انتخاب چیه؟

دو راه اصلی دارین، اولی استفاده از المنتور که پیشنهاد خودمِ چون سبک، سریع و کافی برای بیشتر نیازهاست، دومی استفاده از افزونه‌هایی مثل MetaSlider وقتی المنتور ندارید یا لازم دارین اسلایدر رو جداگانه مدیریت کنین. اما یه دسته دیگه هم هستن، افزونه‌های پولی و حرفه‌ای مثل Slider Revolution یا LayerSlider که امکانات بصریِ فوق‌العاده و افکت‌های خیلی پیچیده می‌دن، چیزایی مثل بارش ذرات، لایه‌های متحرک، انیمیشن‌های زمان‌بندی‌شده و افکت‌های ورود و خروج که توی پروژه‌های خیلی خاص و نمایش‌های هِرو یا کمپین‌های تبلیغاتی لازمن.

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

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

نکات مهم

وقتی تصمیم می‌گیرین افزونه پولی بخرین، حواستون به چند چیز باشه: اول اینکه نسخه اورجینال رو از سایت سازنده یا مارکت معتبر بخرین و کلید لایسنس رو فعال کنین تا آپدیت‌ها و پشتیبانی برسن، قیمت‌های معمول برای این افزونه‌ها معمولاً توی بازه‌ی حدود ۲۹ تا ۴۹ دلار برای یک سایت هست اما بسته به پکیج و فروشنده ممکنه متغیر باشه.

دوم اینکه قبل از نصب توی محیط staging یا نسخه آزمایشی سایت نصب و تست کنین تا با قالب و پلاگین‌هاتون تداخل نداشته باشه و در صورت مشکل بتونین راحت برگردونین. از منظر پرفورمنس، همیشه تصاویر رو بهینه کنین، از lazy loading استفاده کنین، اسکریپت‌ها و استایل‌های اضافی رو در صورت امکان defer یا async کنین و از CDN برای فایل‌های بزرگ کمک بگیرین چرا که اسلایدرهای سنگین بدون این بهینه‌سازی‌ها سرعت صفحه رو به‌طرز محسوس پایین میارن.

همچنین حتماً تنظیمات ریسپانسیو رو به‌درستی پیکربندی کنین چون اسلایدر روی موبایل باید کاربرپسند و سریع باشه؛ از حالت‌های لمسی و swipe پشتیبانی کنه، ارتفاع مناسبی داشته باشه و در موبایل ممکنه لازم باشه برخی افکت‌ها غیرفعال بشن.

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

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

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

جمع‌بندی

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

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

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

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...