در این آموزش از مرجع وردپرس ، قصد داریم روش ایجاد اسلایدر تصاویر به صورت مقایسه قبل و بعد را باهم مرور کنیم . معمولا افراد برای ساخت یک عکس قبل و بعد از فتوشاپ استفاده می کنند که از این عکس فقط به عنوان یک عکس ثابت در وردپرس می توان استفاده کرد و قابلیت چندانی ندارد .
یک اسلایدر عکس کاربردی می تواند دو ورژن متفاوت و فول سایز از عکس را به صورت مقایسه ای در کنار هم نشان دهد .
در ادامه بررسی خواهیم کرد :
نمایش عکس قبل و بعد در وردپرس به صورت اسلایدر
نخست لازم است افزونه Twenty20 Image Before-After را نصب و فعال نمایید . بعد از فعالسازی افزونه ، جایی که می خواهید عکس مقایسه ای قبل و بعد نشان داده شود ، از شورت کد ریز استفاده نمایید .
[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
در شورت کد بالا ، در قسمت “”=img1 می توانید آدرس تصویر اول و در قسمت “”=img2 آدرس تصویر دوم را بین دو علامت ” ” برای مقایسه وارد نمایید .
استفاده از ابزارک Twenty20 Image برای نمایش عکس قبل و بعد
برای فعالسازی ابزارک افزونه ، ابتدا به بخش ” نمایش > ابزارک ها ” در داشبورد مدیریت وردپرس بروید و ویجت Twenty20 Slider را در مکانی ابزارک مورد نظر خود قرار دهید .
پیروز و سربلند باشید .
