ساخت اسلایدر وردپرس توسط افزونه Owl Carousel + فیلم آموزشی
بدون شک یکی از بهترین افزونه ها برای ساخت اسلایدر در سایت وردپرسی افزونه Owl Carousel (اسلایدر چرخ و فلک) میباشد که هم میتوان از افزونه جی کوئری اسلایدشو و هم از افزونه وردپرس آن استفاده کرد. در این مقاله از ایران تمز به آموزش ساخت اسلایدر وردپرس توسط افزونه Owl Carousel میپردازیم تا بتوانید انواع اسلایدرهای حرفه ای تصویری یا متنی و یا اسلایدر مطالب وردپرس را در هنگام طراحی قالب وردپرس در پوسته بسازید، پس تا انتها همراه ما باشید.
ساخت اسلایدر وردپرس با Owl Carousel
افزونه Owl Carousel به قدری قدرتمند است که میتوان انواع اسلایدرها را براحتی توسط آن ایجاد کرد.
برای دانلود افزونه وردپرس اسلایدشو به برگه آن در مخزن افزونه های وردپرس در آدرس owl carousel wordpress plugin و برای دانلود سخه جی کوئری افزونه به صفحه آن در گیت هاب به آدرس owl carousel github مراجعه کنید.
برخی از مزایای افزونه Owl Carousel عبارتند از:
- کدنویسی استاندارد و معتبر html و css
- طراحی واکنشگرا یا ریسپانسیو با قابلیت تعیین تعداد اسلاید در ابعاد مختلف صفحه نمایش
- پیاده سازی راحت با کوئری های وردپرس
- قابلیت ساخت اسلایدر متنی و تصویری
- پشتیبانی از فیلم و ویدیو در اسلایدر برای ساخت اسلایدشو فیلم
- امکان نمایش چندین اسلاید به شکل همزمان
- قابلیت ساخت اسلایدر تصویری تمام صفحه همراه با متن و توضیحات
- دارای کلیدهای اسلاید قبلی و بعدی
- امکان فعال یا غیرفعال کردن دکمه های اسلایدر قبلی و بعدی
- دارای افکتهای متفاوت تعویض اسلاید
- قابلیت نمایش صفحه بندی و تعداد اسلایدها
- پشتیبانی از lazy load لیزی لود تصاویر
- قابلیت ساخت دکمه حرکت و ایست play and stop اسلایدر
- و …
اگر در حال کدنویسی و تبدیل psd به قالب وردپرس هستید بهترین کار استفاده از افزونه جی کوئری اسلایدر بجای افزونه وردپرس برای ساخت اسلایدرهای تصویری تمام صفحه و یا اسلایدرهایی که چندین مطلب یا محصول را در کنار هم نمایش میدهند، میباشد. زیرا امکان شخصی سازی بیشتر و بهینه سازی اسلایدر را دارا خواهید بود.
در تصویر زیر نمونه ای از اسلایدرهای ساخته شده توسط افزونه را مشاهده میکنید.
ساخت اسلایدر در قالب وردپرس با افزونه جی کوئری Owl Carousel
تقریبا در تمام پروژه های طراحی پوسته وردپرس از افزونه جی کوئری Owl Carousel استفاده میکنم.
برای سازگاری افزونه جی کوئری اسلایدر با وردپرس تنها باید از کوئری استفاده کرد. به عنون مثال برای ساخت اسلایدر وردپرس نمایش محصولات پر فروش ووکامرس یا edd باید دستورات و کدهای افزونه را در کوئری آن ادغام کرد و براحتی یک افزونه حرفه ای ساخت. برای آموزش راه اندازی افزونه جی کوئری ساخت اسلایدر وردپرس owl فیلم زیر را مشاهده کنید. از طریق این لینک اسلایدر و فایلهای استفاده شده در آموزش را دانلود کنید. همچنین میتوانید در دوره رایگان آموزش وردپرس هم شرکت نمایید.
آموزش ساخت اسلایدر وردپرس توسط افزونه جی کوئری owl در همینجا به پایان میرسد چنانچه سوالی دارید در بخش دیدگاه های همین مطلب مطرح کنید.
با عرض سلام و خسته نباشید . من یه سوال داشتم ازتون . این ویدیویی که توی این صفحه گذاشتید رو با چه افزونه ای قرار دادید . ممنون میشم راهنمایی کنید با تشکر از سایت خوبتون .
سلام دوست عزیز، افزونه نیست و به صورت اختصاصی نوشته شده است.
سلام آقای کیانوش.
اگه خواسته باشم کاروسل رو تو یه صفحه وردپرس مثلا صفحاتی که با المنتور ساخته میشوند به کار بگیرم باید کدهای مربوط به فراخوانی کتابخانه جی کوئری و افزونه رو کجا قراربدم؟
همچنین css و پوشه js رو کجا قرار بدم؟
سلام وقت بخیر، اگر نسخه پرو افزونه صفحه ساز المنتور رو به همراه اضافاتش داشته باشید، شورتکد چنین اسلایدری رو داخل پکیجش داره وگرنه باید براش شورتکد اختصاصی بنویسید که کار راحتی نیست. موق باشید
سلام من این آموزشو مرحله به مرحله انجام دادم ولی کارنمی کنه وهمه چی به هم ریختس میدونید مشکل ازکجاست؟
سلام وقت بخیر، احتمالا فایل استایل css افزونه جی کوئری رو بدرستی فراخوانی نکردید.
استایل هارو درست فراخوانی کردم عکس هارو زیرهم نشون میده
وقتی افزونه جی کوئری کار نمیکنه چند دلیل عمده میتونه داشته باشه: اول عدم فراخوانی کتابخانه جی کوئری و دوم عدم فراخوانی صحیح استایل و فایل جاوا افزونه جی کوئری. بررسی کنید کدوم مورد رو بدرستی اجرا نکردید.
بررسی کردم درست فراخوانی شده
با سلام و تشکر از شما بابت این مطلب آموزشی
به نظرم مهمترین مبحث از قلم افتاد و اونم اینه که متغیرهای مختلف برای این نمایشگر چرخشی رو معرفی نکردین. لطفا هر یک از متغیرها رو معرفی کنید و بگین هر کدوم چکاری انجام می دهند. اینجوری با توجه به کاربرد مورد انتظارمون بتونیم مقداردهی های لازم رو انجام بدیم.
به سایت اصلی هم سر زدم اما سر در نیاوردم.
سلام وقت بخیر، در سایت سازنده متغییرهای بیشتر به همراه پیش نمایش آنلاین معرفی شدن که براحتی میتونید ازشون استفاده کنید. البته در اینده اموزش کاملی درباره ساخت اسلایدر با افزونه جی کوئری منتشر میکنیم.
سلام وقت بخیر من بخام این اسلایدر رو در حلقه وردپرس استفاده کنم باید چیکار کنم؟
میخام پستام رو به این صورت نمایش بدم. اگر ممکنه راهنمایی کنید.
سلام وقت بخیر برای نمایش مطالب وردپرس به شکل اسلایدر تنها باید از حلقه استاندارد وردپرس استفاده کنید و div ای که تمام مطالب رو نمایش میده به عوان div اسلایدر معرفی کنید. در فیلم اموزشی منظورم از div اسلایدر رو توضیح دادم. موفق باشید.
سلام و خسته نباشید خدمت مدیریت محترم من این اسلایدر رو بلاخره راستچین کردم لینک دانلودشو میذارم در صورت امکان در سایت قرار دهید تا کاربران استفاده کنند ممنون
سلام وقت بخیر، با تشکر بابت ارسال اسلایدر، بررسی و منتشر میکنم. موفق باشید.
ممنون بابت آموزش بی نظیرتون فقط یه سوال اگر بخواییم به طور مثال ایتم شماره 1 عوض اینکه از سمت چپ شروع شه بیاد سمت راست و اسکرول به سمت راست باشه باید چیکار کنیم؟ ممنون میشم پاسخ بدید
سلام وقت بخیر، چندباری خودم تلاش کردم از قابلیت rtl افزونه استفاده کنم که هر دفعه اسلایدر مشکل پیدا میکرد و نمایش داده نمیشد به نظرر بهتره به مستندات افزونه نگاهی بندازید متغییری برای ایجاد قابلیت rtl وجود داره باهاش کار کنید شاید بتونید راست چینش کنید. موفق باشید
ممنون خیلی سعی کردم ولی نشد یعنی میدونم مشکل از کجاس فقط نمیدونم چطور باید تغییرش بدم بعد اینکه ایتما رو راستچین کردیم فقط یه مشکل میمونه اونم استایلیه که به کلاس owl-wrapper به صورت خودکار اعمال میشه دقیقا این استایلش transform: translate3d(-142px, 0px, 0px); اینجا باید کاری کنیم که 142px- به 142px تغییر کنه که هر کاری کردم نتونستم.
درود دمت گرم داش آموزش خوبی بود. فقط یه سوال داشتم من زمانی که اسلایدر رو روبه راه می کنم بار اول که نمایش داده میشه اسلایدر به هم ریختس اما زمانی که صفحه رو رفرش می کنم درست میشه به نظرت مشکل از کجاست؟
سلام، خوشحالم آموزش مورد پسندتون بوده. احتمالا به خاطر فراخوانی فایلهای js هست که چنین مشکلی براتون بوجود اومده. فایل کتابخانه جی کوئری رو در هدر و اسلایدر رو در فوتر فراخوانی کنید.
درست گفتید مرسی. کارمون با تغییر false به true حل شد. اصلا حواسم نبود :خخخ
خوشحالم مشکل حل شده. موفق باشید