لایت باکس تصاویر در وردپرس؛ با افزونه و بدون افزونه

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

توی این آموزش اول همین قابلیت داخلی وردپرس رو قدم‌به‌قدم فعال می‌کنیم. بعد سراغ سایت‌هایی می‌ریم که به گالری، ویدئو یا تنظیمات بیشتری نیاز دارن و افزونه رایگان Responsive Lightbox & Gallery رو بررسی می‌کنیم. این افزونه از مخزن رسمی وردپرس نصب می‌شه و تمام مراحل آموزش بر پایه نسخه رایگان اون هست.

لایت باکس تصاویر در وردپرس چیه

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

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

ساخت لایت باکس بدون افزونه در وردپرس

وردپرس از نسخه ۶.۴ به بعد، برای بلوک تصویر گزینه داخلی «Expand on click» رو داره. معنی ساده این عبارت «بزرگ‌شدن تصویر با کلیک» هست. اگه فقط چند عکس تکی توی نوشته دارید، بهتره قبل از نصب هر افزونه‌ای همین روش ساده و سبک رو امتحان کنید.

افزودن تصویر به نوشته

از پیشخوان به بخش نوشته‌ها برید و نوشته دلخواهتون رو با ویرایشگر بلوکی باز کنید. روی دکمه «+» بزنید و بلوک «تصویر» رو پیدا کنید. حالا می‌تونید عکس رو از کتابخانه رسانه بردارید یا از کامپیوترتون بارگذاری کنید.

فعال‌کردن بزرگ‌شدن با کلیک

روی بلوک تصویر بزنید تا نوار ابزارش باز بشه. بعد گزینه پیوند رو انتخاب کنید و «Expand on click» یا معادل فارسی اون رو روشن کنید. در پایان نوشته رو به‌روزرسانی کنید و نتیجه رو توی صفحه سایت ببینید.

این قابلیت داخلی برای بلوک Image ساخته شده و نیاز خیلی از سایت‌ها رو برطرف می‌کنه. اگه چنین گزینه‌ای رو نمی‌بینید، اول نسخه وردپرس و قالب سایتتون رو بررسی کنید. تنظیمات قالب هم ممکنه روی نمایش یا در دسترس‌بودن این قابلیت اثر بذاره. توضیحات فنی اون رو می‌تونید توی راهنمای رسمی لایت‌باکس وردپرس بخونید.

چه زمانی به افزونه لایت باکس نیاز دارید

برای چند تصویر تکی، معمولاً نصب افزونه اضافه لازم نیست. ولی اگه می‌خواید چند عکس رو به‌شکل گالری نشون بدید، بین تصاویر حرکت کنید، ویدئو یا محتوای دیگه‌ای رو باز کنید یا ظاهر پنجره رو تغییر بدید، افزونه Responsive Lightbox & Gallery انتخاب کامل‌تریه.

• ساخت گالری با چیدمان‌های Grid، Slider و Masonry
• هماهنگی با ویرایشگر بلوکی وردپرس و داشتن بلوک‌های اختصاصی
• نمایش تصویر، گالری و بعضی محتوای چندرسانه‌ای داخل لایت باکس
• فعال‌کردن خودکار لایت باکس برای تصاویر و گالری‌های وردپرس
• انتخاب اسکریپت و تنظیم ظاهر و رفتار لایت باکس
• پشتیبانی از فرمت‌های تصویری جدید مثل WebP و AVIF

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

پیش‌نیازهای نصب افزونه

نسخه فعلی افزونه دست‌کم به وردپرس ۶.۰ و PHP ۷.۰ نیاز داره. PHP همون زبان برنامه‌نویسییه که وردپرس با کمک اون روی سرور اجرا می‌شه. برای دیدن نسخه وردپرس و PHP سایتتون، از پیشخوان به مسیر «ابزارها ← سلامت سایت ← اطلاعات» برید.

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

نصب افزونه رایگان Responsive Lightbox & Gallery

توی پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید و عبارت «Responsive Lightbox & Gallery» رو جست‌وجو کنید. افزونه‌ای رو پیدا کنید که دقیقاً همین عنوان رو داره. بعد روی «هم‌اکنون نصب نمایید» بزنید و وقتی نصب تموم شد، گزینه «فعال‌کردن» رو انتخاب کنید.

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

ساخت گالری لایت باکس با افزونه

ایجاد گالری تازه

از منوی Gallery وارد صفحه گالری‌ها بشید و گزینه افزودن گالری تازه رو بزنید. یه عنوان مشخص مثل «گالری نمونه‌کارها» براش بنویسید. این اسم کمک می‌کنه بعداً گالری موردنظرتون رو بین بقیه موارد سریع‌تر پیدا کنید.

انتخاب تصاویر گالری

توی بخش Images روی گزینه انتخاب تصاویر بزنید و عکس‌های موردنظرتون رو از کتابخانه رسانه بردارید. اگه هنوز عکس‌ها رو وارد سایت نکردید، می‌تونید همون‌جا بارگذاری‌شون کنید. برای هر تصویر هم یه متن جایگزین مرتبط بنویسید و بعد انتخابتون رو تأیید کنید.

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

انتخاب چیدمان و اندازه تصاویر

از تنظیمات گالری، یکی از چیدمان‌های در دسترس مثل Grid، Slider یا Masonry رو انتخاب کنید. Grid عکس‌ها رو توی ردیف‌ها و ستون‌های مرتب می‌چینه. Masonry تصاویر با ارتفاع‌های مختلف رو کنار هم قرار می‌ده و Slider اون‌ها رو به‌شکل اسلاید نشون می‌ده. فقط سراغ گزینه‌ای برید که توی نسخه رایگان نصب‌شده فعال باشه.

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

فعال‌کردن لایت باکس گالری

در تنظیمات همین گالری، بخش Lightbox رو پیدا کنید و مطمئن بشید نمایش تصاویر داخل لایت باکس فعاله. بعد گالری رو منتشر یا به‌روزرسانی کنید. اگه چند افکت مختلف می‌بینید، برای شروع گزینه پیش‌فرض رو بردارید؛ چون معمولاً با قالب‌های بیشتری هماهنگ می‌شه.

قراردادن گالری داخل نوشته

نوشته یا برگه دلخواهتون رو باز کنید و روی دکمه «+» بزنید. بلوک گالری افزونه رو جست‌وجو کنید و گالری‌ای رو که ساختید انتخاب کنید. شاید نسخه نصب‌شده فقط یه کد کوتاه بهتون بده. کد کوتاه یا Shortcode یه عبارت کوتاه داخل کروشه‌ست که خروجی گالری رو نمایش می‌ده. کافیه اون رو کپی کنید و داخل بلوک «کد کوتاه» بذارید.

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

تنظیم ظاهر و رفتار لایت باکس

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

بهتره همه گزینه‌ها رو یک‌جا عوض نکنید. اول تنظیمات پیش‌فرض رو آزمایش کنید و بعد هر بار فقط یه مورد رو تغییر بدید. اگه مشکلی پیش بیاد، با این روش خیلی راحت‌تر می‌فهمید کدوم تغییر باعث اون شده.

حل مشکلات رایج لایت باکس

تصویر به‌جای لایت باکس در صفحه تازه باز می‌شه

اول ببینید گزینه Lightbox برای گالری یا «Expand on click» برای بلوک تصویر روشن هست یا نه. بعد کش سایت و مرورگرتون رو پاک کنید. کش یه نسخه آماده از صفحه رو برای افزایش سرعت نگه می‌داره و گاهی باعث می‌شه تغییر جدید رو با کمی تأخیر ببینید.

لایت باکس دو بار باز می‌شه

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

دکمه‌ها یا تصویر درست دیده نمی‌شن

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

روش داخلی وردپرس بهتره یا افزونه

برای یه عکس یا چند تصویر تکی، قابلیت داخلی وردپرس راه ساده‌تر و سبک‌تریه. اگه گالری‌های زیادی دارید، می‌خواید بین عکس‌ها حرکت کنید، به چند نوع چیدمان نیاز دارید یا کنترل بیشتری روی ظاهر می‌خواید، نسخه رایگان Responsive Lightbox & Gallery امکانات بیشتری بهتون می‌ده.

پس اول ببینید سایتتون واقعاً به چه چیزی نیاز داره. نصب افزونه وقتی ارزش داره که از امکانات اضافه اون استفاده کنید. فرقی هم نمی‌کنه کدوم روش رو انتخاب می‌کنید؛ بعد از هر تغییر، نتیجه رو روی موبایل، کامپیوتر و یه مرورگر دیگه آزمایش کنید.

تیم تولید محتوا

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