آموزش طراحی سایت و برنامهنویسی وب
مکس اسلایدر؛ افزونه اسلایدر وردپرس سبک و رایگان + آموزش کامل
- مکس اسلایدر (Max Slider) یک افزونه اسلایدر وردپرس رایگان و متنباز است که مهدی حبیبی، بنیانگذار طاووس وب، آن را ساخته است.
- کل CSS و JavaScript آن حدود ۶ کیلوبایت است، به jQuery نیاز ندارد و اسکریپتش فقط در صفحههایی لود میشود که اسلایدر دارند.
- برای هر اسلاید میتوانید تصویر جدای موبایل و لینک بگذارید و هر تعداد اسلایدر مستقل بسازید.
- اسلایدر با یک شورتکد در المنتور، گوتنبرگ، ابزارکها یا فایل قالب نمایش داده میشود.
بیشتر سایتهای فروشگاهی و شرکتی بالای صفحهٔ اصلی یک اسلایدر دارند؛ بنر تخفیف، معرفی محصول جدید یا پیام اصلی برند. مشکل اینجاست که خیلی از افزونههای اسلایدر برای نمایش چند عکس ساده، دهها کیلوبایت اسکریپت و استایل به همهٔ صفحهها اضافه میکنند و سایت را کند میکنند. مکس اسلایدر را برای همین ساختیم: یک افزونه اسلایدر وردپرس سبک که فقط کاری را که لازم است انجام میدهد و درست انجام میدهد.
در این مقاله اول میبینید مکس اسلایدر چه امکاناتی دارد و بعد قدمبهقدم نصب، ساخت اسلایدر، افزودن اسلاید و نمایش آن در سایت را یاد میگیرید.
مکس اسلایدر چیست؟
مکس اسلایدر (Max Slider) یک افزونه اسلایدر وردپرس رایگان و متنباز برای ساخت اسلایدر تصویر است. آن را مهدی حبیبی، بنیانگذار طاووس وب، نوشته و با مجوز GPL-2.0-or-later در گیتهاب منتشر کرده است. نسخهٔ فعلی ۱.۰.۱ است و روی وردپرس ۵.۸ به بالا و PHP ۷.۴ به بالا کار میکند.
ایدهٔ اصلی افزونه ساده است: هر «اسلایدر» یک جایگاه در سایت است (مثلاً صفحهٔ اصلی یا صفحهٔ فروشگاه) و تنظیمات ظاهری خودش را دارد. «اسلایدها» هم مثل نوشتهها ساخته میشوند و شما مشخص میکنید هر اسلاید در کدام اسلایدر نمایش داده شود. یک اسلاید میتواند همزمان در چند اسلایدر باشد.
چرا سبک بودن افزونه اسلایدر وردپرس مهم است؟
اسلایدر معمولاً اولین و بزرگترین چیزی است که کاربر بالای صفحه میبیند. یعنی مستقیم روی معیار LCP (زمان نمایش بزرگترین بخش صفحه) در Core Web Vitals گوگل اثر میگذارد. اگر افزونهٔ اسلایدر سنگین باشد یا تصویر اول را دیر لود کند، هم کاربر منتظر میماند و هم نمرهٔ سرعت سایت پایین میآید.
مکس اسلایدر برای این مشکل سه کار انجام میدهد:
- تصویر اسلاید اول با
fetchpriority="high"و بقیه با اولویت پایین لود میشوند؛ مرورگر اول همان تصویری را میگیرد که کاربر میبیند. - فایل JavaScript فقط در صفحههایی بارگذاری میشود که واقعاً اسلایدر دارند.
- کل CSS و JavaScript افزونه حدود ۶ کیلوبایت است (فشردهشده حدود ۲.۵ کیلوبایت) و به jQuery یا هیچ کتابخانهٔ دیگری وابسته نیست.
اگر سایتتان کند است، اسلایدر فقط یکی از عاملهاست؛ بقیهٔ عاملها را در راهنمای جامع بهینهسازی سرعت وردپرس توضیح دادهایم.
امکانات مکس اسلایدر
برای صفحهٔ اصلی، فروشگاه و بنر تبلیغاتی، هر کدام یک اسلایدر با تنظیمات جدا.
برای هر اسلاید یک تصویر عمودی یا مربعی مخصوص موبایل بگذارید تا متن بنر در گوشی ریز نشود.
نسبت دسکتاپ (مثل ۱۶۰۰×۵۶۰) و موبایل (مثل مربع یا ۴:۵) را جدا انتخاب کنید.
داخل کادر، عریض (۱۴۴۰ پیکسل) و تمام عرض صفحه.
لغزش (Slide) و محو شدن (Fade)، با پخش خودکار و مدت نمایش قابل تنظیم.
جهت حرکت، فلشها، کشیدن با انگشت و کلیدهای کیبورد با جهت صفحه هماهنگ میشوند.
کشیدن با انگشت، کنترل با کیبورد، برچسبهای ARIA و احترام به تنظیم «کاهش حرکت» سیستمعامل.
روی هاور ماوس، فوکوس کیبورد و وقتی تب مرورگر باز نیست، پخش خودکار متوقف میشود.
روی سایت فارسی، پنل افزونه خودکار فارسی میشود. JPG، PNG، WEBP و GIF متحرک پشتیبانی میشوند.
نصب افزونه اسلایدر وردپرس مکس اسلایدر
- دانلود فایل افزونهفایل افزونه را از لینک دانلود مستقیم طاووس وب دانلود کنید. فایل zip را باز نکنید.
- بارگذاری در وردپرسدر پیشخوان به «افزونهها ← افزودن افزونه ← بارگذاری افزونه» بروید و فایل zip را انتخاب کنید.
- نصب و فعالسازیروی «هماکنون نصب کن» و بعد «فعالسازی» بزنید.
- منوی جدیدمنوی «اسلایدرها» به پیشخوان اضافه میشود. در صفحهٔ افزونهها هم کنار نام مکس اسلایدر لینک «مدیریت اسلایدرها» را میبینید.
تصویرهای این آموزش از پیشخوان انگلیسی گرفته شدهاند. اگر زبان سایت شما فارسی باشد، همهٔ برچسبها و منوهای افزونه فارسی نمایش داده میشوند.
مرحله ۱: ساخت اسلایدر
به «اسلایدرها ← مدیریت اسلایدرها» بروید. در فرم «ساخت اسلایدر جدید» یک نام وارد کنید، مثلاً «اسلایدر صفحه اصلی». نامک (Slug) شناسهای است که در شورتکد استفاده میشود؛ اگر خالی بماند، وردپرس از روی نام میسازدش. پیشنهاد ما یک نامک کوتاه انگلیسی مثل home یا shop-banner است.
تنظیمات ظاهری را همینجا انتخاب کنید و روی دکمهٔ ساخت بزنید. در جدول کنار فرم، ستون کد نمایش شورتکد آمادهٔ هر اسلایدر را نشان میدهد.
مرحله ۲: تنظیمات اسلایدر
برای تغییر تنظیمات بعداً، روی نام اسلایدر کلیک کنید. شورتکد اسلایدر بالای همین صفحه هم نوشته شده است. این تنظیمات برای هر اسلایدر جداست:
| تنظیم | گزینهها | پیشفرض |
|---|---|---|
| چیدمان | داخل کادر، عریض (۱۴۴۰px)، تمام عرض | داخل کادر |
| نسبت ابعاد دسکتاپ | ۱۶۰۰×۵۶۰، ۱۹۲۰×۶۰۰، ۱۶:۹، ۱۲۰۰×۴۰۰، ۱۲۰۰×۲۵۰، ۴:۳، مربع | ۱۶۰۰×۵۶۰ |
| نسبت ابعاد موبایل | مربع، عمودی ۴:۵، ۱۶:۹، مثل دسکتاپ | مربع |
| مدت نمایش هر اسلاید | ۱ تا ۳۰ ثانیه | ۵ ثانیه |
| پخش خودکار | فعال، غیرفعال | فعال |
| افکت | لغزش، محو شدن | لغزش |
| گردی گوشهها | ۰ تا ۶۰ پیکسل | ۲۸ |
| فلشها و نقطهها | نمایش، مخفی | نمایش |
| سایه | دارد، ندارد | دارد |
| فاصله از بالا و پایین | ۰ تا ۱۲۰ پیکسل | ۰ |
| رنگ اصلی | هر رنگ (نقطهٔ فعال و هاور فلشها) | #f5b301 |
مرحله ۳: افزودن اسلاید
به «اسلایدرها ← افزودن اسلاید» بروید و این بخشها را پر کنید:
- عنوان: فقط برای مدیریت است و بهعنوان متن جایگزین (alt) تصویر هم استفاده میشود؛ پس یک عنوان توصیفی بنویسید، مثل «تخفیف پاییزه لوازم خانگی».
- تصویر اسلاید (دسکتاپ): از کادر «تصویر اسلاید» کنار صفحه انتخاب میشود. اسلاید بدون این تصویر نمایش داده نمیشود.
- تصویر موبایل (اختیاری): با دکمهٔ «انتخاب تصویر موبایل». اگر خالی بماند، همان تصویر دسکتاپ در موبایل هم نمایش داده میشود.
- لینک اسلاید (اختیاری): آدرسی که با کلیک روی اسلاید باز میشود.
- اسلایدرها (جایگاهها): تیک اسلایدری را بزنید که این اسلاید باید در آن باشد. میتوانید چند اسلایدر را تیک بزنید.
- ترتیب: در کادر «ویژگیها»، عدد کمتر یعنی اسلاید جلوتر نمایش داده میشود.
بعد از انتشار، همهٔ اسلایدها را با پیشنمایش تصویر، اسلایدر و ترتیب در «اسلایدرها ← همه اسلایدها» میبینید. هر اسلایدر حداکثر ۳۰ اسلاید نمایش میدهد.
مرحله ۴: نمایش اسلایدر در سایت
مهمترین مزیت یک افزونه اسلایدر وردپرس مبتنی بر شورتکد این است که به قالب یا صفحهساز خاصی وابسته نیست. شورتکد اسلایدر را از ستون «کد نمایش» کپی کنید و هر جا که میخواهید بگذارید. برای اسلایدری با نامک home:
[sp_slider id="home"]- المنتور: ابزارک «کد کوتاه» (Shortcode) را در بخش موردنظر بکشید و کد را داخلش بچسبانید.
- ویرایشگر بلوک (گوتنبرگ): بلوک «کد کوتاه» را اضافه کنید.
- ابزارکها: ابزارک «کد کوتاه» یا «متن» در «نمایش ← ابزارکها».
- داخل فایل قالب: با کد PHP زیر.
<?php echo do_shortcode( '[sp_slider id="home"]' ); ?>سه شورتکد در دسترس است:
| شورتکد | کاربرد |
|---|---|
[sp_slider id="نامک"] | نمایش اسلایدر با نامک مشخص |
[max_slider id="نامک"] | نام دیگر همان شورتکد |
[sp_home_slider] | نمایش اسلایدری که نامکش home است |
ابعاد پیشنهادی تصاویر
| کاربرد | دسکتاپ | موبایل |
|---|---|---|
| بنر اصلی صفحه (داخل کادر) | ۱۶۰۰×۵۶۰ | ۸۰۰×۸۰۰ |
| اسلایدر تمام عرض | ۱۹۲۰×۶۰۰ | ۸۰۰×۱۰۰۰ |
| بنر باریک تبلیغاتی | ۱۲۰۰×۲۵۰ | ۸۰۰×۸۰۰ |
در هر افزونه اسلایدر وردپرس، کیفیت نهایی به تصویرها بستگی دارد. در مکس اسلایدر تصویر بهصورت cover در کادر قرار میگیرد؛ یعنی اگر نسبت عکس با نسبت اسلایدر فرق داشته باشد، لبههایش بریده میشود. متن و دکمههای مهم بنر را از لبهها دور نگه دارید و برای سرعت بهتر، تصویرها را با فرمت WEBP و حجم کمتر از ۲۰۰ کیلوبایت آپلود کنید.
سفارشیسازی ظاهر افزونه اسلایدر وردپرس با CSS
اگر تنظیمات پنل کافی نبود، ظاهر اسلایدر را با CSS تغییر دهید. کلاسهای اصلی .sp-slider، .sp-slide، .sp-slider__nav و .sp-slider__dots هستند. هر اسلایدر کلاس چیدمان (sp-slider--boxed، --wide یا --full) و کلاس افکت (sp-slider--slide یا --fade) هم دارد. متغیرهای CSS اینها هستند:
/* گوشههای صاف و رنگ اصلی بنفش فقط برای اسلایدرهای تمام عرض */
.sp-slider--full {
--sp-radius: 0px; /* گردی گوشهها */
--sp-gap: 24px; /* فاصله از بالا و پایین */
--sp-accent: #5f01af; /* رنگ نقطهٔ فعال و هاور فلشها */
}
/* نسبت ابعاد: --sp-rd برای دسکتاپ و --sp-rm برای موبایل */
.sp-slider--boxed { --sp-rd: 16/9; }اگر اسلایدر را بعد از لود صفحه با AJAX اضافه میکنید (مثلاً داخل یک پاپآپ)، بعد از اضافه شدن محتوا این تابع را صدا بزنید تا اسلایدر فعال شود:
window.maxSliderInit();رفع مشکلات رایج افزونه اسلایدر وردپرس
بیشتر مشکلاتی که با یک افزونه اسلایدر وردپرس پیش میآید، به تنظیمات اسلاید یا کش سایت برمیگردد.
اسلایدر نمایش داده نمیشود: نامک داخل شورتکد را با ستون «کد نمایش» مقایسه کنید. اسلایدها باید منتشر شده باشند، تصویر اسلاید داشته باشند و تیک همان اسلایدر در کادر «اسلایدرها (جایگاهها)» زده شده باشد. اگر افزونهٔ کش دارید، کش را پاک کنید.
چیدمان تمام عرض اسکرول افقی میسازد: در بعضی قالبها عرض نوار اسکرول باعث این مشکل میشود. به بخش والد اسلایدر (مثلاً بخش المنتور) overflow-x: hidden بدهید یا از چیدمان «عریض» استفاده کنید.
فلشها و پخش خودکار کار نمیکنند: این امکانات فقط وقتی فعال میشوند که اسلایدر حداقل دو اسلاید با تصویر داشته باشد.
اگر مشکل دیگری دیدید یا پیشنهادی دارید، آن را در بخش Issues گیتهاب مطرح کنید.
افزونههای رایگان دیگر طاووس وب را در صفحهٔ افزونههای رایگان وردپرس ببینید.
اسلایدر فقط شروع کار استاگر سایتی میخواهید که هم سریع باشد و هم بنرهایش در موبایل درست دیده شوند، طاووس وب سایت فروشگاهی و شرکتی شما را از صفر طراحی میکند.
مشاورهٔ رایگان طراحی سایتسؤالات متداول مکس اسلایدر
مکس اسلایدر رایگان است؟
بله. این افزونه اسلایدر وردپرس کاملاً رایگان و متنباز است و با مجوز GPL-2.0-or-later در گیتهاب منتشر شده است.
مکس اسلایدر را از کجا دانلود کنم؟
آخرین نسخه را مستقیم از سرور طاووس وب دانلود کنید؛ لینک آن در کادر دانلود بالای همین صفحه است.
مکس اسلایدر با المنتور کار میکند؟
بله. کافی است ابزارک «کد کوتاه» المنتور را بکشید و شورتکد اسلایدر را داخلش بگذارید. با گوتنبرگ، ابزارکها و فایلهای قالب هم کار میکند.
میشود برای موبایل تصویر جدا گذاشت؟
بله. هر اسلاید یک فیلد اختیاری «تصویر موبایل» دارد و نسبت ابعاد موبایل هم در تنظیمات هر اسلایدر جدا انتخاب میشود.
مکس اسلایدر سایت را کند میکند؟
خیر. کل CSS و JavaScript افزونه حدود ۶ کیلوبایت است، به jQuery نیاز ندارد، اسکریپت فقط در صفحههای دارای اسلایدر لود میشود و تصویر اول با اولویت بالا بارگذاری میشود.
هر اسلایدر چند اسلاید میتواند داشته باشد؟
هر اسلایدر حداکثر ۳۰ اسلاید را به ترتیب فیلد «ترتیب» نمایش میدهد.
مکس اسلایدر برای سایتهای فارسی مناسب است؟
بله. جهت راستچین بهصورت خودکار تشخیص داده میشود و پنل افزونه ترجمهٔ کامل فارسی دارد.
