آموزش کار با افزونه Meta Slider (متا اسلایدر)

افزونه اسلایدر وردپرس

متا اسلایدر افزونه ایه که چهار نوع اسلایدر معروف رو برای استفاده قرار داده. این اسلایدر ها شامل: Flex Slider 2Nivo SliderResponsive SlidesCoin Slider هستند. خب این پلاگین امکاناتی برای باز شدن تصاویر به صورت پاپ آپ و کاراسل اسلایدر (تصاویر به صورت کنارهم و با اندازه کوچک) ساختن هم داره که در ادامه توضیح میدیم.

 

خب اول افزونه رو از صفحه Meta Slider نصب کنید.

بعد میبینید در پنل پیشخوان یک گزینه با نام Meta Slider ایجاد شده، و روی آن کلیک کنید.

روی گزینه ایجاد اولین اسلایدشو کلیک کنید.

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

آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step1 1

خب بعد از اینکه تصاویر رو گزاشتید در هر تصویر یک عنوان و یک لینک داریم.

که در عنوان هر چی قرار دادیم زیر هر تصویر آن متن ظاهر میشود و در قسمت لینک میتوانیم یک آدرس برای هر عکس قرار بدیم که اگر هر کدومشون هم خالی باشن هیچ مشکلی نداره.آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step2 3

در ستون سمت چپ یک سری تنظیمات داریم که توضیحاتی درمورد اونها میدم:

آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step3 5

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

Flex Slider 2Nivo SliderResponsive SlidesCoin Slide

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

خب بعد از اینکه تصاویر رو گذاشتیم میتونیم روی گزینه ذخیره و مشاهده کلیک کنیم و پیشنمایش اسلایدر رو ببینیم.

آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step4 7

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

آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step5 9

  • کش آمدن: عرض ۱۰۰% برای تصاویر
  • تراز وسط: وسط چین کردن تصاویر
  • پخش خودکار: فعال یا غیر فعال کردن حرکت اسلایدر برای تصاویر بعدی
  • Image Crop: نحوه برش تصاویر بعد از آپلود. که بهتره این گزینه رو دست نزنیم
  • حالت چرخ و فلک: برای فعال کردن کاراسل اسلایدر این گزینه رو تیک میزنیم
  • تصادفی: نمایش دادن تصاویر اسلایدر به صورت تصادفی
  • متوقف کردن هنگام شناور شدن: متوفق کردن اسلایدر هنگام آمدن موس روی اسلایدر
  • تاخیر و سرعت هم مربوط به سرعت تغییرات تصاویر هستند که بر اساس میلی ثانیه محاسبه می شود
  • توضیحات اسلایدر: نوع نمایش توضیحات اسلایدر
  • افکت: افکت های هرتصویر برای تعویض شدن

خب اینا تنضیمات پیشرفته اسلایدر ها هستند.

 

حالا برای اینکه یه کاراسل اسلایدر درست کنیم مانند نمونه:آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step6 11

خب اول تصاویر مورد نیاز رو مثل مراحل بالا قرار میدیم

بعد از اون در طول و عرض هر تصویر رو مشخص میکنیم. مثلا ۲۶۰ در ۳۶۰ من قرار دادم

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

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

که تعداد ستون های تصاویر رو اونجا باید وارد کنیم. مثلا چهار یا پنج ستونه

باقی تنظیماتش هم مثل همون اولی هستش.

اینم دمو چیزی که درست کردم:

آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step7 13

خب اگه بخوایم این اسلایدر رو به صورت لایت باکس یا اصطلاحات پاپ آپ (بعد از کلیک روی هر تصویر) باز کنیم به این صورت عمل میکنیم.

اول پلاگین Meta Slider Lightbox رو نصب میکنیم.

بعد از اون در تنظیمات پیشرفته یک گزینه به نام Open in lightbox? به وجود میاد که باید تیک اون رو بزنیم و بعد از اون دیگه تصاویر به صورت لایت باکس بعد از کلیک روی تصویر باز میشن. این مکان رو بیشتر در کاراسل اسلایدر استفاده میکنن.

 

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

برای نمایش اون دو راه وجود داره. یکی نمایش در قالب سایت یکی نمایش در محتوای سایت (نوشته ها یا برگه ها)

خب در ستون سمت چپ یه باکس به نام “استفاده” هست. که شوردکدهای هر اسلایدر رو اتوماتیک اونجا میزاره.

آموزش کار با افزونه Meta Slider (متا اسلایدر) | Meta Slider Step8 15

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

[code]

[metaslider id=287]

[/code]

و برای استفاده در قالب از شورد کد “قرار دادن در پوسته” استفاده میکنیم

[code]

[/code]

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

پلاگین اسلایدر وردپرس

۶ دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید

  1. mazdak گفت:

    خب دقیقا چطوری باید شورت کد رو داخل صفحه هوم پیج آپلود کرد؟
    از کجا باید این کارو بکنیم؟

    • علی امینی گفت:

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

      برای استفاده در محتوای سایت از شوردکد “کد کوتاه” استفاده میکنیم

      و برای استفاده در قالب از شورد کد “قرار دادن در پوسته” استفاده میکنیم

      برای قرار دادن در صفحه home از کد قرار دادن در پوسته استفاده کنید و اونو تو صفحه home جایی که میخواید نمایش داده بشه بزارید

  2. MAHDI گفت:

    سلام باید عرض کنم که بروز رسانی انجام شده و روش شما اصلا جواب گو نیست !
    لطفا ذکر کنید چطور وارد فایل ثالب بشیم و کد رو وارد کنیم فک کنم این بهتر باشه تا چیزی که شما میفرمایید .

    • سلام اگه منظورت اینه که از اسلایدر توی کدهای قالب استفاده کنی باید از شوردکد php استفاده کنی که توی محتوا آموزشش هست و از کد توی قسمت ویرایشگر وردپرس و در فایلی که نیاز دارید مثل home.php یا front-page.php ولی اگه توی پست ها میخوای استفاده کنی که توی ادیتور پست یه گزینه به نام افزودن اسلایدر داره و اسلایدرتو انتخاب میکنی.

  3. حمید گفت:

    با سلام و احترام

    بنده در اسلایدر با اینکه تیک عرض ۱۰۰ درصد رو زدم ولی اسلاید رو در صفحه اصلی بصورت تمام عرض نشون

    نمیده بغل اسلاید هم از طرف چپ و هم راست سفید می مونده

    راهنمایی بفرمایید

  4. فائزه گفت:

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

دیدگاه خود را به ما بگویید.