آموزش طراحی سایت و برنامه‌نویسی وب
کاروسل تصویر طاووس؛ افزونه اسلایدر وردپرس سبک و رایگان + آموزش کامل
- کاروسل تصویر طاووس (Tavoos Image Carousel) یک افزونه اسلایدر وردپرس رایگان و متنباز است که مهدی حبیبی، بنیان‌گذار طاووس وب، آن را ساخته است.
- کل CSS و JavaScript آن حدود ۶ کیلوبایت است، به jQuery نیاز ندارد و اسکریپتش فقط در صفحه‌هایی لود میشود که اسلایدر دارند.
- برای هر اسلاید می‌توانید تصویر جدای موبایل و لینک بگذارید و هر تعداد اسلایدر مستقل بسازید.
- اسلایدر را با یک شورتکد در المنتور، گوتنبرگ، ابزارکها یا فایل قالب نمایش می‌دهید.
افزونه اسلایدر وردپرس سبک و رایگان از طاووس وب
بیشتر سایتهای فروشگاهی و شرکتی بالای صفحهٔ اصلی یک اسلایدر دارند؛ بنر تخفیف، معرفی محصول جدید یا پیام اصلی برند. مشکل اینجاست که خیلی از افزونه‌های اسلایدر برای نمایش چند عکس ساده، ده‌ها کیلوبایت اسکریپت و استایل به همهٔ صفحه‌ها اضافه می‌کنند و سایت را کند می‌کنند. کاروسل تصویر طاووس را برای همین ساختیم: یک افزونه اسلایدر وردپرس سبک که فقط کاری را که لازم است انجام می‌دهد و درست انجام می‌دهد.
در این مقاله اول می‌بینید کاروسل تصویر طاووس چه امکاناتی دارد و بعد قدم‌به‌قدم نصب، ساخت اسلایدر، افزودن اسلاید و نمایش آن در سایت را یاد می‌گیرید.
کاروسل تصویر طاووس چیست؟
کاروسل تصویر طاووس (Tavoos Image Carousel) یک افزونه اسلایدر وردپرس رایگان و متنباز برای ساخت اسلایدر تصویر است. آن را مهدی حبیبی، بنیان‌گذار طاووس وب، نوشته و با مجوز GPL-2.0-or-later در گیتهاب منتشر کرده است. نسخهٔ فعلی ۲.۱.۰ است و روی وردپرس ۵.۸ به بالا و PHP ۷.۴ به بالا کار میکند.
[tavoos_slider] است. اگر نسخهٔ قبلی را نصب کرده‌اید، نسخهٔ جدید اسلایدها و تنظیمات را خودکار منتقل میکند.ایدهٔ اصلی افزونه ساده است: هر «اسلایدر» یک جایگاه در سایت است (مثلاً صفحهٔ اصلی یا صفحهٔ فروشگاه) و تنظیمات ظاهری خودش را دارد. «اسلایدها» را هم مثل نوشته‌ها می‌سازید و شما مشخص می‌کنید هر اسلاید در کدام اسلایدر نمایش داده شود. یک اسلاید می‌تواند هم‌زمان در چند اسلایدر باشد.
چرا سبک بودن افزونه اسلایدر وردپرس مهم است؟
اسلایدر معمولاً اولین و بزرگ‌ترین چیزی است که کاربر بالای صفحه می‌بیند. یعنی مستقیم روی معیار 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:
[tavoos_slider id="home"]- المنتور: ابزارک «کد کوتاه» (Shortcode) را در بخش موردنظر بکشید و کد را داخلش بچسبانید.
- ویرایشگر بلوک (گوتنبرگ): بلوک «کد کوتاه» را اضافه کنید.
- ابزارکها: ابزارک «کد کوتاه» یا «متن» در «نمایش ← ابزارکها».
- داخل فایل قالب: با کد PHP زیر.
<?php echo do_shortcode( '[tavoos_slider id="home"]' ); ?>شورتکد اصلی افزونه [tavoos_slider id="نامک"] است. اگر قبلاً نسخهٔ قدیمی (مکس اسلایدر ۱.x یا اسلایدر سپنتا) را داشته‌اید، بعد از نصب نسخهٔ جدید، افزونه اطلاعات را خودکار منتقل میکند و شورت‌کدهای قبلی هم در صفحه‌ها کار می‌کنند:
| شورتکد | کاربرد |
|---|---|
[tavoos_slider id="نامک"] | نمایش اسلایدر با نامک مشخص (شورتکد اصلی) |
[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 نیاز ندارد، اسکریپت فقط در صفحه‌های دارای اسلایدر لود میشود و تصویر اول با اولویت بالا بارگذاری میشود.
هر اسلایدر چند اسلاید می‌تواند داشته باشد؟
هر اسلایدر حداکثر ۳۰ اسلاید را به ترتیب فیلد «ترتیب» نمایش می‌دهد.
کاروسل تصویر طاووس برای سایتهای فارسی مناسب است؟
بله. جهت راستچین بهصورت خودکار تشخیص داده میشود و پنل افزونه ترجمهٔ کامل فارسی دارد.
