ساخت اسلایدر وردپرس توسط افزونه Owl Carousel + فیلم آموزشی

بدون شک یکی از بهترین افزونه ها برای ساخت اسلایدر در سایت وردپرسی افزونه Owl Carousel (اسلایدر چرخ و فلک) میباشد که هم میتوان از افزونه جی کوئری اسلایدشو و هم از افزونه وردپرس آن استفاده کرد. در این مقاله از ایران تمز به آموزش ساخت اسلایدر وردپرس توسط افزونه Owl Carousel میپردازیم تا بتوانید انواع اسلایدرهای حرفه ای تصویری یا متنی و یا اسلایدر مطالب وردپرس را در هنگام طراحی قالب وردپرس در پوسته بسازید، پس تا انتها همراه ما باشید.

ساخت اسلایدر وردپرس توسط افزونه Owl Carousel + فیلم آموزشی

ساخت اسلایدر وردپرس با Owl Carousel

افزونه Owl Carousel به قدری قدرتمند است که میتوان انواع اسلایدرها را براحتی توسط آن ایجاد کرد.
برای دانلود افزونه وردپرس اسلایدشو به برگه آن در مخزن افزونه های وردپرس در آدرس owl carousel wordpress plugin و برای دانلود سخه جی کوئری افزونه به صفحه آن در گیت هاب به آدرس owl carousel github مراجعه کنید.

برخی از مزایای افزونه Owl Carousel عبارتند از:

  1. کدنویسی استاندارد و معتبر html و css
  2. طراحی واکنشگرا یا ریسپانسیو با قابلیت تعیین تعداد اسلاید در ابعاد مختلف صفحه نمایش
  3. پیاده سازی راحت با کوئری های وردپرس
  4. قابلیت ساخت اسلایدر متنی و تصویری
  5. پشتیبانی از فیلم و ویدیو در اسلایدر برای ساخت اسلایدشو فیلم
  6. امکان نمایش چندین اسلاید به شکل همزمان
  7. قابلیت ساخت اسلایدر تصویری تمام صفحه همراه با متن و توضیحات
  8. دارای کلیدهای اسلاید قبلی و بعدی
  9. امکان فعال یا غیرفعال کردن دکمه های اسلایدر قبلی و بعدی
  10. دارای افکتهای متفاوت تعویض اسلاید
  11. قابلیت نمایش صفحه بندی و تعداد اسلایدها
  12. پشتیبانی از lazy load لیزی لود تصاویر
  13. قابلیت ساخت دکمه حرکت و ایست play and stop اسلایدر
  14. و …

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

ساخت اسلایدر وردپرس با Owl Carousel

ساخت اسلایدر در قالب وردپرس با افزونه جی کوئری Owl Carousel

تقریبا در تمام پروژه های طراحی پوسته وردپرس از افزونه جی کوئری Owl Carousel استفاده میکنم.
برای سازگاری افزونه جی کوئری اسلایدر با وردپرس تنها باید از کوئری استفاده کرد. به عنون مثال برای ساخت اسلایدر وردپرس نمایش محصولات پر فروش ووکامرس یا edd باید دستورات و کدهای افزونه را در کوئری آن ادغام کرد و براحتی یک افزونه حرفه ای ساخت. برای آموزش راه اندازی افزونه جی کوئری ساخت اسلایدر وردپرس owl فیلم زیر را مشاهده کنید. از طریق این لینک اسلایدر و فایلهای استفاده شده در آموزش را دانلود کنید.

آموزش ساخت اسلایدر وردپرس توسط افزونه جی کوئری owl در همینجا به پایان میرسد چنانچه سوالی دارید در بخش دیدگاه های همین مطلب مطرح کنید.

دانلود فیلم آموزشی

درباره نویسنده
رضا کیانوش

رضا کیانوش هستم مدیر ایران تمز، لیسانس فناوری اطلاعات و ارتباطات در گرایش کاربردهای ict دارم. حدود 7 سالی هست که با وردپرس آشنا شدم و خدمات طراحی قالب وردپرس، سئو و بهینه سازی سایت رو انجام میدم. ایران تمز رو برای ارائه آموزشهای تخصصی و انتشار پوسته های وردپرسی که طراحی میکنیم راه اندازی کردم. اگر نیاز به طراحی قالب وردپرس اختصاصی دارید ما در ایران تمز اینکار رو با بهترین کیفیت براتون انجام میدیم.

بازدیدکنندگان قبلی مشاهده مطالب زیر را به شما پیشنهاد کرده اند

دیدگاهی بنویسید.

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

  1. محمد :
    ۱۹ دی ۹۶

    درود دمت گرم داش آموزش خوبی بود. فقط یه سوال داشتم من زمانی که اسلایدر رو روبه راه می کنم بار اول که نمایش داده میشه اسلایدر به هم ریختس اما زمانی که صفحه رو رفرش می کنم درست میشه به نظرت مشکل از کجاست؟

    • رضا کیانوش :
      ۱۹ دی ۹۶

      سلام، خوشحالم آموزش مورد پسندتون بوده. احتمالا به خاطر فراخوانی فایلهای js هست که چنین مشکلی براتون بوجود اومده. فایل کتابخانه جی کوئری رو در هدر و اسلایدر رو در فوتر فراخوانی کنید.

      • محمد :
        ۱۹ دی ۹۶

        درست گفتید مرسی. کارمون با تغییر false به true حل شد. اصلا حواسم نبود :خخخ

        • رضا کیانوش :
          ۱۹ دی ۹۶

          خوشحالم مشکل حل شده. موفق باشید

  2. سامان :
    ۰۷ اسفند ۹۶

    ممنون بابت آموزش بی نظیرتون فقط یه سوال اگر بخواییم به طور مثال ایتم شماره ۱ عوض اینکه از سمت چپ شروع شه بیاد سمت راست و اسکرول به سمت راست باشه باید چیکار کنیم؟ ممنون میشم پاسخ بدید

    • رضا کیانوش :
      ۰۸ اسفند ۹۶

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

      • سامان :
        ۰۸ اسفند ۹۶

        ممنون خیلی سعی کردم ولی نشد یعنی میدونم مشکل از کجاس فقط نمیدونم چطور باید تغییرش بدم بعد اینکه ایتما رو راستچین کردیم فقط یه مشکل میمونه اونم استایلیه که به کلاس owl-wrapper به صورت خودکار اعمال میشه دقیقا این استایلش transform: translate3d(-142px, 0px, 0px); اینجا باید کاری کنیم که ۱۴۲px- به ۱۴۲px تغییر کنه که هر کاری کردم نتونستم.

  3. سامان :
    ۱۱ اسفند ۹۶

    سلام و خسته نباشید خدمت مدیریت محترم من این اسلایدر رو بلاخره راستچین کردم لینک دانلودشو میذارم در صورت امکان در سایت قرار دهید تا کاربران استفاده کنند ممنون

    • رضا کیانوش :
      ۱۱ اسفند ۹۶

      سلام وقت بخیر، با تشکر بابت ارسال اسلایدر، بررسی و منتشر میکنم. موفق باشید.