learn

بزرگنمایی تصاویر در وردپرس؛ لایت‌باکس و زوم جزئیات

بازکردن تصویر در اندازه بزرگ‌تر با ذره‌بین روی تصویر متفاوت است؛ روش مناسب را بر اساس نیاز و ویرایشگر سایت انتخاب کنید.

بزرگنمایی تصاویر در وردپرس دو کاربرد متفاوت دارد: نمایش کل تصویر در اندازهٔ بزرگ‌تر و دیدن جزئیات با ذره‌بین. برای تصویر آموزشی، لایت‌باکس ساده ممکن است کافی باشد؛ برای جزئیات محصول یا نقشه، زوم موضعی کاربرد دارد. پیش از نصب افزونه، امکانات فعلی قالب و ویرایشگر را بررسی کنید.

تفاوت زوم، لایت‌باکس و اندازهٔ تصویر

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

برای اسکرین‌شات آموزشی، متن باید در نسخهٔ بزرگ خوانا باشد. اگر تصویر حاوی رمز، ایمیل خصوصی یا کلید اتصال است، پیش از انتشار آن اطلاعات را حذف کنید؛ زوم ممکن است جزئیاتی را آشکار کند که در اندازهٔ کوچک دیده نمی‌شوند.

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

در ویرایشگر بلوکی، تصویر را انتخاب و گزینه‌های لینک یا نمایش آن را بررسی کنید. در نسخه‌هایی که پشتیبانی می‌کنند، Enlarge on click یا گزینهٔ مشابهِ بزرگ‌نمایی با کلیک، تصویر را بدون خروج از صفحه در لایت‌باکس باز می‌کند. محل کنترل ممکن است با نسخه تغییر کند.

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

زوم موضعی با WP Image Zoom

برای ذره‌بین، افزونهٔ WP Image Zoom از SilkyPress را از مخزن رسمی دریافت کنید. شناسهٔ مخزن آن wp-image-zoooom است؛ به نام سازنده توجه کنید تا افزونهٔ مشابه را اشتباه نصب نکنید.

  1. پس از فعال‌سازی، صفحهٔ تنظیمات WP Image Zoom را باز کنید.
  2. در Zoom Settings، نوع بزرگنمایی مانند داخلی، لنز گرد، لنز مربع یا پنجرهٔ بیرونی را انتخاب کنید.
  3. اندازه و ظاهر لنز را با پیش‌نمایش تنظیم و تغییرات را ذخیره کنید.
  4. در تنظیمات عمومی، محل اعمال زوم را متناسب با نوشته‌ها یا گالری محصول بررسی کنید.

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

اعمال زوم در نوشته و صفحه‌ساز

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

zoooom

در بلوک Image، بخش Advanced و Additional CSS class(es) را بررسی کنید. نام کلاس را دقیق و بدون نقطهٔ ابتدایی وارد کنید. در Elementor نیز محل کلاس تصویر و اندازهٔ فایل مهم است؛ سازنده حالت Custom اندازه را برای این اتصال پشتیبانی‌شده معرفی نکرده است.

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

کیفیت، موبایل و تداخل‌ها

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

در موبایل، تعامل لمسی را آزمایش کنید؛ رفتاری که فقط با نگه‌داشتن ماوس کار می‌کند، برای همهٔ دستگاه‌ها کافی نیست. بازدیدکننده باید بتواند تصویر را ببندد، به متن برگردد و صفحه را بدون گیرکردن پیمایش کند.

اگر هم‌زمان دو پنجره باز می‌شود، لایت‌باکس قالب، صفحه‌ساز و افزونه را بررسی کنید. فقط رفتار تکراری را اصلاح کنید و قابلیت موردنیاز سایر تصاویر را بی‌دلیل خاموش نکنید. بارگذاری تنبل، تأخیر JavaScript و گالری‌های پویا نیز می‌توانند به تنظیم سازگاری نیاز داشته باشند.

مطالعهٔ مرتبط

بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.

مطالب مرتبط

ارسال نظر

فهرست مطالب