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

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

قابلیت های افزونه اسلایدر Smart Slider Pro وردپرس نسخه 3.3.5

• امکان نمایش زنده
• امکان طراحی لایه ای
• ایجاد اسلایدر تمام صفحه
• اسلایدر تمام عرض
• اسلایدر ویدئو
• انیمیشن های پس زمینه
• انیمیشن متن
• اسلایدر مطالب وردپرس
• اسلایدر محصولات ووکامرس
• تصاویر بهینه سازی شده
• سئو بهینه سازی شده
• بهینه سازی کدها
• و امکانات دیگر…

نصب و راه‌اندازی افزونه

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

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

تنظیمات افزونه Smart Slider

این بخش متشکل از 4 قسمت است.

تنظیمات عمومی افزونه Smart Slider

 

Show help beacon: نمایش توضیحات راهنما
Show discover modal: نمایش شرایط و مودال‌ها
Automatic update check: بررسی خودکار بروزرسانی‌ها
Translate url: ترجمه آدرس‌ها
Editor – additional CSS files: ویرایشگر مخصوص وارد کردن کدهای سفارشی CSS
Hardware acceleration on sliders: بررسی امکانات و شتاب سخت‌افزاری برای اسلایدرها
Send slide as file: ارسال اسلاید مانند یک فایل
Open preview in new window: باز کردن لینک پیش‌نمایش اسلایدر ایجاد شده در صفحه جدید
Show editor icon: نمایش آیکون ویرایشگر

Show in WordPress admin bar: نمایش تنظیمات اسلایدر در ادمین‌بار وردپرس
YOAST SEO sitemap – add images: افزودن امکان سئو با کمک افزونه yoast seo به تصاویر اسلایدر
WordPress – Create widget area: امکان فعال‌سازی ابزارک‌ها برای اسلایدر
Render sliders as iframe in AJAX calls: دریافت کد آی‌فریم به صورت ایجکسی از افزونه
Smooth scroll speed: سرعت پیمایش

Responsive mode: این بخش مربوط به تنظیمات واکنش‌ گرایی در ساخت اسلایدر در وردپرس است.
Cache: با کمک این بخش می‌توانید کش را حذف کنید.

افزونه فوق‌العاده‌ای است نه؟!

Framework settings

 

Secondary server: سرور دوم، چنانچه قرار است تصاویر روی سرور دیگری آپلود شوند این گزینه را انتخاب کنید.
استفاده از پروتوکل Url: برای استفاده از آدرس‌دهی به تصاویر استفاده می‌شود.
Force english backend: بک‌گراند اسلایدر یعنی تنظیمات پشت صحنه صرفا انگلیسی باشد.
Improved frontend accessibility: بهبود سطح دسترسی در سمت کاربر
جاوا اسکریپت: این بخش مربوط به تنظیمات جاوا اسکریپت است.
CSS: برای وارد کردن تنظیمات دلخواه و سفارشی از این بخش می‌توانید اقدام کنید.
درخواست Api: برای گرفتن کد API می‌توانید از این قسمت اقدام کنید.

فونت‌ها

 

فونت پیشفرض: این بخش مربوط به انتخاب فونت مورد نظر است. از منوی پایین نیز می‌توانید هر آنجه مدنظرتان است را انتخاب کنید.
GOOGLE: از این قسمت نیز نحوه عملکرد هر کدام را در سمت کاربر می‌توان مشخص کرد.

اسلاید پیش‌فرض

 

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

حال چه کنیم؟ وقت ساخت اسلایدر در وردپرس رسیده! اما چطور این کار را انجام دهیم؟ برای این منظور به بخش داشبورد برمی‌گردیم و به پایین صفحه اسکرول می‌کنیم…

ساخت اسلایدر

 

New Slider: برای ساخت یک اسلایدر جدید باید روی این گزینه کلیک کنیم تا بتوانیم شروع به ساخت اسلایدر در وردپرس کنیم.
Template library: قالب‌ های مورد نظر برای اسلایدر در این قسمت قابل مشاهده است.
Sample Slider: یک نمونه تستی برای ما ایجاد شده که می‌توانیم به آن مراجعه کرده و تنظیمات را مشاهده کنیم.

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

مراحل ساخت اسلایدر

 

هر کدام از آیکون‌های دایره‌ای فعالیت‌هایی را انجام می‌دهند. از سمت راست ویرایش سریع، حذف کش، خروجی با فرمت HTML، خروجی، کپی اسلایدر و حذف اسلایدر.

در این قسمت می‌توانیم اسلایدها را اضافه یا ویرایش کنیم. به عنوان مثال…

ویرایش اسلاید

 

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

تنظیمات انتشار

 

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

اصلی

 

در این قسمت می‌توانید تنظیمات نام، تصویر و چگونگی نمایش اسلایدر را مشخص کنید.

سایز

 

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

Autoplay

 

در این بخش نحوه نمایش و زمان حرکت هر اسلاید را می‌توان در ساخت اسلایدر در وردپرس تعیین کرد.

Optimize

 

برای بهبود و بهینه‌ سازی تصاویر در وردپرس می‌توانید از این بخش اقدام کنید.

Loading

 

تنظیمات قالب سلایدر

Arrows

 

جهت فلش‌های اسلایدر، مدل آن‌ها، رنگ‌بندی و … را می‌توان در این قسمت مشخص کرد.

Bullets

 

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

Autoplay

در این بخش می‌توانید تنظیمات نمایش خودکار را مشخص کنید.
قسمت‌های بعدی نیز مربوط به متن زیر اسلایدر، تصویر شاخص و سایه‌هاست.

قرار دادن اسلایدر در سایت

برای قرار دادن اسلایدر در وردپرس به قسمت برگه‌ها رفته و شورت کد مربوطه را با آیکون اسلایدر انتخاب و قرار می‌دهیم:

 

حال می‌توانیم نتیجه را مشاهده کنیم:

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

با کلیک بر روی دکمه “Create” وارد صفحه ساخت اسلاید به صورت زیر می شوید.

برای اضافه کردن اسلایدها به اسلایدر روی گزینه Add Slide کلیک کنید. باکسی مشابه شکل زیر باز می شود.

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

به عنوان مثال با کلیک بر روی دکمه Image می توانید تمام تصاویر مورد نظر خود را به یکباره از کتابخانه رسانه وردپرس انتخاب کرده و در اسلایدر وارد کنید یا تصاویر جدید آپلود نمایید.

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

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

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

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

برای اضافه کردن یک لایه محتوای جدید به اسلاید، موس را بر روی اسلاید مورد نظر خود قرار داده و با ظاهر شدن دکمه “ویرایش” روی آن کلیک کنید.

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

یک پنجره کوچک در وسط تصویر به منظور آماده کردن تصویر برای پس زمینه اسلاید مشاهده می کنید.

در پنجره نشان داده شده می توانید میزان شفافیت و Blur تصویر، رنگ، گرادیان و بسیاری موارد دیگر را تنظیم کنید.

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

با کلیک کردن بر روی دکمه + پنجره ای مشابه شکل زیر باز می شود. این پنجره دارای دو تب Layer و Library است.

در تب Layer انواع لایه های موجود در افزونه Smart Slider 3 نشان داده شده است. لایه های نشان داده شده در تصویر فوق مربوط به نسخه رایگان افزونه Smart Slider 3 است. در نسخه Pro این افزونه لایه های بیشتری وجود دارد.

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

در تب Layer می توانید ناحیه محتوا را بر طبق نیازهای خود به ردیف ها و ستون های مختلف تقسیم بندی کنید و در هر ستون یک لایه قرار دهید.

در تب Library مجموعه ای شامل بیش از 100 اسلاید از پیش تعریف شده وجود دارد.

این اسلایدها در مجموعه های مختلفی مانند Header، Feature، Media و … تقسیم بندی شده اند. هر اسلاید دارای نسخه تاریک/روشن است که در بالای تب با یک پنجره کشویی قابل انتخاب است.

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

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

جال که یک دید کلی درباره لایه ها و قابلیت های موجود در افزونه Smart Slider 3 به دست آورده اید، در ادامه آموزش به بررسی لایه های موجود در افزونه Smart Slider 3 می پردازیم.

لایه Heading

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

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

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

لایه Text

لایه متن بعد از عنوان قرار می گیرد و در این قسمت از آموزش به بررسی این لایه در افزونه Smart Slider 3 می پردازیم.

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

لایه Image

اگر از یک تصویر تمام صفحه یا پس زمینه ویدئو برای ناحیه محتوا استفاده نمی کنید می توانید از محتوای تصویر جزئی برای پر کردن اسلاید خود استفاده کنید. کافی است تصویر مورد نظر خود را آپلود کرده و در پنجره باز شده تنظیمات مربوط به آن را انجام دهید. شما در این پنجره می توانید تگ alt و عنوان تصویر را برای بهبود سئو تصاویر مشخص کنید

لایه Button

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

لایه YouTube، Vimeo

دو گزینه مختلف برای اضافه کردن محتوای ویدئویی به اسلایدها وجود دارد که شامل Vimeo و YouTube است. هریک از این موارد فرآیند جاسازی محتوای ویدئویی از منابع دیگر را ساده می کند.

علاوه بر موارد فوق و قرار دادن لایه های مختلف در صفحه محتوا می توانید صفحه محتوا را نیز طبق نیازهای خود تنظیم کنید. در ادامه آموزش افزونه Smart Slider 3 به بررسی این موضوع می پردازیم.

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

در این پنجره می توانید تنظیمات مفیدی مانند Vertical align را انجام دهید. با قرار دادن موس بر روی صفحه می توانید مارجین (margin) و پدینگ (padding) عناصر صفحه را تنظیم کنید.

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

افزونه Smart Slider 3 دو مد ویرایش بصری مختلف برای ساخت اسلایدها دارد که شامل مد محتوا (content) و مد بوم (canvas) است. در مد محتوا، اسلایدر مانند یک صفحه ساز عمل می کند در حالیکه در مد بوم آزادی کار کردن با لایه ها را به صورت نامحدود دارید. در مد Canvas می توانید لایه ها را در هر جایی از صفحه قرار دهید.

وقتی در حالت Canvas کار می کنید، لایه ها عناصر جداگانه ای هستند و با یکدیگر تعامل ندارند. در این حالت افزونه Smart Slider 3 یک سازنده کشیدن و رها کردن واقعی است.

هنگام کار در حالت Content، با لایه ها به عنوان بلوک کار می کنید. یک لایه به لایه های دیگری که آن را احاطه کرده است، متصل می شود. بنابراین کار کردن در این مد مانند کار کردن با بلوک ها است.

لایه ها در مد Content می توانند به مد Canvas منتقل شوند.

از مطالب زیر نیز دیدن فرمایید:

• خرید بازدید کننده وب سایت
• سئو 2021
• خرید بازدید گوگل
• کاهش رتبه الکسا

انتشار اسلایدر ساخته شده با افزونه Smart Slider 3 در یک نوشته یا برگه

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

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

شورت کد

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

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

ویرایشگر نوشته یا برگه

در ویرایشگر گوتنبرگ وردپرس با نصب و فعال سازی افزونه Smart Slider 3، بلوک جدیدی به همین نام اضافه می شود.

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

PHP code

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

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

امیدواریم این آموزش مورد استفاده شما قرار گرفته باشد.

دانلود رایگان افزونه 3 Smart Slider