افزونه Master Slider

افزونه Master Slider یکی از بهترین افزونه های اسلایدر وردپرس و یک افزونه همه کاره برای تمام نیازهای اسلایدر محتوای شما است. روشی که این اسلایدر برای نمایش محتوا استفاده می کند آن را تبدیل به یکی از بهترین انتخاب ها برای وب سایت های مرتبط با مواد غذایی کرده است. شما می توانید از یک اسلایدر معمولی بدون اضافه کردن تصاویر بند انگشتی یا یک اسلایدر با نمایش تصاویر بند انگشتی در ساید بار استفاده کنید در این سری از آموزش طراحی سایت به آموزش افزونه Master Slider می پردازیم .

نسخه رایگان افزونه Master Slider یکی از بهترین انتخاب ها برای وب سایت های شرکت های کوچک است. شما می توانید از این اسلایدر در تمام صفحات وب سایت خود استفاده کنید. همچنین اسلایدر می تواند به هر تعداد اسلاید که بخواهید را نشان دهد. اما ویژگی هایی مانند لایه بندی اسلایدها در نسخه Pro افزونه وجود دارد.

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

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

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

در این صفحه تمام اسلایدرهای ساخته شده نشان داده می شوند. در شکل بالا چون اسلایدری ساخته نشده است گزینه ای مشاهده نمی شود. برای ساخت اسلایدر جدید روی دکمه Create New Slider کلیک کنید.

یک پنجره پاپ آپ مشابه شکل زیر باز می شود.

در قسمت Slider Types نوع اسلایدری که می خواهید بسازید را انتخاب کنید. در نسخه رایگان افزونه Master Slider تنها یک نوع اسلایدر به نام Custom Slider ارائه شده است. آن را انتخاب کرده و روی دکمه Create کلیک کنید.

شما می توانید از اسلایدرهای درون ساخته افزونه Master Slider نیز استفاده کنید. کافی است در قسمت Sample Sliders اسلایدر مورد نظر خود را انتخاب کرده و روی دکمه Create کلیک کنید.

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

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

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

شما می توانید از تصاویری که قبلاً در کتابخانه بارگذاری کرده اید استفاده نمایید یا تصاویر جدیدی را از کامپیوتر خود آپلود کنید. پس از انتخاب تصاویر روی دکمه Create Slide(s) کلیک کنید. توجه داشته باشید که با فشردن کلید Ctrl می توانید چند تصویر را به صورت همزمان انتخاب کنید.

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

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

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

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

Background

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

همچنین در قسمت Background می توانید تصویر پس زمینه اسلاید را مشخص کنید. Fillmode مشخص کننده روش مقیاس گذاری پس زمینه اسلاید است و در قسمت Thumbnail می توانید یک تصویر بندانگشتی برای اسلاید خود انتخاب کنید.

در قسمت پایین تنظیمات گزینه ای به نام Slide duration وجود دارد که می توانید مدت زمان نمایش اسلایدها را با استفاده از آن تنظیم کنید.

Video and Link

این قسمت از آموزش به بررسی نحوه اضافه کردن لینک و ویدئو در افزونه Master Slider اختصاص دارد. در این صفحه می توانید ویژگی های مربوط به لینک دادن اسلایدها و Video/youtube را به صورت زیر تنظیم کنید.

URL: اگر می خواهید تصاویر اسلایدر لینک دار شوند و با کلیک بر روی آنها کاربر به آدرس URL خاصی هدایت شود می توانید آدرس URL لینک مورد نظر خود در قسمت URL وارد کنید.

شما می توانید رفتار باز کردن لینک را یکی از گزینه های Open on the same page (باز کردن در همان صفحه)، Open on a new page (باز کردن در یک صفحه جدید)، Open in parent frame (باز کردن در فریم والد) و open in main frame (باز کردن در فریم اصلی) انتخاب کنید.

Link ID: در این قسمت می توانید یک ID یا شناسه CSS به لینک اضافه کنید.

Link class: در این قسمت می توانید یک کلاس CSS به لینک اضافه کنید.

Link rel: در این قسمت می توانید یک ویژگی rel برای لینک تنظیم کنید.

این قسمت برای اهداف SEO استفاده می شود.

Link title: در این قسمت می توانید برای لینک یک عنوان تعیین می کند. این قسمت نیز برای بهبود سئو مهم است.

Autoplay video: پخش خودکار ویدیو باعث می شود اسلایدهای ویدیویی به صورت خودکار فعال شوند.

Video embed src: این قسمت src یوتیوب و Vimeo را برای ایجاد یک اسلاید برای ویدئو اضافه می کند.

برای بدست آوردن URL جاسازی شده YouTube / Vimeo باید ویدئو را در Vimeo/Youtube باز کنید. سپس ویدئو را پلی کرده و روی آن کلیک راست کنید. Get embed code را انتخاب کرده و کد جاسازی شده را در ویرایشگر متنی پیست کنید.

حال شما می توانید URL جاسازی شده ویدئو را در کد جاسازی شده مشاهده کنید که به صورت iframe src مشخص شده است.

Slide Info

تب Slide Info یا اطلاعات اسلاید با رسیدن تصاویر به آن اسلاید خاص در کنار اسلایدر نشان داده می شود یا می تواند به صورت یک تب در کنترل های تب نشان داده شود. توجه داشته باشید که نحوه نشان دادن اطلاعات اسلایدر به قالب انتخاب شده اسلایدر بستگی دارد.

Misc

در این قسمت می توانید یک کلاس CSS سفارشی یا ID برای هر اسلاید اضافه کنید. همچنین می توانید به تصویر پس زمینه اسلاید ویژگی alt اضافه کنید.

تب دیگری که در صفحه اسلایدر وجود دارد تب Settings Slider است. در این تب می توانید رفتار و ظاهر اسلایدر را تنظیم کنید.

آموزش تب Settings Slider در افزونه Master Slider

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

General Settings

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

در این بخش می توانید نام اسلایدر، عرض و ارتفاع آن را تنظیم کنید. همچنین با فعال کردن گزینه Automatically crop and resize slider images based on the size above تصاویر اسلایدر با توجه به ابعادی که در گزینه های فوق تنظیم کرده اید به صورت خودکار برش داده می شوند.

با فعال کردن گزینه Auto-height slider اسلایدر ارتفاعش را با ارتفاع اسلایدها هماهنگ می کند.

در قسمت Slider sizing method می توانید روش سایزبندی اسلایدر را تعیین کنید. اگر گزینه full screen یا full-width را انتخاب کنید می توانید اسلایدر را حتی اگر در قالب شما پشتیبانی نشده باشد تمام صفحه کنید.

در قسمت Minimum height amount می توانید حداقل مقدار ارتفاع را مشخص کنید.

در Slider wrapper width می توانید عرض پوشش دهنده اسلایدر را تنظیم کنید (والد اسلایدر). اگر این قسمت خالی گذاشته شود اسلایدر به صورت خودکار آن را تنظیم می کند. اسلایدر از این تنظیمات برای تراز کردن کنترل های اسلایدر استفاده می کند.

Slider Transition

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

Navigation

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

Pause at the final slide: با فعال کردن این گزینه اسلایدر با رسیدن به آخرین اسلاید متوقف می شود.

Loop navigation: حالت اسلایدر مداوم را فعال می کند.

Autoplay (slideshow): با فعال کردن این گزینه اسلایدر به صورت خودکار شروع به کار می کند.

Random order: اگر این گزینه را فعال کنید ترتیب نمایش اسلایدها به صورت تصادفی می شود.

Pause on hover: با فعال مردن این گزینه اسلایدر با قرار گرفتن موس بر روی اسلایدها به صورت موقت متوقف می شود.

Appearance

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

Skin: در این قسمت می توانید پوسته اسلایدر را مشخص کنید

Align center slider controls: با فعال کردن این گزینه اسلایدر کنترل های UI را در مرکز قرار می دهد. این گزینه تنها در حالت تمام صفحه مفید است.

Background color: در این قسمت می توانید رنگ پس زمینه اسلایدر را مشخص کنید.

Background image: در این قسمت می توانید یک تصویر پس زمینه برای اسلایدر انتخاب کنید.

Class name: در این قسمت می توانید به المان های اصلی اسلایدر کلاس های سفارشی اضافه کنید. اگر بخواهید نام چند کلاس را در این قسمت قرار دهید باید بین آنها یک فاصله خالی بگذارید.

Slider custom styles: در این قسمت می توانید استایل های سفارشی اسلایدر را وارد کنید.

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

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

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

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

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

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

در ویرایشگر کلاسیک وردپرس برای قرار دادن اسلایدر در نوشته ها و/یا برگه ها با استفاده از شورت کد روی آیکون Master Slider که پس از نصب و فعال سازی افزونه به نوار ابزار آن اضافه می شود، کلیک کنید

با کلیک کردن بر روی این آیکون شورت کد اسلایدر ظاهر می شود و با کلیک کردن بر روی آن به صفحه اضافه می گردد.

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

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

برای اضافه کردن اسلایدر به ناحیه ابزارک ها در پیشخوان وردپرس به مسیر نمایش » ابزارک ها بروید.

سپس ابزارک Master Slider را کشیده و در ناحیه ابزارک مورد نظر خود رها کنید.

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