با سلام خدمت دوستان عزیز وردپرسی!

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

افزونه درج تصویر قبل و بعد

twentytwenty

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

افزونه‌ای که قصد معرفی ان را دارم با نام TwentyTwenty در مخزن وردپرس به ثبت رسیده است و تاکنون توانسته است تا بیش از 10.000 نصب فعال و کسب امتیاز 4.8 را ازآن خود نماید.

پیشنهاد بعدی  تغییر آدرس آپلود فایل در وردپرس با افزونه Wp Orginal Media Path

این افزونه دارای پنل تنظیمات خاصی نمی‌باشد و تنها کافی است تا پس از نصب و فعال سازی آن یک نوشته جدید ایجاد نموده و با استفاده از شورت کد [ 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]

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

before-after-images

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

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

sliding-between-before-after-images

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

منبع: wpbeginner

پیشنهاد بعدی  صفحه ساز گرافیکی وردپرس با افزونه Live Composer

شاد باشید :)

لینک های ضمیمه دانلود افزونه
امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته
Loading...