آموزش ساخت اسلایدر وردپرس با افزونه Master Slider

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

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

 

اسلایدر وردپرس چیست؟

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

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

اسلایدر وردپرس معمولاً بصورت خودکار اسلایدها و تصاویر را بدون کلیک کردن کاربر با حرکت زمان بندی شده نمایش می دهد. علاوه بر این کاربر می تواند با کلیک کردن بر روی دکمه ها یا عکسهای کوچک، اسلایدر را به اسلایدهای بعدی و قبلی حرکت دهد.

اضافه کردن اسلایدر به سایت

هنگام استفاده از اسلایدر وردپرس باید موارد زیر را در نظر بگیرید:

  • اسلایدرها معمولاً تصاویر و محتوا را در اسلایدها بارگذاری می کند. بارگذاری تصاویر و محتوا باعث کند شدن سرعت سایت می شود. علاوه بر این، بارگذاری جداگانه جی کوئری و جاوااسکریپت، سرعت سایت را تحت تأثیر قرار می دهد.
  • واکنشگرا بودن اسلایدرها برای نمایشگرها در اندازه های متفاوت مثل موبایل و تبلت است. باید از اسلایدرهایی که قابلیت واکنشگرا دارند استفاده کنید تا در دستگاه های مختلف به خوبی نمایش داده شوند.

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

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

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

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

آموزش اسلایدر وردپرس به کمک افزونه Master Slider

ابتدا در پیشخوان وردپرس به بخش “افزونه ها” گزینه “افزودن” بروید و افزونه Master Slider که بصورت فایل زیپ هست را آپلود کنید. بعد از آپلود روی دکمه فعالسازی افزونه کلیک کنید تا افزونه فعال شود. با فعال شدن افزونه گزینه جدیدی به نام Master Slider به نوار پیشخوان وردپرس اضافه می شود. روی این گزینه کلیک کنید تا وارد صفحه تنظیمات افزوه شوید.

آموزش اسلایدر وردپرس

در این صفحه می توانید قالب کلی اسلایدر خود را انتخاب کنید. در صورتی که بخواهید اسلایدر سفارشی بسازید گزینه custom slider را انتخاب کنید. در غیر این صورت یکی از اسلایدرهای آماده را انتخاب و روی گزینه create کلیک کنید. صفحه باز شده شامل 4 سربرگ است که هر کدام را جداگانه شرح می دهیم.

آموزش اسلایدر در وردپرس

سربرگ slider setting در اسلایدر وردپرس رایگان

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

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

در کادر General Setting موارد زیر را می توانید تنظیم کنید:

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

Slider Template

آموزش اسلایدر وردپرس

  • در این بخش می توانید الگوی اسلایدر را انتخاب کنید. اگر می خواهید کنترل کاملی روی گزینه ها داشته باشید باید الگوی custom Template را انتخاب کنید.
  • انتقال اسلایدرها، سرعت انتقال و فاصله بین اسلایدرها را می توانید از این قسمت تنظیم کنید.

Navigation در آموزش اسلایدر وردپرس با مستر اسلایدر

آموزش اسلایدر در وردپرس

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

  • مکث در آخرین اسلاید، حلقه اجرا و نمایش اتوماتیک
  • ایست با هاور کردن، نمایش رندوم، مخفی کردن لایه ها قبل از تغییر اسلایدها
  • نمایش لایه ها قبل از اتمام انتقال اسلایدها
  • نمایش تصویر پس زمینه در دستگاه های تلفن همراه (توصیه نمی شود).
  • شروع با اسلاید شماره …
  • فعال کردن لینک اسلایدر
  • استفاده از نشانگر ماوس، تغییر اسلاید با نشانگر ماوس، فعال کردن تاچ (لمس)
  • فعال کردن دکمه اسکرول ماوس بر روی اسلایدر
  • شروع اسلایدر با ظاهر شدن پنجره مرورگر
  • نحوه بارگیری اسلایدر

Appearance در آموزش ساخت اسلایدر

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

  • استایل کلی اسلایدر (تعداد زیادی اسلاید در این بخش وجود دارد.)
  • تصویر و رنگ بک گراند
  • نام کلاس اسلایدر (جهت کلاس دهی css به اسلایدر)
  • استایل های css مورد نظر برای شخصی سازی اسلایدر

سربرگ Slides

 آموزش اسلایدر وردپرس

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

سربرگ Slider Control در اسلایدر وردپرس رایگان

در این بخش می توانید از منوی کشویی Add new control فلش های دوطرف اسلاید، تصاویر شاخص، دکمه های کنترل و … اسلایدر را انتخاب کنید. سپس روی آیکن “+” کلیک کنید تا گزینه انتخابی شما اضافه شود.

 آموزش اسلایدر وردپرس

سربرگ Slider Callback

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

آموزش اسلایدر در وردپرس

بعد از اتمام تنظیمات روی گزینه save change در پایین صفحه کلیک کنید تا تغییرات ذخیره شوند.

آموزش اسلایدر وردپرس: قرار دادن اسلایدر در سایت

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

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

آموزش اسلایدر وردپرس

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

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

امیدواریم آموزش ساخت اسلایدر وردپرس رایگان با افزونه Master slider در وردپرس برای شما مفید واقع شده باشد و بتوانید اسلایدرهای دلخوه خود را ایجاد کنید.

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

فارس وب
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *