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

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

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

با استفاده از افزونه TwentyTwenty تصاویر شما به صورت زیر در کنار یکدیگر نمایش داده خواهند شد :

افزونه TwentyTwenty

افزونه TwentyTwenty

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

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

[twentytwenty]<img src="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg" alt="Before photo" width="604" height="402" class="alignnone size-large wp-image-2367" />
<img src="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg" alt="After Photo" width="604" height="402" class="alignnone size-large wp-image-2366" />[/twentytwenty]

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

تصویر اول در کد بالا به عنوان تصویر سمت چپ و تصویر دوم به عنوان تصویر سمت راست نمایش داده می شود .

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

1 پاسخ

دیدگاه خود را ثبت کنید

مطلب خاصی فکرتان را مشغول کرده است ؟
آن را با ما در میان بگذارید !

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *