ساخت اسلایدر وردپرس توسط افزونه 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 در همینجا به پایان میرسد چنانچه سوالی دارید در بخش دیدگاه های همین مطلب مطرح کنید.

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

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

پدرام تبریزی هستم مدیر وبسایت ایران تمز حدود 7 سالی هست با وردپرس آشنا شدم و علاقه‌مند به دنیای وردپرس ، سئو و کسب و کار اینترنتی هستم. هدف گروه ایران تمز این است که تمام تجربیاتمان رو با شما به اشتراک بگذاریم تا قدم کوچکی برای موفقیت سایت شما برداریم.

بازدیدکنندگانی که این مطلب را مطالعه کرده اند، از مطالب زیر نیز استقبال کرده اند
دیدگاهی بنویسید
20
  1. ali
    3 تیر 1398 ساعت 12:59

    سلام آقای کیانوش.
    اگه خواسته باشم کاروسل رو تو یه صفحه وردپرس مثلا صفحاتی که با المنتور ساخته میشوند به کار بگیرم باید کدهای مربوط به فراخوانی کتابخانه جی کوئری و افزونه رو کجا قراربدم؟
    همچنین css و پوشه js رو کجا قرار بدم؟

    • رضا کیانوش
      3 تیر 1398 ساعت 22:45

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

  2. Mohammad
    22 اردیبهشت 1398 ساعت 23:36

    سلام من این آموزشو مرحله به مرحله انجام دادم ولی کارنمی کنه وهمه چی به هم ریختس میدونید مشکل ازکجاست؟

    • رضا کیانوش
      23 اردیبهشت 1398 ساعت 00:24

      سلام وقت بخیر، احتمالا فایل استایل css افزونه جی کوئری رو بدرستی فراخوانی نکردید.

      • Mohammad
        23 اردیبهشت 1398 ساعت 12:29

        استایل هارو درست فراخوانی کردم عکس هارو زیرهم نشون میده

        • رضا کیانوش
          23 اردیبهشت 1398 ساعت 13:44

          وقتی افزونه جی کوئری کار نمیکنه چند دلیل عمده میتونه داشته باشه: اول عدم فراخوانی کتابخانه جی کوئری و دوم عدم فراخوانی صحیح استایل و فایل جاوا افزونه جی کوئری. بررسی کنید کدوم مورد رو بدرستی اجرا نکردید.

          • Mohammad
            26 اردیبهشت 1398 ساعت 13:45

            بررسی کردم درست فراخوانی شده

  3. ماهان
    17 اسفند 1397 ساعت 10:03

    با سلام و تشکر از شما بابت این مطلب آموزشی

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

    • رضا کیانوش
      17 اسفند 1397 ساعت 21:53

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

  4. hamed
    22 آبان 1397 ساعت 13:07

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

    • رضا کیانوش
      22 آبان 1397 ساعت 15:45

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

  5. سامان
    11 اسفند 1396 ساعت 05:19

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

    • رضا کیانوش
      11 اسفند 1396 ساعت 08:14

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

  6. سامان
    7 اسفند 1396 ساعت 22:30

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

    • رضا کیانوش
      8 اسفند 1396 ساعت 06:02

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

      • سامان
        8 اسفند 1396 ساعت 16:45

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

  7. محمد
    19 دی 1396 ساعت 12:05

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

    • رضا کیانوش
      19 دی 1396 ساعت 17:15

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

      • محمد
        19 دی 1396 ساعت 19:38

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

        • رضا کیانوش
          19 دی 1396 ساعت 20:43

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