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

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

افکت قبل و بعد چگونه کار می‌کند؟

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

در واقع، خروجی نهایی یک عکس ثابت می‌شود که آن را در وبسایت خود قرار می‌دهند.

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

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

دموی واقعی این نمونه از انتهای مطلب قابل دسترس است.

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

ابتدا افزونه Twenty20 Image Before-After را از مخزن وردپرس نصب و فعالسازی کنید (لینک در انتهای مطلب).

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

همانند تصویر زیر، گزینه جدیدی تحت عنوان Add Twenty20 به بالای ادیتور اضافه شده است؛ روی آن کلیک کنید.

با این کار، کتابخانه پرونده‌های چندرسانه‌ای وردپرس نمایان می‌شود که باید دو تصویر مورد نظر خود را انتخاب کنید.

روی گزینه «گذاشتن در نوشته» کلیک کنید.

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

در نهایت روی دکمه Insert Shortcode کلیک کنید تا تصاویر Before and After شما به محتوای نوشته/برگه اضافه شوند.

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

برای این کار، در پیشخوان وردپرس به قسمت نمایش > ابزارک‌ها مراجعه کنید.

ابزارک Twenty20 Slider را در محل نمایش مورد نظرتان قرار داده و تصاویر قبل و بعد را به صورت جداگانه در آن انتخاب نمایید.

با ذخیره ابزارک و مراجعه به وبسایت، نتیجه را مشاهده خواهید کرد.

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