ایجاد اسلایدر محصولات با WooCommerce Product Slider در وردپرس

/, وردپرس, ووکامرس/ایجاد اسلایدر محصولات با WooCommerce Product Slider در وردپرس

ایجاد اسلایدر محصولات با WooCommerce Product Slider در وردپرس

امروز دنیای وبسایت ها بسیار گسترش یافته است و وبسایت ها به شاخه ها و دسته های متفاوتی تقسیم شده اند که یکی از این شاخه ها فروشگاه های اینترنتی هستند.

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

حال در این پست می خواهیم شما را با یکی از افزونه های کاربردی ووکامرس که در راستای زیبا سازی فروشگاه شما تاثیر گذار خواهد بود آشنا کنیم.

شما با کمک این افزونه خواهید توانست اسلایدرهایی شیک در بخش های مختلف فروشگاه خود ایجاد کنید.

نام این افزونه WooCommerce Product Slider است. این افزونه به شما کمک خواهد کرد تعدادی از محصولات را به صورت اسلایدر نمایش دهید.

از جمله ویژگی های کلیدی این افزونه می توان به موارد زیر اشاره کرد:

  1. این افزونه کاملا واکنش گرا (ریسپانسیو) است و لذا برای تلفن های همراه و تبلت ها هم مناسب است.
  2. تنظیمات این افزونه بسیار ساده است و به راحتی تنظیم می شود.
  3. برگه های افزونه دارای کدهای کوتاه و یا همان Short Codeهای مشخص است.
  4. این افزونه در بخش ابزارک ها دارای ابزارک مشخصی می باشد.
  5. از بابت ویژگی های سئو هم کاملا بهینه شده می باشد.
  6. همچنین دارای قطعه کد های پی اچ پی برای قرار گرفتن در فایل های قالب است.

پس از نصب و فعالسازی این افزونه در بخش تنظیمات گزینه ای با عنوان  WooCommerce product slider  مشاهده خواهید کرد. با کلیک بر روی آن قسمت تنظیمات افزونه را مشاهده می کنید. به طور کلی این افزونه دارای دو بخش تنظیمات اصلی و پیشرفته می باشد.

تنظیمات اصلی

بخش اول که General نام دارد همان بخش تنظیمات اصلی این افزونه است.

general-WooCommerce-slider

در ادامه به توضیح مورد به مورد قسمت های بخش اصلی می پردازیم.

عنوان کاربرد
Show featured image نمایش تصویر برجسته که می توان آن را فعال کرد
Show direction arrows نمایش فلش در دو طرف اسلایدر برای تغییر اسلایدها یا همان محصولات
Show read more text نمایش متن ادامه مطلب یا بیشتر بخوانید
Show title نمایش عنوان محصولات
Show excerpt نمایش گزیده ای از محصولات
Show price نمایش قیمت
Show add to cart button نمایش افزودن به سبد خرید
Show pagination نمایش صفحه بندی های محصول
Featured image size نحوه نمایش تصاویر داخل اسلایدر
Auto scroll حرکت اسلایدر محصولات به صورت اتوماتیک
Circular نمایش محصولات به صورت دایره ای
Excerpt length طول اسلایدها
Read more text متن بیشتر…در اینجا می توان به فارسی متن را وارد کرد
Categories/Terms انتخاب دسته برای نمایش محصولات
Number of posts تعداد پست هایی که نمایش داده می شوند
Posts order ترتیب نمایش پست ها در اسلایدر
Posts orderby سفارشی سازی پست های محصولات
Transition effect حالت نمایشی اسلایدر
Timeout between elements مدت زمان بین حرکت محصولات در اسلایدر
Infinite تعداد محصولات بینهایت
Align the items in Slider محل قرار گیری اسلایدر
General width of items اندازه ی عرض اسلایدر
General height of items اندازه ی طول اسلایدر
Pick text in excerpt field قرار گرفتن گزیده ای از متن در اسلایدر
Touch Swipe فعال یا غیر فعال کردن در حالت های لمسی
CSS3 Transtitions فعال کردن باکسی برای ایجاد تنظیمات شخصی سی اس اس
Direction to scroll the carousel جهت اسکرول شدن اسلایدر
Direction arrows colour رنگ فلش ها
Direction arrows background colour رنگ پس زمینه ی فلش ها
Direction arrows hover colour رنگ فلش ها در حالت هاور شدن (نگه داشتن ماوس روی آنها)
Size of direction arrows اندازه ی فلش ها
Default image URL قرار دادن تصویر دلخواه برای انتقال از اسلایدر
Custom styles تنظیمات سفارشی سی اس اس

بعد از تنظیم کردن هر کدام از بخش ها تنظیمات را ذخیره کنید.

تنظیمات پیشرفته

بخش دیگر که Advanced نام دارد برای انجام تنظیماتی بیشتر و پیشرفته تر تعبیه شده است. در این بخش تنظیماتی برای حالت لود شدن اسلایدر و زمان آن و همچنین زمان بارگذاری تصاویر وجود دارد.

advanced-WooCommerce-slider

نحوه استفاده از افزونه WooCommerce product slider

حال به نحوه ی استفاده و قرار دادن اسلایدر در فروشگاه می پردازیم. شما به سه روش می توانید از این اسلایدر استفاده کنید:

روش اول قراردادن اسلایدر از طریق استفاده از کدهای کوتاه یا همان Short Codeها در پست ها و برگه های مورد نظر شما است:

[[wa-wps]]

روش دوم قراردادن اسلایدر در قسمتی از قالب وردپرس می باشد. به عنوان مثال اگر شما بخواهید اسلایدر محصولات خود را به عنوان اسلایدر اصلی سایت قرار دهید می توانید از کد زیر در قسمت سربرگ یا همان Header سایت استفاده کنید:


روش سوم و آخر هم قراردادن اسلایدر با کمک ابزارک ها می باشد.

WooCommerce-slider-widget

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

WooCommerce-slider-sample

شما می توانید از لینک زیر به صفحه اصلی این افزونه دسترسی داشته باشید:

صفحه افزونه WooCommerce product slider  در مخزن وردپرس

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

نویسنده: |۱۳۹۷/۳/۲۹ ۱۳:۴۳:۳۴۲۹ خرداد ۱۳۹۷|معرفی افزونه, وردپرس, ووکامرس|فاقد دیدگاه

درباره نویسنده:

دانشجو در رشته کامپیوتر نرم افزار و همچنین طراح و برنامه نویس وب و اندروید

نظر شما چیست