نمایش تصویر قبل و بعد به‌صورت اسلایدر در وردپرس

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

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

آیا خود وردپرس اسلایدر قبل و بعد داره؟

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

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

امکانات افزونه Twenty20 Image Before-After

• ساخت اسلایدر مقایسه‌ای با دو تصویر قبل و بعد
• حرکت افقی یا عمودی دسته مقایسه
• امکان نوشتن برچسب دلخواه برای تصویر قبل و بعد
• پشتیبانی از لمس توی موبایل و تبلت
• امکان نمایش چند اسلایدر توی یک صفحه
• ارائه ابزارک قدیمی برای بعضی قالب‌های کلاسیک

توی صفحه رسمی افزونه از Elementor، WPBakery Page Builder، Flatsome UX Builder و Classic Editor نام برده شده. بنابراین بهتره روی ادعای سازگاری با همه صفحه‌سازها حساب نکنید و افزونه رو با قالب یا ابزاری که خودتون دارید امتحان کنید.

نصب افزونه رایگان Twenty20

توی پیشخوان وردپرس وارد مسیر «افزونه‌ها ← افزودن افزونه تازه» بشید. عبارت «Twenty20 Image Before-After» رو جست‌وجو کنید و قبل از نصب، نام افزونه و صفحه اون توی مخزن رسمی وردپرس رو ببینید. بعد روی «هم‌اکنون نصب نمایید» بزنید و در پایان «فعال نمایید» رو انتخاب کنید.

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

آماده کردن تصاویر قبل و بعد

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

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

ساخت اسلایدر قبل و بعد

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

اگه با ویرایشگر کلاسیک کار می‌کنید، دکمه «Add Twenty20» رو بالای ویرایشگر پیدا کنید. روی اون بزنید، تصویر قبل و بعد رو انتخاب کنید و دکمه Insert رو بزنید. ترتیب انتخاب تصاویر مهمه؛ تصویر اول به‌عنوان حالت قبل و تصویر دوم به‌عنوان حالت بعد نمایش داده می‌شه.

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

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

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

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

نمایش اسلایدر در ستون کناری

بعضی از قالب‌های کلاسیک ناحیه ابزارک دارن و ابزارک Twenty20 Slider رو هم نشون می‌دن. توی این حالت می‌تونید از مسیر «نمایش ← ابزارک‌ها» وارد بخش ابزارک‌ها بشید و ابزارک افزونه رو به ستون کناری اضافه کنید.

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

نکات مهم قبل از انتشار

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

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

سؤال‌های رایج

جمع‌بندی

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

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

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