آموزش استفاده از شورت کد 2

اصول اولیه در استفاده از شورت کد:

1 -- کد پایه شورت کد:

شورت کد اسلایدر دسته ها

برای کپی کردن کد روی دکمه زیر کلیک کنید:

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

شورت کد اسلایدر دسته ها

نحوه وارد کردن پارامتر های شورت کد:

برای وارد کردن پارامتر های شورت کد مراحل زیر را انجام دهید:

1-- بعد از متن بدنه (متن اصلی) شورت کد (woo_modern_slider) پارامتر ها را با یک فاصله (space) وارد کنید:

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

نکته: دو طرف انتهایی شورت کد (چپ و راست) نباید با متن داخلی فاصله ای داشته باشند:

2-- پارامتر ها توسط علامت مساوی (=) مقدار دهی می شوند:

نکته: بیشتر پارامتر ها فقط یک مقدار می گیرند اما بعضی از پارامتر ها می توانند چندین مقدار را قبول کنند (پارامتر های تکرار شونده)

(مقادیر را می بایست با علامت (,) از هم جدا کنید)

پارامتر های تکرار شونده در متن آموزشی با رنگ نارنجی مشخص شده اند

پارامتر های اصلی ⚙️

1: horizon_pos

عملکرد: تعیین موقعیت افقی شورت کد در صفحه (راست،مرکز یا چپ)

نوع مقدار: رشته ای (string)

مقادیر قابل قبول:

center -> وسط چین

right -> راست چین

left -> چپ چین

مقدار پیشفرض: center

مثال -> [woos_cats_slider horizon_pos=left]

……………………………………………………………………………………………………………………………………………………………………………………………………………………

2: width

عملکرد: تعیین عرض اسلایدر دسته بندی ها (درصدی)

نوع مقدار: عددی (بدون علامت درصد)

مقادیر قابل قبول:

هر نوع عددی

مقدار پیشفرض: 100 (عرض کامل یا %100)

مثال -> [woos_cats_slider width=35]

پارامتر های اسلاید ها 🏞

1: slides_number

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

نکته: برای مثال اگر می خواهید 12 اسلایدر به نمایش بگذارید باید مقدار این پارامتر را برابر با عدد 12 قرار دهید

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 1

مثال -> [woos_cats_slider slides_number=12]

2: slides_show_title

نوع پارامتر: تکرار شونده

عملکرد: نمایش عنوان اسلاید ها یا عدم نمایش عنوان

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: ندارد

نکته: اگر برای مثال 5 اسلایدر می خواهید نمایش دهید باید برای هر 5 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=5 slides_show_title=yes,yes,yes,yes,yes]

3: slides_title

نوع پارامتر: تکرار شونده

عملکرد: تعیین متن عنوان اسلاید ها

نوع مقدار: رشته ای (string)

مقادیر قابل قبول: هر متنی

مقدار پیشفرض: دسته بندی - 1

نکته: اگر برای مثال 3 اسلایدر می خواهید نمایش دهید باید برای هر 3 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=3 slides_title=Cars,Tools,Taxi-Drivers]

نکته: مقادیر با کاراکتر های زبان فارسی را باید داخل "زبان-فارسی" دابل-کوتیشن قرار دهید

4: slides_title_color

نوع پارامتر: تکرار شونده

عملکرد: تعیین رنگ عناوین اسلاید ها

نوع مقدار: رشته ای (hex color/RGB color)

مقادیر قابل قبول: کد Hex رنگ یا کد RGB رنگ

مقدار پیشفرض: 000# (رنگ سیاه)

نکته: اگر برای مثال 15 اسلایدر می خواهید نمایش دهید باید برای هر 15 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=15 slides_title_color=#000,#000,#c20001,#fff,#ffffff,#ff00,#000,#909090,#909020,#fff,#343434,#c20001,#000,#000,#000]

5: slides_img_type

نوع پارامتر: تکرار شونده

عملکرد: اضافه کردن نوع تصویر اسلاید (عکس یا آیکون ؟)

نوع مقدار: رشته ای (string)

مقادیر قابل قبول:

img -> تصویر

icon -> آیکون

مقدار پیشفرض: img

نکته: اگر برای مثال 3 اسلایدر می خواهید نمایش دهید باید برای هر 3 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=3 slides_img_type=img,img,img]

6: slides_img_url

نوع پارامتر: تکرار شونده

عملکرد: تعیین آدرس اینترنتی تصاویر اسلاید ها برای نمایش تصاویر

نوع مقدار: URL

مقادیر قابل قبول: آدرس اینترنتی

مقدار پیشفرض: بدون مقدار (خالی)

نکته: اگر برای مثال 2 اسلایدر می خواهید نمایش دهید باید برای هر 2 اسلاید این پارامتر را تعیین کنید

مثال ->

[woos_cats_slider slides_number=2 slides_img_url=https://wooslider.ir/wp-content/uploads/2022/07/shortcode-basecode-pic2.jpg,https://wooslider.ir/wp-content/uploads/2022/05/24455764a56f29016d69afa0906550acb25d1d6f_1612352418.jpg]

7: slides_icon_classes

نوع پارامتر: تکرار شونده (2 لایه ای)

عملکرد: کلاس های آیکون های اسلاید ها را وارد می کند (نوع نمایش اسلاید موردنظر باید روی حالت icon باشد، پارامتر شماره 5)

نوع مقدار: رشته ای (string)

مقادیر قابل قبول: کلاس های CSS بدون نقطه (.)

مقدار پیشفرض: fas|fa

نکته بعد از هر علامت جداکننده (,) در این پارامتر خاص می بایست یک فاصله (space) بزنید

نکته: شما میتوانید برای هر کدام از آیکون ها بی شمار کلاس CSS تعیین کنید برای این کار کافیست کلاس های خود را با علامت (|) از هم جدا کنید (کلاس های فونت آیکون مورد نظر را وارد کنید)

نکته: اگر برای مثال 4 اسلایدر می خواهید نمایش دهید باید برای هر 4 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=4 slides_img_type=icon,icon,icon,icon slides_icon_classes=fas|fa, fa-dental|far, css-class1|css-class2|css-class3, myclass]

8: slides_icon_color

عملکرد: تعیین رنگ آیکون های اسلاید ها

نوع مقدار: رشته ای (hex color/RGB color)

مقادیر قابل قبول: کد Hex رنگ یا کد RGB رنگ

مقدار پیشفرض: 000# (رنگ سیاه)

نکته: اگر برای مثال 4 اسلایدر می خواهید نمایش دهید باید برای هر 4 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=4 slides_img_type=icon,icon,icon,icon slides_icon_color=#000,#000,#c20001,#c20001]

9: slides_img_width

عملکرد: عرض تصویر و یا آیکون اسلاید ها

نوع مقدار: عددی (پیکسل)

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 100 (به معنای 100 پیکسل)

نکته: اگر برای مثال 4 اسلایدر می خواهید نمایش دهید باید برای هر 4 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=4 slides_img_type=img,img,img,img slides_img_width=66,75,100,100]

10: slides_img_alt

عملکرد: تعیین ویژگی alt تصاویر اسلاید ها

نوع مقدار: رشته ای (string)

مقادیر قابل قبول: هر مقداری

مقدار پیشفرض: ندارد

نکته: اگر برای مثال 4 اسلایدر می خواهید نمایش دهید باید برای هر 4 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=4 slides_img_type=img,img,img,img slides_img_alt=alt1,alt2,alt3,alt4]

نکته: مقادیر با کاراکتر های زبان فارسی را باید داخل "زبان-فارسی" دابل-کوتیشن قرار دهید

11: slides_block_type

عملکرد: تعیین نوع بلاک اسلاید ها

نوع مقدار: رشته ای (string)

مقادیر قابل قبول:

imagetop -> تصویر بالا، عنوان اسلاید پایین

imagedown -> تصویر پایین، عنوان اسلاید بالا

imageright -> تصویر سمت راست، عنوان سمت چپ

imageleft -> تصویر سمت چپ، عنوان سمت راست

imagehover -> تصویر متحرک، عنوان مخفی

titlehover -> عنوان متحرک، تصویر مخفی

imagerotate -> تصویر چرخشی

metro -> حلاقانه!

مقدار پیشفرض: imagetop

نکته: اگر برای مثال 2 اسلایدر می خواهید نمایش دهید باید برای هر 2 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=2 slides_block_type=imagedown,metro]

12: slides_link_url

عملکرد: تعیین لینک اسلاید ها

نوع مقدار: رشته ای (URL)

مقادیر قابل قبول: URL یا آدرس اینترنتی

مقدار پیشفرض: # (لینک به صفحه کنونی)

نکته: اگر برای مثال 2 اسلایدر می خواهید نمایش دهید باید برای هر 2 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=2 slides_link_url=https://wooslider.ir/usingshortcode2,https://wooslider.ir/usingshortcode]

13: slides_link_ext

عملکرد: تعیین خارجی یا داخلی بودن لینک اسلاید ها

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no

نکته: اگر برای مثال 2 اسلایدر می خواهید نمایش دهید باید برای هر 2 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=2 slides_link_url=https://wooslider.ir/usingshortcode2/,https://wooslider.ir/usingshortcode/ slides_link_ext=yes,yes]

14: slides_link_nofollow

عملکرد: تعیین فالو یا نو-فالو بودن لینک اسلاید ها

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (به صورت پیشفرض follow می باشد)

نکته: اگر برای مثال 2 اسلایدر می خواهید نمایش دهید باید برای هر 2 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=2 slides_link_url=https://wooslider.ir/usingshortcode2/,https://wooslider.ir/usingshortcode/ slides_link_ext=yes,yes slides_link_nofollow=yes,no]

15: slides_is_exthtml

عملکرد: آیا بعد از بلوک اسلاید کد HTML اضافی دارید ؟

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no

نکته: اگر برای مثال 1 اسلایدر می خواهید نمایش دهید باید برای هر 1 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=1 slides_is_exthtml=yes]

16: slides_exthtml

عملکرد: تعیین کد HTML اضافی که دارید

نوع مقدار: کد HTML

مقادیر قابل قبول: هر مقداری

مقدار پیشفرض: ندارد

نکته: اگر برای مثال 1 اسلایدر می خواهید نمایش دهید باید برای هر 1 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=1 slides_is_exthtml=yes slides_exthtml="<p>Helllow</p>"]

نکته: کد HTML را باید داخل "</p>HTML CODE<p>" دابل-کوتیشن قرار دهید

17: slides_has_extclass

عملکرد: اضافه کردن کلاس اضافی CSS به بلوک اسلاید ها

نکته: این پارامتر کلاس های اضافی شما را به المان swiper-slide هر بلوک اضافه می کند

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (کلاس اضافی CSS نمی خواهم)

نکته: اگر برای مثال 3 اسلایدر می خواهید نمایش دهید باید برای هر 4 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=3 slides_has_extclass=yes,yes,yes]

18: slides_ext_classes

نوع پارامتر: تکرار شونده (2 لایه ای)

عملکرد: کلاس های CSS را اضافه می کند هر چند کلاسی که باشد

نوع مقدار: رشته ای (string)

مقادیر قابل قبول: کلاس های CSS بدون نقطه (.)

مقدار پیشفرض: fas|fa

نکته بعد از هر علامت جداکننده (,) در این پارامتر خاص می بایست یک فاصله (space) بزنید

نکته: شما میتوانید برای هر کدام از آیکون ها بی شمار کلاس CSS تعیین کنید برای این کار کافیست کلاس های خود را با علامت (|) از هم جدا کنید

نکته: اگر برای مثال 3 اسلایدر می خواهید نمایش دهید باید برای هر 4 اسلاید این پارامتر را تعیین کنید

مثال -> [woos_cats_slider slides_number=3 slides_has_extclass=yes,yes,yes slides_ext_classes=fas|fa|mycss-class, clas2|class-44, hover-image|img33]

19: slides_lazyload

عملکرد: اضافه کردن ویژگی لود تنبل به تمامی تصاویر اسلایدر

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no

پارامتر های اسلایدر 📲

1: show_dots

عملکرد: نمایش صفحه بندی

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no

نکته: در حالت پیشفرض اسلایدر صفحه بندی را نمایش نمی دهد اما شما می توانید با قرار دادن مقدار yes برای این پارامتر آن را فعال کنید

مثال -> [woos_cats_slider show_dots=yes]

2: show_arrows

عملکرد: نمایش پیکان ها

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: yes (به صورت پیشفرض فعال می باشد)

مثال -> [woos_cats_slider show_arrows=no]

3: grid

عملکرد: نمایش اسلایدر به صورت جدولی

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: yes (به صورت پیشفرض فعال می باشد)

مثال -> [woos_cats_slider grid=no]

4: grid_rows

عملکرد: تعیین تعداد ردیف ها در نمایش جدولی

نوع مقدار: عددی (حداکثر 4 ردیف)

مقدار پیشفرض: 2 (نمایش 2 ردیفی)

نکته: برای استفاده از این پارامتر باید پارامتر شماره 3 (grid) هم فعال باشد

مثال -> [woos_cats_slider grid=yes grid_rows=4]

5: loop

عملکرد: فعال سازی حالت حلقه بینهایت اسلایدر

نکته: برای استفاده از این آپشن حالت نمایش جدولی (پارامتر شماره 3) باید غیر فعال باشد

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (حلقه بینهایت به صورت پیشفرض غیر فعال است)

مثال -> [woos_cats_slider grid=no loop=yes]

6: autoplay

عملکرد: فعالسازی پخش خودکار اسلایدر

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (به طور پیشفرض غیر فعال می باشد)

مثال -> [woos_cats_slider autoplay=yes]

7: autoplay_speed

عملکرد: تعیین سرعت پخش خودکار اسلایدر (به میلی ثانیه، هر 1000 میلی ثانیه = 1 ثانیه)

نوع مقدار: عددی (به میلی ثانیه)

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 1775 (پخش خودکار هر 1.7 ثانیه)

مثال -> [woos_cats_slider autoplay=yes autoplay_speed=3000]

8: slider_move_eff

عملکرد: تعیین افکت حرکتی اسلایدر

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (این مورد به صورت پیشفرض غیر فعال است)

9: slider_grabcursor

عملکرد: فعالسازی حالت ماوس به صورت پنجه دست (فقط در دستاپ)

نوع مقدار: رشته ای (string)

مقادیر قابل قبول:

default -> حالت حرکتی پیشفرض Swiper.js

ease -> حالت حرکتی نرم

linear -> حالت حرکتی خطی

static -> حالت حرکتی بدون حرکت

fast -> حالت حرکتی سریع

cool -> حالت حرکتی باحال !

hammer -> حالت حرکتی چکشی

steps -> حالت حرکتی پله ای

light -> حالت حرکتی سرعت نور

مقدار پیشفرض: default

مثال -> [woos_cats_slider slider_move_eff=cool]

10: slider_active_eff

عملکرد: تعیین افکت اسلاید فعال

نوع مقدار: رشته ای (string)

مقادیر قابل قبول:

none -> بدون هیچ افکتی

grow -> بزرگ شونده

shrink -> کوچک شونده

growrotat -> بزرگ شونده + چرخشی

shrinkrotate -> کوچک شونده + چرخشی

rotate -> چرخشی

3d -> سه بعدی

ghost -> حالت روح

blur -> حالت بلوری

xray -> اشعه ایکس

fantasy -> فانتزی

مقدار پیشفرض: none

مثال -> [woos_cats_slider slider_active_eff=xray]

11: slider_active_dot

عملکرد: تعیین افکت صفحه بندی فعال

نکته: برای استفاده از این آپشن باید پارامتر شماره 1 (show_dots) فعال باشد

نوع مقدار: رشته ای (string)

مقادیر قابل قبول:

none -> بدون هیچ افکتی

grow -> بزرگ شونده

shrink -> کوچک شونده

sharp -> چهار گوش تیز

modern -> مدرن

goup -> بالا رونده

godown -> پایین رونده

alone -> تنها

مقدار پیشفرض: none (بدون هیچ افکتی)

مثال -> [woos_cats_slider slider_active_dot=modern]

12: wide_pp

عملکرد: تعیین تعداد اسلاید ها در مانیتور های عریض

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 3

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

13: wide_s

عملکرد: تعیین میزان فاصله اسلاید ها در دستگاه های عریض

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 30

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

14: desk_pp

عملکرد: تعیین تعداد اسلاید ها در دستاپ

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 3

نکته: نقطه شکست این مورد از تنظیمات المنتور باز خوانی می شود

15: desk_s

عملکرد: تعیین میزان فاصله اسلاید ها در دستاپ

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 30

16: tablet_pp

عملکرد: تعیین تعداد اسلاید ها در تبلت

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 3

نکته: نقطه شکست این مورد از تنظیمات المنتور باز خوانی می شود

17: tablet_s

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

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 25

18: mob_pp

عملکرد: تعیین تعداد اسلاید ها در موبایل

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 2

نکته: نقطه شکست این مورد از تنظیمات المنتور باز خوانی می شود

19: mob_s

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

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 20

20: mob2_pp

عملکرد: تعیین تعداد اسلاید ها در موبایل های بسیار باریک (معمولا زیر 300 پیکسل) (مثل دستگاه Galaxy Fold)

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 1

نکته: نقطه شکست این مورد را می توانید در صفحه تنظیمات افزونه تنظیم کنید

21: mob2_s

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

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 10

نکته: نقطه شکست این مورد را می توانید در صفحه تنظیمات افزونه تنظیم کنید

پارامتر های استایل 💄

1: rounded_images

عملکرد: تمامی تصاویر داخل اسلاید را گوشه گرد می کند

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (به صورت پیشفرض غیر فعال می باشد)

2: circle_images

عملکرد: تمامی تصاویر داخل اسلایدر را دایره ای می کند

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (به صورت پیشفرض غیر فعال می باشد)

3: auto_images

عملکرد: تصاویر داخل اسلاید را تا جای ممکن بزرگ می کند

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

نوع مقدار: رشته ای (yes/no)

مقادیر قابل قبول: yes یا no

مقدار پیشفرض: no (به صورت پیشفرض غیر فعال می باشد)

4: dots_margin

عملکرد: تعیین مارجین برای دربرگیرنده صفحه بندی اسلایدر

نکته: برای استفاده از این آپشن پارامتر 1 در قسمت پارامتر های اسلایدر (show_dots) باید فعال باشد

نکته: مقادیر مثبت نقطه های صفحه بندی رو به پایین حرکت می دهند و مقادیر منفی به سمت بالا

نوع مقدار: عددی

مقادیر قابل قبول: هر عددی

مقدار پیشفرض: 0

تاریخ آخرین بروز رسانی »»» 5 شهریور 1402