How to add magnifying zoom for images in WordPress


آیا می خواهید یک بزرگنمایی مانند آمازون برای تصاویر در وردپرس اضافه کنید؟

افزودن ویژگی زوم به کاربران امکان می دهد جزئیاتی را که در یک تصویر با اندازه معمولی نمی بینند، ببینند.

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

چرا یک زوم بزرگنمایی برای تصاویر اضافه کنید؟

افزودن قابلیت بزرگنمایی در وب سایت وردپرس شما به بازدیدکنندگان اجازه می دهد تا جزئیات پیچیده تصاویر را به وضوح مشاهده کنند.

اگر یک وب‌سایت عکاسی دارید، اضافه کردن یک ویژگی بزرگ‌نمایی به کاربران اجازه می‌دهد تا روی عکس‌های شما بزرگنمایی کنند تا جزئیات دقیق‌تر را مشاهده کنند.

به طور مشابه، اگر یک فروشگاه آنلاین دارید، مشتریان شما می‌توانند روی تصاویر محصول بزرگنمایی کنند.

بسیاری از وب سایت های تجارت الکترونیک بزرگ در حال حاضر از بزرگنمایی برای تصاویر محصولات استفاده می کنند. این به مشتریان اجازه می دهد تا محصول را بررسی کنند و تجربه خرید بهتری را در فروشگاه شما ایجاد می کند.

همانطور که گفته شد، بیایید ببینیم چگونه می توانید به راحتی یک بزرگنمایی بزرگنمایی برای تصاویر در وردپرس اضافه کنید.

چگونه یک بزرگنمایی بزرگنمایی برای تصاویر در وردپرس اضافه کنیم

ابتدا باید افزونه WP Image Zoom را نصب و فعال کنید. برای جزئیات بیشتر، لطفا راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید.

پس از فعال سازی، شما باید به بخش مراجعه کنید WP Image Zoom » تنظیمات بزرگنمایی صفحه از نوار کناری مدیریت وردپرس.

در مرحله بعد، باید تنظیمات جلوه زوم را با جابجایی به برگه “تنظیمات بزرگنمایی” پیکربندی کنید و شکل لنز مورد نظر خود را انتخاب کنید.

شکل لنز را انتخاب کنید

می‌توانید از بین شکل‌های لنز دایره، مربع و زوم پنجره را انتخاب کنید. اگر نمی‌خواهید از یک شکل برای جلوه‌های بزرگ‌نمایی استفاده کنید، حتی می‌توانید گزینه «بدون لنز» (⨯) را انتخاب کنید.

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

پیش نمایش لنز را در مرحله دو بررسی کنید

در مرحله بعد، باید به برگه “عمومی” بروید.

از اینجا می‌توانید یک نوع مکان‌نما را انتخاب کنید، یک افکت انیمیشن را تنظیم کنید، زوم را روی شناور یا کلیک ماوس فعال کنید و سطح بزرگ‌نمایی را تعریف کنید.

اگر گزینه های بیشتری می خواهید، برخی از ویژگی ها فقط برای نسخه حرفه ای افزونه WP Image Zoom در دسترس هستند.

تنظیمات برگه عمومی را در مرحله 3 پیکربندی کنید

پس از انتخاب های خود، به سادگی از بالا به تب “لنز” بروید.

اگر لنز “دایره” یا “مربع” را در مرحله 1 انتخاب کرده باشید، اکنون می توانید تنظیماتی مانند اندازه لنز، رنگ لنز، گزینه های حاشیه لنز و موارد دیگر را پیکربندی کنید.

تنظیمات لنز

اگر لنز پنجره زوم را انتخاب کرده اید، باید به تب پیکربندی «پنجره بزرگنمایی» بروید.

از اینجا می توانید عرض و ارتفاع پنجره بزرگنمایی، موقعیت، فاصله از تصویر اصلی، رنگ حاشیه و موارد دیگر را تغییر دهید.

تنظیمات پنجره زوم

در مرحله بعد، شما باید به سادگی روی “ذخیره تغییرات” کلیک کنید تا تنظیمات خود را ذخیره کنید.

پس از آن، تنها کاری که باید انجام دهید این است که چند تنظیمات کلی را پیکربندی کنید.

برای آخرین مرحله روی Save Changes کلیک کنید

تنظیمات پلاگین عمومی را پیکربندی کنید

در مرحله بعد، باید به تب تنظیمات عمومی در زیر تنظیمات افزونه بروید.

از اینجا، اکنون می‌توانید ویژگی‌هایی مانند زوم بر روی تصاویر محصول WooCommerce، تصاویر کوچک، دستگاه‌های تلفن همراه، صفحات پیوست، صفحات دسته‌بندی محصولات و موارد دیگر را فعال کنید.

تنها کاری که باید انجام دهید این است که کادرهای کنار این گزینه ها را علامت بزنید.

به تب تنظیمات عمومی بروید و کادرهای کنار گزینه‌هایی را که می‌خواهید فعال کنید علامت بزنید

همچنین می توانید جلوه لایت باکس را حذف کنید تا کاربران بتوانند به راحتی تصاویر را بزرگنمایی کنند.

با این حال، برای این ویژگی به نسخه Pro افزونه نیاز دارید.

با علامت زدن کادر گزینه لایت باکس را بردارید

اگر نمی‌خواهید لایت‌باکس تصاویر را حذف کنید، باید به گزینه «Enable inside a Lightbox» بروید و کادر کنار آن را علامت بزنید.

توجه داشته باشید: می‌توانید لایت‌باکس‌های پشتیبانی‌شده را ببینید تا مطمئن شوید که زوم در داخل لایت‌باکس سایتتان به خوبی کار می‌کند.

گزینه enable inside lightbox را علامت بزنید

پس از انجام تنظیمات، فراموش نکنید که روی دکمه “ذخیره تغییرات” کلیک کنید تا تنظیمات خود را ذخیره کنید.

اکنون بزرگنمایی برای محصولات WooCommerce فعال خواهد شد.

برای بررسی ویژگی بزرگنمایی ما می توانید به فروشگاه آنلاین خود مراجعه کنید.

قابلیت بزرگنمایی در فروشگاه WooCommerce فعال شده است

با این حال، اگر می خواهید بزرگنمایی تصاویر در پست ها و صفحات وردپرس را فعال کنید، باید مراحل زیر را دنبال کنید.

مرحله 3. بزرگنمایی تصاویر را در ویرایشگر بلاک فعال کنید

به‌طور پیش‌فرض، بزرگ‌نمایی برای تصاویر پست‌ها و صفحات شما فعال نیست. پس از افزودن تصویر به محتوای خود، باید این کار را به صورت دستی انجام دهید.

ابتدا باید پستی را که می خواهید ویرایش کنید در ویرایشگر بلوک باز کنید.

در مرحله بعد، باید تصویری را از کتابخانه رسانه یا رایانه خود در آن پست آپلود کنید.

هنگامی که این کار را انجام دادید، به سادگی روی تصویر کلیک کنید تا پنل Block Settings آن در گوشه سمت راست صفحه باز شود.

از اینجا، به سادگی به تب ‘Styles’ بروید و بر روی دکمه ‘With Zoom’ کلیک کنید تا بزرگنمایی تصویر خود را اعمال کنید.

روی دکمه Zoom کلیک کنید

پس از آن، به سادگی روی دکمه «به‌روزرسانی» یا «انتشار» در بالا کلیک کنید تا تنظیمات شما ذخیره شود.

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

پیش نمایش ویژگی بزرگنمایی

توجه داشته باشید: شما باید این مرحله را هر بار که می خواهید افکت زوم را به یک تصویر جداگانه اضافه کنید، تکرار کنید.

توصیه می کنیم از تصاویر با کیفیت بالا برای ویژگی زوم استفاده کنید تا عالی به نظر برسند. تصاویر با کیفیت بالا معمولاً از نظر اندازه فایل بزرگتر هستند و زمان بیشتری برای بارگذاری طول می کشد که بر سرعت و عملکرد وب سایت شما تأثیر می گذارد.

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

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

اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در پیدا کنید توییتر و فیس بوک





سایت محتوا مارکتینگ

توسط psychen

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

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