افزودن اسلایدر در وردپرس بدون کدنویسی

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

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

افزودن اسلایدر در وردپرس بدون کدنویسی

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

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

اسلایدر وردپرس چیه و کجا به کارتون میاد؟

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

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

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

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

برای ساخت اسلایدر به چی نیاز دارید؟

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

• تصویرهای هم‌اندازه: بهتره همه تصاویر نسبت طول به عرض یکسانی داشته باشن. مثلاً اگه اسلایدرتون عریضه، همه تصاویر رو هم به‌صورت عریض آماده کنید.
• عنوان کوتاه: عنوان هر اسلاید رو تا جای ممکن کوتاه نگه دارید تا کاربر بتونه اون رو سریع بخونه.
• توضیح ساده: یک یا دو جمله برای توضیح پیام هر اسلاید کافیه.
• دکمه مشخص: متن‌هایی مثل «مشاهده دوره»، «دیدن محصولات» یا «دریافت مشاوره» از عبارت‌های مبهم واضح‌تر هستن.
• افزونه Smart Slider 3: نسخه رایگان افزونه برای انجام مراحل این آموزش مناسبه.

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

نصب و فعال‌سازی افزونه Smart Slider 3

برای نصب افزونه، وارد پیشخوان وردپرس بشید و مراحل زیر رو انجام بدید:

1. از منوی پیشخوان روی «افزونه‌ها» و بعد «افزودن افزونه تازه» کلیک کنید.
2. عبارت «Smart Slider 3» رو داخل کادر جست‌وجو بنویسید.
3. کارت افزونه Smart Slider 3 رو پیدا کنید و روی دکمه «هم‌اکنون نصب نمایید» کلیک کنید.
4. وقتی نصب تموم شد، دکمه «فعال نمایید» رو بزنید.
5. حالا منوی Smart Slider رو در پیشخوان می‌بینید. روی اون کلیک کنید تا صفحه افزونه باز بشه.

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

ساخت اسلایدر با قالب آماده

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

در صفحه اصلی افزونه روی «New Project» کلیک کنید و بعد گزینه «Start with a Template» رو انتخاب کنید.

قالب‌ها رو ببینید و طرحی ساده انتخاب کنید که به ظاهر سایتتون نزدیک باشه. یادتون باشه ممکنه بعضی قالب‌ها فقط در نسخه Pro در دسترس باشن.

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

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

ساخت اسلایدر از صفر در Smart Slider 3

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

1. روی «New Project» کلیک کنید و گزینه «Create a New Project» رو بزنید.
2. نوع پروژه اسلایدر رو انتخاب کنید و یک نام روشن مثل «اسلایدر صفحه اصلی» براش بنویسید.
3. عرض و ارتفاع اولیه رو تنظیم کنید. اندازه‌ای متناسب با محل نمایش در نظر بگیرید تا تصویر بی‌دلیل خیلی بلند نشه.
4. پروژه رو بسازید و روی گزینه افزودن اسلاید جدید کلیک کنید.
5. تصویر پس‌زمینه رو از کتابخانه رسانه وردپرس بردارید یا یک تصویر تازه بارگذاری کنید.
6. لایه عنوان رو اضافه کنید. لایه یعنی یک بخش جدا مثل متن، تصویر یا دکمه که روی اسلاید قرار می‌گیره.
7. اگه لازم بود، یک توضیح کوتاه و یک دکمه هم اضافه کنید.
8. رنگ، اندازه و جای متن رو طوری تنظیم کنید که روی تصویر به‌راحتی دیده بشه.
9. زمان نمایش و نوع جابه‌جایی بین اسلایدها رو تنظیم کنید. یک حرکت ساده معمولاً نتیجه مرتب‌تری بهتون می‌ده.
10. روی «Save» کلیک کنید و نتیجه رو در «Preview» ببینید.

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

اضافه‌کردن اسلایدر به برگه یا نوشته وردپرس

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

قرار دادن اسلایدر با بلوک Smart Slider

1. برگه یا نوشته موردنظرتون رو در ویرایشگر وردپرس باز کنید.
2. روی دکمه افزودن بلوک با علامت «+» کلیک کنید.
3. عبارت «Smart Slider» رو جست‌وجو کنید و بلوک افزونه رو بردارید.
4. روی گزینه انتخاب اسلایدر کلیک کنید و پروژه‌ای رو که ساختید انتخاب کنید.
5. برگه رو به‌روزرسانی یا منتشر کنید.
6. صفحه رو در یک تب تازه باز کنید و نتیجه رو هم روی دسکتاپ و هم روی موبایل ببینید.

قرار دادن اسلایدر با شورت‌کد

اگه بلوک افزونه رو پیدا نکردید یا بخشی که باهاش کار می‌کنید از شورت‌کد پشتیبانی می‌کنه، این مراحل رو جلو برید:

1. پروژه رو در Smart Slider باز کنید و شورت‌کد همون اسلایدر رو کپی کنید.
2. در ویرایشگر وردپرس یک بلوک «شورت‌کد» اضافه کنید.
3. کدی رو که کپی کردید داخل بلوک بذارید.
4. صفحه رو به‌روزرسانی کنید و نمایش اسلایدر رو ببینید.

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

تنظیمات مهم برای یک اسلایدر بهتر

اندازه رو برای موبایل و دسکتاپ بررسی کنید

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

حجم تصاویر رو پایین نگه دارید

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

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

متن رو روی تصویر خوانا نگه دارید

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

حرکت‌های ساده و آرام انتخاب کنید

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

برای هر دکمه یک هدف مشخص بذارید

کاربر باید با دیدن متن دکمه بفهمه بعد از کلیک به کجا می‌ره. دکمه «بیشتر» اطلاعات زیادی بهش نمی‌ده، ولی «مشاهده محصولات» یا «دیدن نمونه‌کارها» مقصد رو روشن می‌کنه. بعد از انتشار، لینک هر دکمه رو هم امتحان کنید.

مشکل‌های رایج اسلایدر و راه‌حل آن‌ها

اسلایدر در صفحه نمایش داده نمی‌شه

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

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

تصویرها کشیده یا بریده دیده می‌شن

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

اسلایدر در موبایل درست نیست

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

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

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

سوالات متداول

جمع‌بندی

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

تیم تولید محتوا

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