آموزشها
قالب‌ها
افزونه‌ها
آکادمی
هاست وردپرس
طراحی سایت
فرمانساخت اسلایدر تصاویر در وردپرس با افزونه MetaSlider
- مقالات آموزشیافزونه وردپرس
- بروزرسانی شده در
برای ساخت اسلایدر تصاویر در وردپرس لازم نیست کدنویسی بلد باشید. در این آموزش با MetaSlider یک اسلایدر تصویری می‌سازید، ظاهر و حرکتش رو تنظیم می‌کنید و اون رو داخل برگه یا نوشته می‌ذارید. در کنارش یاد می‌گیرید چطور تصاویر رو سبک، خوانا و مناسب موبایل نگه دارید تا اسلایدر به سرعت و تجربه کاربر آسیب نزنه.
آنچه در این مقاله می‌خوانید
ساخت اسلایدر تصاویر در وردپرس چه کاربردی داره؟
اسلایدر چند تصویر یا پیام رو یکی‌یکی داخل یک قاب نشون می‌ده. این روش برای معرفی چند محصول، نمونه‌کار، خدمت یا نوشته مهم مناسبه؛ به‌خصوص وقتی همه اون‌ها ارزش تقریباً یکسانی دارن و نمی‌خواید فضای زیادی از صفحه رو بگیرن. اگه هدفتون نمایش خودکار نوشته‌های تازه هست، آموزش ساخت اسلایدر آخرین مطالب در وردپرس انتخاب دقیق‌تریه.
اسلایدر برای چه سایت‌هایی مناسبه؟
فروشگاه‌ها می‌تونن چند دسته محصول یا پیشنهاد مهم رو معرفی کنن. سایت‌های شرکتی و نمونه‌کار هم می‌تونن خدمات یا پروژه‌هاشون رو در چند اسلاید کوتاه نشون بدن. بهتره هر اسلاید فقط یک پیام، یک تصویر اصلی و یک مقصد مشخص داشته باشه تا بازدیدکننده سریع متوجه بشه باید چه کاری انجام بده.
چه وقت‌هایی بهتره از اسلایدر استفاده نکنید؟
اگه فقط یک پیام خیلی مهم دارید، یک تصویر ثابت همراه با عنوان و دکمه معمولاً انتخاب روشن‌تریه. بعضی بازدیدکننده‌ها قبل از عوض‌شدن اسلاید صفحه رو پایین می‌برن؛ پس نباید اطلاعات ضروری رو فقط در اسلایدهای دوم و بعدی بذارید.
متن طولانی، فرم، جدول قیمت و اطلاعاتی که باید با دقت خونده بشن هم برای اسلایدر مناسب نیستن. این محتواها رو در بخش ثابت صفحه بذارید تا حرکت خودکار تمرکز کاربر رو به هم نزنه.
تأثیر اسلایدر روی سرعت سایت و تجربه کاربر
هر تصویر حجم جداگانه‌ای به صفحه اضافه میکنه. برای همین بهتره تعداد اسلایدها رو محدود کنید، تصاویر رو با ابعاد مناسب بسازید و قبل از آپلود فشرده‌شون کنید. اگه سایتتون کند باز میشه، راهنمای بررسی دلیل کند بودن سایت وردپرسی بهتون کمک میکنه علت اصلی رو پیدا کنید.
زمان تعویض اسلایدها باید برای خوندن متن کافی باشه. دکمه‌های قبلی و بعدی هم باید واضح و روی موبایل قابل لمس باشن. بعد از ساخت اسلایدر، حتماً اون رو با گوشی واقعی بررسی کنید تا تصویر، نوشته یا دکمه از قاب بیرون نزنه.
ساخت اسلایدر بدون افزونه با قالب اهورا
اگه از قالب اهورا استفاده می‌کنید، برای ساخت خیلی از اسلایدرهای سایتتون لازم نیست حتماً افزونه جداگانه‌ای نصب کنید. میتونید با المان‌های خود قالب، اسلایدرهای مختلفی برای تصاویر، محصولات یا بخش‌های مهم سایتتون بسازید.
این روش تعداد افزونه‌های سایتتون رو کمتر نگه می‌داره و مدیریت طراحی رو هم ساده‌تر میکنه. بااین‌حال، قبل از انتخاب بهتره بررسی کنید المان‌های اسلایدر اهورا دقیقاً امکانات موردنیازتون رو دارن. اگه به تنظیمات تخصصی MetaSlider نیاز ندارید، استفاده از امکانات خود قالب میتونه انتخاب راحت‌تری باشه.
آشنایی با افزونه MetaSlider Slideshow
MetaSlider Slideshow افزونه‌ای برای ساخت و مدیریت اسلایدشو در وردپرسه. اسلایدشو یعنی مجموعه‌ای از اسلایدها که داخل یک قاب نمایش داده میشن. با این افزونه میتونید تصاویر کتابخانه رسانه وردپرس رو انتخاب کنید، ترتیبشون رو تغییر بدید و برای هر تصویر توضیح، لینک و متن جایگزین بذارید.
طبق مستندات رسمی گزینه‌های قدیمی MetaSlider، نصب‌های تازه به‌صورت پیش‌فرض از FlexSlider استفاده میکنن. FlexSlider موتور نمایش اسلایدهاست و اندازه اسلایدر رو با صفحه‌های مختلف هماهنگ میکنه. گزینه‌های Responsive Slides، Nivo Slider و Coin Slider از سال ۲۰۲۳ در نصب‌های تازه مخفی و به‌عنوان Legacy یا قدیمی نگهداری میشن. سایت‌هایی که از قبل از اون‌ها استفاده می‌کردن ممکنه هنوز این گزینه‌ها رو ببینن، ولی توسعه قابلیت‌های تازه روی FlexSlider متمرکزه.
با نسخه رایگان افزونه چه اسلایدری میتونید بسازید؟
براساس راهنمای رسمی اسلاید تصویری MetaSlider، اسلاید تصویری در هر دو نسخه رایگان و Pro در دسترسه. در نسخه رایگان میتونید تصویر اضافه کنید، برای اون توضیح و لینک بذارید و متن عنوان و Alt یا متن جایگزین رو تنظیم کنید. Alt توضیح کوتاهی از محتوای تصویر برای صفحه‌خوان‌ها و وقتیه که تصویر نمایش داده نمی‌شه.
برای ساخت یک اسلایدر معمولی بهتره اول نسخه رایگان رو امتحان کنید. بعد از ساخت نمونه اولیه راحت‌تر متوجه می‌شید امکانات فعلی نیازتون رو برطرف میکنن یا باید سراغ نسخه پولی برید.
تفاوت امکانات رایگان و MetaSlider Slideshow Pro
نسخه Pro برای اسلایدهای پیشرفته‌تر امکانات بیشتری داره. طبق جدول رسمی مقایسه MetaSlider رایگان و Pro، قابلیت‌هایی مثل اسلاید لایه‌ای، ویدئوهای YouTube و Vimeo، اسلاید نوشته‌ها، محصولات ووکامرس، HTML سفارشی، زمان‌بندی اسلایدها و قالب‌های پولی در نسخه Pro ارائه میشن.
امکانات و شیوه عرضه نسخه‌ها ممکنه با به‌روزرسانی‌های بعدی عوض بشن؛ پس قبل از خرید، همین جدول رسمی رو دوباره بررسی کنید. برای مراحل اصلی این آموزش و ساخت اسلایدر تصویری معمولی به نسخه Pro نیاز ندارید.
پیش‌نیازهای ساخت اسلایدر تصاویر در وردپرس
- به پیشخوان وردپرس و اجازه نصب افزونه دسترسی داشته باشید.
- چند تصویر باکیفیت و ترجیحاً هم‌اندازه آماده کنید.
- برای هر تصویر، مقصد لینک و متن جایگزین مناسب رو مشخص کنید.
- قبل از تغییر یک سایت فعال، یک نسخه پشتیبان تازه داشته باشید.
اگه گزینه نصب افزونه رو نمی‌بینید، احتمالاً حساب کاربریتون اجازه لازم رو نداره یا سایتتون بخشی از یک شبکه وردپرسه. در این حالت از مدیر اصلی سایت کمک بگیرید.
نصب افزونه MetaSlider Slideshow در وردپرس
- وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید.
- داخل کادر جستجو عبارت MetaSlider Slideshow رو بنویسید.
- افزونه MetaSlider Slideshow رو پیدا کنید و نام سازنده و صفحه رسمی افزونه رو بررسی کنید تا گزینه درست رو نصب کنید.
- روی «هم‌اکنون نصب کن» کلیک کنید و بعد از پایان نصب، دکمه «فعال‌کردن» رو بزنید.
بعد از فعال‌سازی، گزینه MetaSlider به منوی پیشخوان اضافه میشه. اگه این گزینه رو ندیدید، صفحه پیشخوان رو یک‌بار تازه‌سازی کنید. در بعضی چیدمان‌ها ممکنه گزینه افزونه پایین‌تر از بقیه گزینه‌های منو باشه.
ساخت اولین اسلایدر تصاویر در وردپرس
ساخت یک اسلایدشو خالی
از منوی سمت راست پیشخوان روی MetaSlider کلیک کنید. اگه صفحه خوش‌آمدگویی افزونه باز شد، وارد بخش ساخت اسلایدشو بشید و دکمه Create blank slideshow رو بزنید. این دکمه یک اسلایدشوی خالی باز میکنه تا تصاویر خودتون رو به اون اضافه کنید.
بالای صفحه ویرایش، نام فعلی اسلایدشو رو پیدا کنید و یک اسم قابل‌تشخیص مثل «اسلایدر صفحه اصلی» براش بذارید. این نام فقط برای مدیریت خودتونه و معمولاً داخل سایت نمایش داده نمی‌شه. اگه ظاهر صفحه شما کمی فرق داره، دنبال گزینه ساخت اسلایدشوی تازه یا علامت افزودن کنار فهرست اسلایدشوها بگردید؛ جای بعضی دکمه‌ها ممکنه بین نسخه‌های افزونه عوض بشه.
انتخاب نوع اسلایدر مناسب
در صفحه ویرایش اسلایدشو، پنل تنظیمات رو در سمت راست یا پایین فهرست اسلایدها پیدا کنید. اگه بخشی برای انتخاب نوع اسلایدر می‌بینید، FlexSlider رو انتخاب کنید. در نصب‌های تازه ممکنه FlexSlider از قبل انتخاب شده باشه و اصلاً لازم نباشه چیزی رو تغییر بدید.
اگه روی یک سایت قدیمی گزینه‌هایی مثل Nivo Slider یا Coin Slider رو می‌بینید، فقط برای داشتن افکت‌های بیشتر سراغ اون‌ها نرید. این گزینه‌ها قدیمی هستن و ممکنه در نصب تازه نمایش داده نشن. برای این آموزش همون FlexSlider انتخاب ساده‌تر و مطمئن‌تریه.
اضافه‌کردن اسلاید تصویری با Add Slide
در بالای فهرست اسلایدها روی دکمه Add Slide کلیک کنید. پنجره انتخاب نوع اسلاید باز میشه. گزینه Image رو انتخاب کنید تا کتابخانه رسانه وردپرس باز بشه. اگه افزونه مستقیماً کتابخانه رسانه رو باز کرد، یعنی نوع اسلاید تصویری از قبل انتخاب شده.
انتخاب یا آپلود تصاویر
برای استفاده از تصویر موجود، در پنجره رسانه وارد زبانه «کتابخانه پرونده‌های چندرسانه‌ای» بشید و روی تصویر موردنظرتون کلیک کنید. برای فرستادن فایل تازه، زبانه «بارگذاری پرونده‌ها» رو باز کنید، روی «گزینش پرونده‌ها» بزنید و تصویر رو از کامپیوتر انتخاب کنید. میتونید چند تصویر رو هم‌زمان انتخاب کنید، ولی بهتره همه اون‌ها نسبت طول به عرض یکسانی داشته باشن.
بعد از علامت‌زدن تصاویر، روی دکمه Add To Slideshow در پایین پنجره کلیک کنید. چند لحظه صبر کنید تا تصویرها به صفحه ویرایش برگردن. اگه دکمه غیرفعاله، بررسی کنید حداقل یک تصویر انتخاب شده باشه.
مرتب‌کردن و حذف اسلایدها
برای تغییر ترتیب، نشانگر ماوس رو روی کارت هر اسلاید ببرید، اون رو بگیرید و به بالا یا پایین بکشید. بعد از رهاکردن، ترتیب تازه رو در فهرست می‌بینید. مهم‌ترین تصویر رو در جای اول بذارید؛ چون همه بازدیدکننده‌ها منتظر اسلایدهای بعدی نمی‌مونن.
برای کنارگذاشتن یک اسلاید، گزینه حذف همون کارت رو بزنید. نام یا شکل این گزینه ممکنه Delete، آیکن سطل زباله یا علامت ضربدر باشه. حذف اسلاید معمولاً فایل اصلی رو از کتابخانه رسانه پاک نمی‌کنه و فقط اون تصویر رو از همین اسلایدشو کنار می‌ذاره. بااین‌حال، قبل از تأیید حذف، تصویر انتخاب‌شده رو دوباره بررسی کنید.
ذخیره و پیش‌نمایش اسلایدر
بعد از اضافه‌کردن یا مرتب‌کردن تصاویر، دکمه Save یا «ذخیره» رو در صفحه ویرایش اسلایدشو بزنید. بعد روی Preview یا «پیش‌نمایش» کلیک کنید. در پنجره پیش‌نمایش، ترتیب تصاویر، برش، نوشته‌ها و دکمه‌های جابه‌جایی رو بررسی کنید.
پیش‌نمایش داخل افزونه همیشه دقیقاً هم‌اندازه محل نهایی سایت نیست. برای بررسی واقعی، اسلایدر رو داخل یک برگه آزمایشی قرار بدید و اون برگه رو روی کامپیوتر و موبایل باز کنید.
تنظیم هر اسلاید تصویری
هر تصویر تنظیمات جداگانه‌ای داره. روی کارت همون تصویر در فهرست اسلایدها کار کنید و زبانه‌هایی مثل General، Link، SEO، Mobile و Crop رو باز کنید. نام یا تعداد این زبانه‌ها ممکنه با توجه به نسخه رایگان یا Pro و نسخه افزونه کمی فرق کنه.
تنظیم عنوان و توضیح تصویر در بخش General
روی زبانه General همون اسلاید کلیک کنید. اگه کادر Caption یا توضیح رو می‌بینید، متن کوتاهی بنویسید که پیام تصویر رو کامل کنه. این متن ممکنه روی خود تصویر یا پایین اون نمایش داده بشه؛ ظاهر دقیقش به قالب اسلایدر بستگی داره.
متن رو طولانی نکنید. یک عنوان کوتاه و در صورت نیاز یک جمله توضیح کافیه. بعد از ذخیره، پیش‌نمایش رو باز کنید تا مطمئن بشید نوشته روی موبایل بخش مهم تصویر رو نمی‌پوشونه.
لینک‌دادن تصویر به صفحه دلخواه در بخش Link
روی زبانه Link اسلاید کلیک کنید و نشانی کامل صفحه مقصد رو داخل کادر لینک بچسبونید. برای نمونه، اگه اسلاید یک محصول رو معرفی میکنه، نشانی همون صفحه محصول رو وارد کنید. بعد از ذخیره، اسلایدر رو در برگه واقعی باز کنید و روی تصویر بزنید تا مطمئن بشید مقصد درست باز میشه.
اگه گزینه‌ای برای بازکردن لینک در پنجره یا زبانه تازه می‌بینید، اون رو فقط وقتی فعال کنید که دلیل مشخصی دارید. لینک‌های داخلی سایت معمولاً بهتره در همون زبانه باز بشن. اگه کادر لینک رو خالی بذارید، تصویر بدون مقصد کلیک‌پذیر باقی می‌مونه.
نوشتن متن جایگزین در بخش SEO
زبانه SEO اسلاید رو باز کنید. داخل کادر Alt Text یا متن جایگزین، محتوای مهم تصویر رو کوتاه و دقیق توضیح بدید. Alt متنیه که به صفحه‌خوان کمک میکنه مفهوم تصویر رو برای کاربری که اون رو نمی‌بینه توضیح بده. مثلاً «نمای داشبورد فروشگاه اینترنتی روی لپ‌تاپ» از «عکس عالی فروشگاه» مفیدتره.
اگه کادر Image Title Text یا عنوان تصویر هم دیده میشه، اون رو با Alt اشتباه نگیرید. برای دسترس‌پذیری، Alt اهمیت اصلی رو داره. کلمه کلیدی رو هم بی‌دلیل تکرار نکنید. اگه تصویر کاملاً تزئینیه و اطلاعاتی منتقل نمی‌کنه، متن جایگزین خالی میتونه انتخاب درست‌تری باشه. برای آشنایی بیشتر با مفهوم سئو، راهنمای سئو چیست رو بخونید.
کنترل نمایش اسلاید در موبایل
اگه روی کارت اسلاید زبانه Mobile رو می‌بینید، اون رو باز کنید. گزینه‌های این بخش ممکنه امکان پنهان‌کردن همون اسلاید در بعضی اندازه‌های صفحه رو بدن. این تنظیم فقط روی اسلاید انتخاب‌شده اثر می‌ذاره، نه کل اسلایدشو. بعضی گزینه‌های موبایل هم ممکنه فقط در نسخه یا قابلیت خاصی در دسترس باشن.
قبل از پنهان‌کردن اسلاید، پیش‌نمایش موبایل رو بررسی کنید. اگه مشکل فقط نوشته طولانی یا برش نامناسبه، بهتره اول متن رو کوتاه و تصویر رو اصلاح کنید. اگه اون اسلاید تنها مسیر رسیدن به یک پیشنهاد مهمه، با پنهان‌کردنش کاربران موبایل اون پیشنهاد رو از دست می‌دن.
تنظیم نحوه برش تصویر در بخش Crop
زبانه Crop همون اسلاید رو باز کنید. این بخش مشخص میکنه افزونه برای هماهنگ‌کردن تصویر با قاب اسلایدر، کدوم قسمت اون رو نگه داره. اگه گزینه تعیین محل برش یا نقطه تمرکز می‌بینید، اون رو طوری انتخاب کنید که چهره، محصول یا نوشته مهم داخل قاب بمونه.
بعد از تغییر برش، روی Save بزنید و پیش‌نمایش رو دوباره باز کنید. وقتی همه تصاویر نسبت یکسانی دارن، نتیجه مرتب‌تر میشه. اگه یک تصویر افقی و تصویر بعدی عمودیه، ممکنه بخشی از تصویر بریده بشه یا ارتفاع اسلایدر تغییر محسوسی داشته باشه.
تنظیم ظاهر و رفتار اسلایدر
حالا سراغ تنظیمات کلی اسلایدشو برید. این گزینه‌ها معمولاً در پنل سمت راست صفحه MetaSlider قرار دارن و روی همه اسلایدها اثر می‌ذارن. ممکنه برای دیدن همه گزینه‌ها لازم باشه بخش Advanced Settings یا تنظیمات پیشرفته رو باز کنید. نام و جای بعضی گزینه‌ها هم با نسخه افزونه یا نوع اسلایدر کمی فرق میکنه.
انتخاب اندازه مناسب اسلایدر
در پنل تنظیمات کلی، بخش Width و Height رو پیدا کنید. Width عرض و Height ارتفاع اسلایدره و مقدار اون‌ها معمولاً با پیکسل نوشته میشه. برای نمونه، اگه قاب موردنظرتون ۱۲۰۰ پیکسل عرض و ۶۰۰ پیکسل ارتفاع داره، نسبت همه تصاویر رو نزدیک به همین اندازه آماده کنید.
عرض رو براساس فضایی تنظیم کنید که اسلایدر داخل اون نمایش داده میشه. اگه اسلایدر داخل ستون محتوای ۸۰۰ پیکسلی قرار می‌گیره، استفاده از تصویر خیلی بزرگ فقط حجم بیشتری به صفحه اضافه میکنه. بعد از واردکردن اندازه‌ها، Save رو بزنید و نتیجه رو داخل برگه واقعی ببینید؛ چون قالب سایت ممکنه عرض نهایی رو محدود کنه.
تنظیم حرکت خودکار و زمان نمایش اسلایدها
در همون پنل تنظیمات کلی، گزینه Autoplay رو پیدا کنید. با فعال‌کردن اون، اسلایدها بدون کلیک کاربر عوض میشن. برای تعیین فاصله بین تعویض‌ها، دنبال گزینه‌ای مثل Slide delay یا Slideshow speed بگردید. این مقدار معمولاً با میلی‌ثانیه نوشته میشه؛ یعنی ۵۰۰۰ میلی‌ثانیه برابر با ۵ ثانیه هست.
زمان رو طوری انتخاب کنید که کاربر فرصت خوندن عنوان و توضیح اسلاید رو داشته باشه. اگه هر اسلاید متن بیشتری داره، حرکت خودکار رو خاموش کنید یا زمان بیشتری بذارید. در بعضی نسخه‌ها گزینه‌هایی مثل توقف هنگام رفتن نشانگر روی اسلایدر هم دیده میشن. بعد از هر تغییر، اسلایدر رو ذخیره و حرکتش رو در پیش‌نمایش آزمایش کنید.
فعال‌کردن دکمه‌های قبلی و بعدی
در تنظیمات کلی دنبال گزینه Arrows بگردید و اون رو فعال کنید. این گزینه دکمه‌های قبلی و بعدی رو روی دو طرف اسلایدر نشون می‌ده. اگه چنین گزینه‌ای رو نمی‌بینید، بخش تنظیمات پیشرفته رو باز کنید یا بررسی کنید قالب انتخابی اسلایدر کنترل پیکانی رو پشتیبانی میکنه یا نه.
بعد از ذخیره، دکمه‌ها رو روی زمینه روشن و تیره بررسی کنید. روی موبایل هم چند بار اون‌ها رو با انگشت بزنید تا مطمئن بشید خیلی کوچک یا نزدیک لبه صفحه نیستن.
تنظیم نقطه‌های پیمایش اسلایدر
برای نمایش تعداد اسلایدها و جای فعلی کاربر، گزینه Navigation رو در پنل تنظیمات پیدا کنید. بسته به نسخه یا نوع اسلایدر، ممکنه بتونید حالت نقطه‌ای یا گزینه‌ای مثل Dots رو انتخاب کنید. بعد از فعال‌کردن، پایین اسلایدر به‌اندازه تعداد تصاویر نقطه‌های پیمایش دیده میشن.
اسلایدشو رو ذخیره کنید و روی هر نقطه بزنید تا جابه‌جایی درست رو بررسی کنید. اگه تعداد نقطه‌ها خیلی زیاده و ظاهر صفحه رو شلوغ میکنه، بهتره تعداد اسلایدها رو کمتر کنید.
بررسی نمایش اسلایدر در موبایل و تبلت
اول پیش‌نمایش رو باز کنید و عرض پنجره مرورگر رو کم کنید، ولی به همین بررسی اکتفا نکنید. برگه‌ای رو که اسلایدر داخلش قرار گرفته با یک موبایل واقعی باز کنید. خوانایی متن، اندازه دکمه‌ها، برش تصویر، حرکت لمسی و فاصله اسلایدر با بخش‌های بعدی صفحه رو بررسی کنید. گوشی رو یک‌بار عمودی و یک‌بار افقی بگیرید.
اگه بقیه بخش‌های صفحه هم روی موبایل مشکل دارن، راهنمای طراحی صفحات ریسپانسیو در المنتور میتونه برای صفحاتی که با المنتور ساخته شدن مفید باشه.
قراردادن اسلایدر در برگه یا نوشته وردپرس
نمایش اسلایدر با بلوک Slideshows
از پیشخوان وردپرس وارد «برگه‌ها» یا «نوشته‌ها» بشید و موردی رو که می‌خواید ویرایش کنید باز کنید. داخل ویرایشگر بلوکی، روی علامت + کلیک کنید و عبارت MetaSlider یا Slideshow رو جستجو کنید. بلوک اسلایدشوی MetaSlider رو انتخاب کنید. نام دقیق بلوک ممکنه در نسخه‌های مختلف MetaSlider یا Slideshows دیده بشه.
بعد از اضافه‌شدن بلوک، فهرست انتخاب اسلایدشو رو باز کنید و همون اسلایدری رو انتخاب کنید که ساختید. روی «به‌روزرسانی» یا «انتشار» بزنید و بعد «نمایش برگه» رو باز کنید. اگه بلوک رو پیدا نمی‌کنید، مطمئن بشید افزونه فعاله و اسلایدر حداقل یک‌بار ذخیره شده.
نمایش اسلایدر با شورتکد
شورتکد یک قطعه کوتاه داخل براکته که وردپرس اون رو به اسلایدر تبدیل میکنه. از منوی پیشخوان وارد MetaSlider بشید و اسلایدشوی موردنظرتون رو باز کنید. در صفحه ویرایش، کادر How to Use یا بخش استفاده از اسلایدر رو پیدا کنید و شورتکد آماده افزونه رو کپی کنید. این کد معمولاً شناسه مخصوص همون اسلایدشو رو داخل خودش داره.
حالا برگه یا نوشته رو باز کنید، روی علامت + بزنید و بلوک «کد کوتاه» یا Shortcode رو اضافه کنید. شورتکد کپی‌شده رو بدون تغییر داخل بلوک بچسبونید و برگه رو به‌روزرسانی کنید. شناسه رو دستی تایپ نکنید؛ چون یک عدد اشتباه ممکنه اسلایدر دیگه‌ای رو نشون بده یا هیچ خروجی نسازه.
نمایش اسلایدر با ابزارک
اگه قالب کلاسیک شما ناحیه ابزارک داره، از مسیر «نمایش ← ابزارک‌ها» وارد صفحه ابزارک‌ها بشید. ناحیه‌ای مثل ستون کناری یا پابرگ رو باز کنید، روی علامت + بزنید و بلوک MetaSlider یا «کد کوتاه» رو اضافه کنید. اگه بلوک MetaSlider در دسترسه، اسلایدشو رو از فهرست انتخاب کنید. در غیر این صورت، شورتکد رو داخل بلوک «کد کوتاه» بچسبونید.
در قالب‌های بلوکی ممکنه مسیر «نمایش ← ابزارک‌ها» دیده نشه. در این قالب‌ها از «نمایش ← ویرایشگر» وارد ویرایشگر سایت بشید، بخش موردنظرتون مثل پابرگ رو باز کنید و بلوک اسلایدر یا کد کوتاه رو همون‌جا بذارید. قبل از ذخیره، عرض اسلایدر رو با فضای اون بخش مقایسه کنید؛ اسلایدری که برای عرض کامل ساخته شده، داخل ستون باریک ظاهر مناسبی نداره.
استفاده از کد PHP برای قالب‌های اختصاصی
PHP زبان برنامه‌نویسی سمت سرور وردپرسه. این روش فقط وقتی مناسبه که قالب اختصاصی دارید و می‌خواید اسلایدر همیشه در محل ثابتی مثل سربرگ یا فایل یک قالب برگه نمایش داده بشه. از پیشخوان وارد MetaSlider بشید، اسلایدشو رو باز کنید و در کادر How to Use زبانه یا گزینه Template Include رو پیدا کنید. قطعه کد PHP ساخته‌شده برای همون اسلایدر رو کامل کپی کنید. نام این بخش ممکنه در بعضی نسخه‌ها کمی فرق داشته باشه.
کد رو داخل فایل قالبی بذارید که دقیقاً همون محل نمایش رو کنترل میکنه؛ برای نمونه فایل سربرگ، قالب برگه یا یک فایل بخش‌بندی‌شده از قالب. اون رو داخل ویرایشگر نوشته یا بلوک HTML نذارید، چون کد PHP اونجا اجرا نمی‌شه. شناسه داخل کد رو هم دستی عوض نکنید؛ هر اسلایدشو شناسه جداگانه‌ای داره.
این روش برای کاربر مبتدی پیشنهاد نمی‌شه. یک اشتباه کوچک در فایل PHP میتونه سایت رو با خطا روبه‌رو کنه. قبل از ویرایش، نسخه پشتیبان بگیرید و تغییر رو روی چایلدتم یا سایت آزمایشی انجام بدید تا با به‌روزرسانی قالب پاک نشه. راهنمای ترفندهای امن فایل functions.php وردپرس پیش‌زمینه بهتری برای کار با کدهای قالب بهتون می‌ده.
بهینه‌کردن اسلایدر برای سرعت، سئو و دسترس‌پذیری
- ابعاد تصویر رو متناسب انتخاب کنید: تصویری که چند برابر فضای نمایش عرض داره، حجم اضافی به صفحه تحمیل میکنه. تصاویر رو قبل از آپلود تغییر اندازه و فشرده کنید.
- برای هر تصویر متن جایگزین درست بنویسید: محتوای واقعی تصویر رو کوتاه توضیح بدید و از تکرار بی‌دلیل کلمه کلیدی دوری کنید.
- تعداد اسلایدها رو محدود نگه دارید: فقط پیام‌های اصلی رو نمایش بدید. اسلایدهای زیاد هم صفحه رو سنگین میکنن و هم احتمال دیده‌شدن اسلایدهای پایانی رو کم میکنن.
- متن و دکمه‌ها رو خوانا نگه دارید: بین نوشته و پس‌زمینه تضاد کافی بذارید. نوشته رو روی بخش شلوغ تصویر قرار ندید و از اندازه خیلی کوچک استفاده نکنید.
- کنترل دستی فراهم کنید: کاربر باید بتونه با دکمه‌ها اسلاید رو عوض یا حرکت خودکار رو متوقف کنه.
- اسلایدر رو با صفحه‌کلید آزمایش کنید: با کلید Tab بین لینک‌ها حرکت کنید و ببینید نشانگر تمرکز قابل‌مشاهده هست یا نه.
- نمایش موبایل رو بررسی کنید: تصویر مهم، عنوان و دکمه نباید بریده یا از صفحه خارج بشن.
بارگذاری تنبل یا Lazy Loading یعنی تصویر زمانی دریافت بشه که به محدوده دید کاربر نزدیکه. این روش میتونه برای تصاویر پایین صفحه مفید باشه، ولی تصویر اصلی بالای صفحه نباید طوری بارگذاری بشه که نمایش بخش اول صفحه رو بی‌دلیل عقب بندازه. برای جزئیات بیشتر، آموزش Native Lazy Loading در وردپرس رو ببینید.
حل مشکلات رایج MetaSlider Slideshow
چرا اسلایدر در برگه نمایش داده نمی‌شه؟
اول بررسی کنید افزونه فعاله و اسلایدر رو ذخیره کردید. بعد مطمئن بشید بلوک Slideshows یا شورتکد درست رو در برگه گذاشتید و اسلایدشوی مناسب انتخاب شده. برگه رو به‌روزرسانی کنید و نسخه منتشرشده رو در یک پنجره ناشناس مرورگر باز کنید.
اگه از صفحه‌ساز استفاده می‌کنید، شورتکد رو داخل ابزارک مخصوص کد کوتاه قرار بدید. قراردادن اون داخل یک کادر متن معمولی ممکنه در بعضی ویرایشگرها نتیجه درستی نده.
چرا تصاویر اسلایدر بریده یا تار دیده میشن؟
تصویر تار معمولاً ابعاد کمتری از فضای نمایش داره و مرورگر مجبور میشه اون رو بزرگ کنه. یک تصویر با ابعاد کافی آپلود کنید، ولی فایل رو بی‌دلیل خیلی بزرگ نگیرید. برای برش نامناسب هم نسبت تصاویر و تنظیمات Crop رو بررسی کنید.
اگه فقط یک تصویر مشکل داره، احتمالاً نسبت یا نقطه تمرکز همون فایل با بقیه فرق داره. اون تصویر رو جداگانه ویرایش کنید و سوژه اصلی رو در محدوده امن‌تری قرار بدید.
چرا اسلایدر در موبایل درست نمایش داده نمی‌شه؟
تنظیم عرض ثابت، نوشته طولانی و تصویری که سوژه اون نزدیک لبه‌هاست، از علت‌های رایج این مشکله. تنظیمات واکنش‌گرا رو بررسی کنید و برای اسلایدها ارتفاع خیلی بزرگ نذارید. بعد کش سایت و مرورگر رو پاک کنید و صفحه رو دوباره روی گوشی آزمایش کنید.
اگه کل صفحه از عرض موبایل بیرون می‌زنه، ممکنه مشکل از اسلایدر نباشه. یک بلوک، تصویر یا کد CSS دیگه هم میتونه عرض صفحه رو خراب کنه.
چرا تغییرات اسلایدر دیده نمی‌شن؟
بعد از ویرایش، اول دکمه ذخیره اسلایدر و بعد دکمه به‌روزرسانی برگه رو بزنید. اگه هنوز نسخه قبلی رو می‌بینید، کش افزونه بهینه‌سازی، کش هاست، شبکه توزیع محتوا و مرورگر رو پاک کنید.
صفحه رو در پنجره ناشناس هم باز کنید. اگه تغییرات اونجا دیده میشن، مشکل به احتمال زیاد از کش مرورگر یا نشست فعلی شماست.
چطور تداخل افزونه یا قالب رو پیدا کنید؟
قبل از آزمایش تداخل، یک نسخه پشتیبان بگیرید و ترجیحاً از سایت آزمایشی استفاده کنید. افزونه‌ها رو یکی‌یکی غیرفعال کنید و هر بار صفحه اسلایدر رو دوباره بررسی کنید. اگه مشکل بعد از غیرفعال‌کردن یک افزونه برطرف شد، احتمالاً تداخل از همون افزونه یا تنظیماتش میاد.
برای بررسی قالب، موقتاً یکی از قالب‌های پیش‌فرض وردپرس رو در محیط آزمایشی فعال کنید. اگه اسلایدر درست شد، کد یا استایل قالب فعلی نیاز به بررسی داره. راهنمای حل مشکل به‌هم‌ریختگی صفحات وردپرس هم روش‌های بیشتری برای پیدا‌کردن خطاهای ظاهری و فایلهای بارگذاری‌نشده نشون می‌ده.
جمع‌بندی ساخت اسلایدر تصاویر در وردپرس
برای ساخت اسلایدر تصاویر در وردپرس با MetaSlider Slideshow، افزونه رو نصب کنید، یک اسلایدشوی خالی بسازید و تصاویر هم‌اندازه رو با Add Slide به اون اضافه کنید. بعد عنوان، لینک، متن جایگزین، نمایش موبایل و نحوه برش هر تصویر رو تنظیم کنید.
در مرحله آخر، اندازه و حرکت اسلایدر رو بررسی کنید و اون رو با بلوک Slideshows یا شورتکد داخل برگه بذارید. اسلایدهای کمتر، تصاویر سبک‌تر و کنترل واضح‌تر معمولاً نتیجه بهتری می‌سازن. اگه هنوز بین افزونه‌ها مردد هستید، مقایسه بهترین افزونه‌های اسلایدر وردپرس بهتون کمک میکنه انتخاب مناسب‌تری داشته باشید.
سؤالات متداول درباره ساخت اسلایدر تصاویر در وردپرس
آیا MetaSlider Slideshow رایگانه؟
بله، MetaSlider Slideshow نسخه رایگان داره و برای ساخت یک اسلایدر تصویری معمولی امکانات اصلی رو در اختیارتون می‌ذاره. بعضی قابلیت‌های پیشرفته فقط در نسخه MetaSlider Slideshow Pro ارائه میشن.
آیا برای ساخت اسلایدر به کدنویسی نیاز دارید؟
نه، برای ساخت و قراردادن اسلایدر در برگه میتونید از محیط خود افزونه، بلوک Slideshows یا شورتکد استفاده کنید. کد PHP فقط برای قراردادن اسلایدر در فایلهای قالب اختصاصی کاربرد داره.
چطور اسلایدر رو فقط در یک برگه نمایش بدید؟
همون برگه رو در ویرایشگر وردپرس باز کنید و بلوک Slideshows یا بلوک کد کوتاه رو فقط داخل همون برگه بذارید. بعد اسلایدر موردنظرتون رو انتخاب و برگه رو به‌روزرسانی کنید.
چند تصویر برای یک اسلایدر مناسبه؟
عدد ثابتی برای همه سایتها نیست، ولی بهتره فقط تصاویر ضروری رو نگه دارید. معمولاً چند اسلاید کوتاه و هدفمند از یک اسلایدر طولانی بهتر دیده میشن و حجم کمتری هم به صفحه اضافه میکنن.
آیا اسلایدر سرعت سایتتون رو کم میکنه؟
اسلایدر میتونه حجم و پردازش بیشتری به صفحه اضافه کنه، مخصوصاً وقتی تصاویر زیاد یا سنگین باشن. با کمکردن تعداد اسلایدها، انتخاب ابعاد مناسب و فشردهکردن تصاویر میتونید اثر اون روی سرعت رو کمتر کنید.
سلام . من این پلاگین رو نصب کردم . اسمش تو پنل مدیریت اومده . اما وقتی رو رو اسمش تو پنل کلیک میکنم ، صفحه ایی که باز میشه هیچ چیزی داخلش نیست که بشه اسلاید ساخت باهاش، یه صفحه خالی هست . مثل عکسی که در بالا گذاشتید نیست و اصلا هیچ یک از موارد مانند + قرار دادن اسلاید و بقیش نمیاد . چطوری باید این مشکل رو حل کنم ؟ حالت لوکال هاست کار میکنم .
سلام روی هاست اصلی تست کنید احتمالا بخاطر مشکلات اینترنت هست.