دیجی اسکریپت

افزودن قبل و بعد از عمل به تصاویر در وردپرس | دیجی اسکریپت

افزودن قبل و بعد از عمل به تصاویر در وردپرس
[ad_1]

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

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

 

اولین کار نصب و راه اندازی افزونه 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]

 

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

 

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

 

به همین راحتی! موفق باشید.

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

[ad_2]

لینک منبع مطلب

برچسب ها

این مطلب بدون برچسب می باشد.

ارسال دیدگاه جدید

به نکات زیر توجه کنید

  • نظرات شما پس از بررسی و تایید نمایش داده می شود.
  • لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.