امروز به آموزش زوم تصاویر در وردپرس با افزونه WP Image Zoom می‌پرداریم.
تصاویر یکی از مهم‌ترین اجزای یک وبسایت هستند. تصاویر ضمن جذابیت بخشیدن، باعث می‌شوند مفاهیم آسان‌تر منتقل شوند.
امروز به معرفی افزونه‌ای می‌پردازیم که قابلیت زوم یا بزرگنمایی تصاویر را فراهم می‌کند. زوم تصاویر امکان دیدن جزییاتی را به ما می‌دهد که در حالت عادی کمتر مشخص هستند. این قابلیت برای فروشگاه های آنلاین که محصولاتی را می‌فروشند بسیار کاربردی است.
راه اندازی افزودن زوم تصاویر در وردپرس
نخست از منوی پیشخوان وردپرس به قسمت افزونه ها > افزودن بروید.
افزونه زوم تصاویر در وردپرس WP Image Zoom را نصب و فعال کنید.
بعد از فعال سازی به منوی پیشخوان وردپرس شما گزینه‌ای به نام WP Image Zoom اضافه می‌شود.
تب General Settings
این بخش به تنظیمات و فعال کردن بعضی ویژگی ها اختصاص دارد.
Enable the zoom on WooCommerce products: با فعال‌سازی این گزینه، زوم تصاویر در وردپرس برای محصولات ووکامرس فعال می‌شود.
Enable the zoom on WooCommerce category pages: با فعال‌سازی این گزینه، زوم تصاویر در وردپرس در دسته بندی‌ها، فعال می‌شود.
Enable the zoom on mobile devices: با فعال‌سازی این گزینه، زوم تصاویر در وردپرس در دستگاه های موبایل فعال می‌شود.
Remove the Lightbox on thumbnail images: با فعال‌سازی این گزینه، لایت‌باکس‌ها روی تصاویر شاخص غیرفعال می‌شوند.
Remove the Lightbox: با فعال‌سازی این گزینه، لایت‌باکس‌ها غیرفعال می‌شوند.
Enable on attachments pages: با فعال‌سازی این گزینه، زوم روی عکس های صفحه پیوست‌ها فعال می‌شود.
تب Zoom Settings
در این قسمت چهار مرحله برای تنظیمات زوم تصاویر در وردپرس وجود دارد.
Choose the Lens Shape: این بخش مربوط به انتخاب آیکون زوم تصاویر در وردپرس می باشد.
در قسمت Check your configuration changes on the image تصویر پیشفرضی وجود دارد که می‌توانید هر تغییری در تنظیمات دادید مشاهده کنید.
در این مرحله دیگر تنظیمات اصلی را می‌توانید انجام دهید. بعضی از این تنظیمات در نسخه پولی(حرفه‌ای) کار می‌کند.
General
Cursor Type: در این قسمت آیکونی که در پنجره زوم نمایش داده می‌شود را می‌توانید انتخاب کنید.
Animation Easing Effect: سرعت افکت زوم تصاویر
Zoom Level: در این بخش می‌توانید مشخص کنید تصاویر تا چند برابر بزرگنمایی شوند.
Lens
در این بخش تنظیماتی مانند اندازه لنز، رنگ لنز، تنظیمات خط حاشیه لنز و موارد دیگر وجود دارد. این تنظیمات تنها در صورتی انجام می شود که دایره یا لنز مربع را در مرحله 1 انتخاب کنید.
Zoom Window
این قسمت مخصوص پنجره زوم می‌باشد.
Zoom Window Width: عرض پنجره زوم تصاویر در وردپرس
Zoom Window Height: ارتفاع پنجره بزرگنمایی تصاویر در وردپرس
Responsive: با انتخاب این گزینه می‌توانید حالت واکنش‌گرایی را روی پنجره زوم فعال کنید.
Distance from the Main Image: فاصله پنجره زوم تا تصویر اصلی
Border Thickness: ضخامت حاشیه اطراف پنجره زوم
Border Color: رنگ حاشیه اطراف پنجره زوم
Custom Text
و در آخر هم می‌توانید در این بخش متن سفارشی را به تصویر اضافه کنید و اندازه متن، رنگ و تراز را انتخاب کنید.
بعد از اتمام تنظیمات بالا، حالا روی دکمه ذخیره کلیک کنید.
نکته مهم: تنظیمات بالا باعث زوم تصاویر محصولات ووکامرس می‌شود. برای فعال کردن زوم برای تصاویر خود در پست ها و صفحات وردپرس، شما باید مراحل زیر را دنبال کنید.
زوم تصاویر در وردپرس برای پست ها و صفحات
به صورت پیشفرض حالت زوم برای تصاویر در پست ها و صفحات وردپرس وجود ندارد. شما باید به صورت دستی این حالت را اضافه کنید.
برای مثال، روی یک عکس در ویرایشگر متن بک پست کلیک کنید و از نوار ابزار ویرایشگر روی آیکون ذره‌بین کلیک کنید.
ما توصیه می‌کنیم برای عملکرد بهتر زوم، از تصاویر با کیفیت خوب استفاده کنید تا جزئیات تصویر در زوم نمایان باشند. البته هرچه عکس باکیفیت تر باشد، حجم آن بیشتر می‌شود و سرعت سایت شما افت می‌کند.
شما می‌توانید از افزونه‌های فشرده و بهینه سازی تصاویر در وردپرس برای این منظور کمک بگیرید.
موفق باشید.
