نمایش عکس قبل و بعد در وردپرس؛ آموزش ساخت اسلایدر مقایسه

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

توی این آموزش از افزونه قدیمی TwentyTwenty استفاده نمی‌کنیم؛ چون نگهداری اون متوقف شده و یک مشکل امنیتی بدون وصله هم براش گزارش شده. در عوض، سراغ Ultimate Before After Image Slider & Gallery – BEAF می‌ریم و روش ساخت و انتشار تصویر قبل و بعد رو قدم‌به‌قدم جلو می‌بریم. دسته‌بندی اسلایدرها، نکات نمایش در موبایل و راه‌حل مشکلات رایج رو هم بررسی می‌کنیم.

نمایش عکس قبل و بعد در وردپرس چه کاربردی داره؟

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

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

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

چرا دیگه نباید از افزونه TwentyTwenty قدیمی استفاده کنید؟

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

برای نسخه ۱.۰.۱ و نسخه‌های قدیمی‌تر این افزونه، یک آسیب‌پذیری XSS ذخیره‌شده در Wordfence ثبت شده. XSS ذخیره‌شده یعنی کد مخرب می‌تونه داخل اطلاعات سایت ذخیره بشه و بعد در مرورگر فرد دیگه اجرا بشه. طبق اطلاعات همین گزارش، برای این مشکل وصله شناخته‌شده‌ای ارائه نشده؛ پس اگه یکی از نسخه‌های آسیب‌پذیر TwentyTwenty رو دارید، جایگزین‌کردن اسلایدرها و حذف این افزونه انتخاب امن‌تریه.

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

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

معرفی افزونه Ultimate Before After Image Slider & Gallery – BEAF

افزونه Ultimate Before After Image Slider & Gallery – BEAF ابزاری برای ساخت اسلایدر و گالری مقایسه تصاویر در وردپرسه. با نسخه‌ای که روی سایتتون نصب می‌کنید، می‌تونید دو تصویر قبل و بعد رو انتخاب و نتیجه رو منتشر کنید. ممکنه گزینه‌هایی مثل جهت افقی یا عمودی و تغییر برچسب‌ها بین نسخه رایگان و حرفه‌ای فرق داشته باشن؛ پس قبل از ادامه، گزینه‌های موجود در نسخه فعلی افزونه رو بررسی کنید.

BEAF با افزونه TwentyTwenty قدیمی یکی نیست و شورت‌کدهای اون رو خودکار تبدیل نمی‌کنه. اگه قبلاً از کد [twentytwenty] استفاده کردید، باید هر اسلایدر رو داخل BEAF دوباره بسازید و روش نمایش قبلی رو با خروجی جدید افزونه جایگزین کنید.

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

ساخت تصویر قبل و بعد در وردپرس با افزونه BEAF

مرحله اول: نصب و فعال‌کردن افزونه

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

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

مرحله دوم: ساخت یک اسلایدر تازه

بعد از فعال‌سازی، از منوی پیشخوان وارد بخش «Before and After Slider» بشید و گزینه «Add New» رو بزنید. این بخش محل ساخت و مدیریت اسلایدرهای قبل و بعده. برای اسلایدر یک عنوان مشخص مثل «بازسازی آشپزخانه» بنویسید تا بعداً بین چند اسلایدر راحت‌تر پیداش کنید.

مرحله سوم: انتخاب عکس قبل و عکس بعد

در تنظیمات اسلایدر، تصویر «قبل» و تصویر «بعد» رو از کتابخانه رسانه انتخاب یا بارگذاری کنید. جای این دو تصویر رو با دقت بررسی کنید تا نتیجه نهایی برعکس نشون داده نشه. هر دو فایل بهتره عرض، ارتفاع و نسبت تصویر یکسانی داشته باشن. مثلاً دو عکس ۱۲۰۰ در ۸۰۰ پیکسل نتیجه مرتب‌تری نسبت به دو تصویر با کادر متفاوت می‌دن.

مرحله چهارم: بررسی جهت اسلایدر

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

مرحله پنجم: تنظیم برچسب‌های دو تصویر

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

مرحله ششم: انتخاب دسته‌بندی

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

مرحله هفتم: انتشار تصویر قبل و بعد

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

مرحله هشتم: پیش‌نمایش و بررسی نتیجه

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

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

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

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

شورت‌کد قدیمی [twentytwenty] متعلق به افزونه بسته‌شده قبلیه و با BEAF کار نمی‌کنه. اگه این کد داخل نوشته‌های قدیمی سایتتون هست، باید اسلایدر رو با BEAF دوباره بسازید و خروجی قدیمی رو با تصویر منتشرشده جدید جایگزین کنید.

آماده‌کردن اسلایدر برای نمایش درست در موبایل

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

رفع مشکلات رایج اسلایدر قبل و بعد

اسلایدر نمایش داده نمی‌شه

اول فعال‌بودن BEAF رو بررسی کنید. بعد مطمئن بشید هر دو تصویر انتخاب شدن و اسلایدر رو منتشر کردید. اگه ابزار بهینه‌سازی سایت فایل‌های JavaScript رو با تأخیر اجرا می‌کنه، این قابلیت رو فقط روی نسخه آزمایشی سایت موقتاً خاموش کنید و دوباره نتیجه رو ببینید. بعد از پیدا کردن عامل مشکل، برای تنظیم دقیق استثنا از راهنمای افزونه بهینه‌سازی یا پشتیبانی فنی کمک بگیرید.

دو تصویر اندازه یکسانی ندارن

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

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

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

تغییرات بعد از انتشار دیده نمی‌شن

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

گزینه انتشار کار نمی‌کنه

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

نکات مهم برای انتخاب عکس‌های قبل و بعد

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

جمع‌بندی

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

از شورت‌کد قدیمی [twentytwenty] برای BEAF استفاده نکنید. اگه افزونه TwentyTwenty قدیمی رو روی سایت دارید، اول اسلایدرها رو جایگزین کنید و بعد نسخه قدیمی رو حذف کنید. یادتون نره مسیر قراردادن خروجی BEAF داخل نوشته یا برگه باید با نسخه فعلی افزونه و ویرایشگر سایتتون بررسی بشه. سازگاری افزونه با وردپرس، PHP، قالب و تنظیمات بهینه‌سازی سایتتون رو هم قبل از استفاده نهایی روی یک محیط آزمایشی بسنجید.

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

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

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