ساخت آسان اسلایدر وردپرس با Responsive Slider by MotoPress

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

ساخت آسان اسلایدر وردپرس با Responsive Slider by MotoPress

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

1. اسلایدر سفارشی
2. اسلایدر از نوشته ها
3. اسلایدر از محصولات موجود در ووکامرس

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

اسلایدر نوشته ها هم که کاملاً مشخص است که نوشته های سایت شما را به همراه عنوان و کمی از توضیحاتش نمایش می دهد. اسلایدر ووکامرس مخصوص سایت هایی است که از افزونۀ فروشگاه ساز WooCommerce استفاده می کنند و می خواهند از محصولات فروشگاه در اسلایدر نشان داده شود.

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

نصب افزونه اسلایدر MotoPress Slider

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

صفحات افزونه Responsive Slider by MotoPress

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

از صفحه Settings یک سری تنظیمات مربوط به تنظیمات خودِ افزونه است که مشخص می کنید چه کسانی قادر باشند به تنظیمات اسلایدها دسترسی داشته باشند و بتوانند تغییر در آنها ایجاد کنند. این تنظیم برای سایت های چند کاربره خیلی مفید است.

روال کار با MotoPress Slider

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

هر اسلایدر به دو روش کلی قابل پیاده سازی و نمایش دروی سایت برای بازدید کنندگان است. روش اول این است که از یک تابع PHP (کد PHP) در فایل های قالب خود استفاده کنید. این کد در صفحۀ تنظیمات هر اسلایدر نشان داده می‌شود، که شما می توانید از آن در قالب خود استفاده کنید. مثلاً اگر می خواهید در بالای تمامی صفحات نمایش داده شود، باید در فایل header.php قرارش دهید.

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

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

حال که روال کاری این افزونه را یاد گرفتید، الان می‌دانید که باید به سراغ ساخت اولین اسلایدر برویم. پس روی MotoPress Slider از نوار سمت راست پیشخوان کلیک می کنیم. در اولین گام باید اولین اسلایدر را با کلیک روی Create Slider بسازیم.

ساخت اولین اسلایدر در MotoPress Slider

البته علاوه بر آن اگر از قبل با استفاده از دکمه Import & Export از اسلایدرهای خود خروجی گرفته باشیم، با استفاده از همین ابزار مجدد می توانیم آنها را درون همین سایت درون ریزی کنیم؛ بدون اینکه زمان زیادی را روی ساخت مجدد آنها بگذاریم.

با کلیک روی Create Slider اگر افزونه WooCommerce را نصب کرده باشید، سه نوع و در غیر این صورت تنها از بین دو نوع اسلایدر تنها یکی را می توانید انتخاب کنید.

ساخت اولین اسلایدر در MotoPress Slider

• Custom Slider : اسلایدر سفارشی از عکس ها و متن ها و عناصر دلخواه
• Posts Slider : ساخت اسلایدر از نوشته های سایت
• WooCommerce Slider : ساخت اسلایدر از محصولات ووکامرس

مورد دوم و سوم شاید تنظیمات زیادی نداشته باشند. به این دلیل که مثلاً Posts Slider اسلایدها را به صورت خودکار از نوشته های سایت می سازد. اما اسلایدر سفارشی دارای تنظیمات زیادتری است که این گزینه را انتخاب می کنیم و روی Create Slider کلیک می کنیم. به صفحه دیگری خواهیم رفت که این صفحه شامل تنظیمات کلیِ همین اسلایدر است.

تنظیمات اسلایدر در MotoPress Slider

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

• Slider title : عنوان اسلایدر که تنها برای خود شما این اسلایدر را از دیگر موارد جدا می کند باید عنوانی را وارد کنید.
• Slider alias : این گزینه خیلی مهم است! باید نامی را وارد کنید که طراح قالب از همین نام در تابع فراخوانی اسلایدر استفاده کرده است. تا اسلایدر شما در سایت ظاهر شود؛ در غیر این صورت اسلایدر نمایش داده نخواهد شد. اگر هم هنوز کد PHP نمایش اسلایدر را در پرونده های قالب وارد نکردید، لازم نیست این مقدار را تغییر دهید. از همین مقدار هم می‌توانید استفاده کنید.
• Slider Shortcode : این همان کد کوتاه مختص همین اسلایدر است که برای نمایش آن در هر کجا که خواسته باشید (مثل ابزارک ها) قادرید از این کد کوتاه استفاده کنید.
• Slider size on Desktop : عرض و ارتفاع پیش فرض اسلایدر را در نمایشگر رایانه های رومیزی را میتوانید از اینجا تعیین کنید.

به سربرگ های دیگر هم می توانید مراجعه کنید و تنظیمات آنها را هم انجام دهید. اما بنده تنها به ذکر کارایی هر سربرگ بسنده می کند. شاید نیازی هم نباشد تا تنظیمات تک تک آنها را هم بدانید.

• Size : در این سربرگ می توانید تعیین کنید که اندازه عرض کل اسلایدر و اجزاِء موجود در صفحات آن در نمایشگرهای مختلف با عرض های گوناگون چطور باشد. گزینه اول که با عنوان Full Width شناخته میشود را اگر فعال کنید، در هر کجا که باشد، تمام عرض خواهد شد.
• SlideShow : تنظیمات مربوط به نمایش اسلاید شو یا عوض شدن اسلایدها و صفحات از نظر مدت زمانی و نحوۀ عوض شدن در این سربرگ جای گرفته است.
• Controls : تنظیمات مربوط به دکمه های کنترلی که روی اسلایدر به کاربران سایت نمایش داده می شود، در این سربرگ قرار دارند.
• Appearance : دیگر تنظیمات مربوط به نحوۀ نمایش اسلایدها هم در این سربرگ قرار گرفته اند. اینکه از اسلاید شمارۀ چند نمایش شروع شود (Start with slide)، یا اینکه تاخیر اولیه چقدر باشد (Initialization delay) از جملۀ این موارد است. البته کدهای CSS سفارشی و دلخواه خودتان را هم می توانید در جعبۀ Slider custom styles از این سربرگ وارد کنید.

حالا که تنظیمات کل اسلایدر را انجام دادید، وقت آن رسیده که روی دکمۀ Create Slider در پایین صفحه کلیک کنید. حالا نوبت به ساخت و انجام تنظیمات تک تک اسلایدهای این اسلایدر می رود.

ساخت اولین اسلاید در اسلایدر

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

تظیمات اسلاید در MotoPress Slider

در اسلایدی که شما ایجاد می کنید، می تواند لایه های مختلفی وجود داشته باشد. لایه هایی از قبیل لایۀ متنی، لایۀ عکسی، لایۀ فیلم، لینک و … . پس هر کدام از این لایه ها را با استفاده از دکمه های بالای جعبۀ پیش نمایش با پس زمینۀ سفید(Add Video, Add Button, Add Image, Add Text) می توانید وارد کنید. اما قبل از آن نام اسلاید را می توانید از طریق جعبۀ Slide Title تنظیم کنید. وضعیت آن را که میتواند پیش نویس یا منتشر شده باشد را هم از قسمت Status قادرید تعیین نمایید. سربرگ های بالای این صفحه هم تنظیمات کلی همین اسلاید را در خود دارند. به عنوان مثال برای انتخاب یک تصویر پس زمینۀ بزرگ برای کل این اسلاید به سربرگ Image رفته و از قسمت Background Image اقدام به انتخاب یک عکس بزرگ نمایید.

تظیمات اسلاید در MotoPress Slider

نکته بسیار مهم این است که در ابتدا باید از طریق سربرگ هایی که در تصویر بالا هم کاملاً مشخص هستند، محتوای اصلیِ اسلاید را وارد کنید. حالا اگر نیاز به لایۀ خاص دیگری، مثل یک متن که می تواند در یک زمان خاصی به اسلاید ما اضافه شود داشتید، از دکمه Add Text پایین استفاده نمایید.

اگر قصد دارید کل اسلاید را به یک صفحۀ خاصی پیوند دارید، تنظیمات سربرگ Link را انجام دهید.

بعد از اینکه در صورت تمایل لایه ای را به اسلاید خود اضافه کردید، وقت آن است که از طریق سربرگ های کنترلی پایین صفحه، موقعیت، اندازه، زمان و اسلایل آن را تعیین کنید. مثلاً من الان روی Add Text کلیک کردم و جعبۀ ویرایش متن در سربرگ اول ظاهر شد که قادرم متن را ویرایش نمایم.

تظیمات اسلاید در MotoPress Slider

زمانی که کار تعیین اجزاء اسلاید به اتمام رسید، وقت آن رسیده که روی Save Slide کلیک کنیم و به سراغ ساخت اسلاید بعدیِ این اسلایدر برویم. دکمۀ New Slide در پایین صفحه (تصویر بالا) ما را به صفحۀ ساخت اسلاید جدید می برد. به هر تعداد که خواسته باشیم برای اسلایدرهای خود می توانیم اسلاید تعریف کنیم و از عناصر مختلف درون آن استفاده نماییم. تمامی مراحل هم به صورت کاملاً گرافیکی و بدون نیاز به دانش کدنویسی است.

حالا اگر مجدد به صفحۀ اصلیِ افزونه MotoPress Slider برویم، یک جدول می بینیم که اولین اسلایدری که ایجاد کردیم درون یک ردیف ظاهر شده است.

فهرست اسلایدرها در MotoPress Slider

کد PHP که می توانیم در فایل های قالب خود از آن استفاده کنیم هم درج شده است. به جای alias باید Slider alias ای که در زمان انجام تنظیم اسلایدر وارد کردیم وارد شود.

<?php motoPressSlider( "alias" ) ?>

افزونه MotoPress Slider کاری کرده است که در کمترین زمان و با سهولت تمام، بدون نیاز به هزینه کردن هر نوع اسلایدی را در هر کجایی از سایت بتوانیم وارد کنیم. امیدوارم که این آموزش به شما در ساخت آسان اسلایدر وردپرس کمک کرده باشد. با دیگر آموزش های ویدیویی و تصویری WPTutorial.ir همراه باشید.