ساخت تصاویر لایت باکس در وردپرس با FooBox

زمان انتشار:
تعداد بازدید: 74

زمان تقریبی خواندن نوشته: 5 دقیقه
حالت تمام صفحه:

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

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

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

لایت باکس‌ چیست؟ لایت باکس‌ها در انواع مختلف وجود دارند و از آن‌ها در وب‌سایت‌ها استفاده می‌شود. به عنوان مثال بسیاری از فروشگاه‌های آنلاین از تکنیک لایت باکس برای نمایش تصاویر محصولات خود استفاده می‌کنند.

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

افزونه FooBox دارای بخش‌های رایگان و پرمیوم است که در ادامه به برخی از آن‌ها می‌پردازیم.

افزونه‌های گالری وردپرس

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

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

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

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

این افزونه تاکنون توانسته تعداد بیش از ۱۰۰٬۰۰۰ نصب فعال را با امتیاز ۳٫۲ از ۵ در مخزن وردپرس به ثبت برساند.

امکانات نسخه رایگان افزونه لایت باکس FooBox image LightBox

  • امکان ایجاد تصاویر لایت باکس
  • پشتیبانی از گالری تصویر وردپرس
  • سفارشی‌ کردن تنظیمات
  • ظاهر زیبا
  • طراحی رسپانسیو
  • و …

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

  • حالت تمام صفحه
  • پشتیبانی از HTML و iframe
  • امکان ایجاد ویدئوهای لایت باکس
  • پشتیبانی از گالری NextGEN
  • و…

نصب و راه‌اندازی افزونه FooBox

  • ابتدا افزونه FooBox را برای برای ساخت تصاویر لایت باکس در وردپرس از انتهای همین صفحه دانلود کنید.
  • در محیط وردپرس> قسمت افزودن افزونه، فایل زیپ آن را آپلود کنید و سپس آن را فعال کنید.

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

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

ابتدا به تنظیمات افزونه می‌پردازیم.

تنظیمات افزونه ایجاد تصاویر لایت باکس FooBox

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

زیرمنو Getting Started شامل سه قسمت Getting Started, Free Trial و Demo است.

  1. Getting Started: این بخش شامل شورت کدهای گالری‌های وردپرس، کپشن تصاویر و پیوست تصاویر است.
  2. Free Trial: در این بخش می‌توانید ویژگی‌های FooBox PRO را مشاهده کنید و از نسخه‌ی پرمیوم آن به مدت هفت روز به طور رایگان استفاده کنید.
  3. Demo: در این بخش می‌توانید دموی عملکرد افزونه را مشاهده نمایید.

Activitation: با کلیک روی این بخش با پیغامی مبنی بر اینکه برخی اطلاعات مربوط به استفاده شما از FooBox به آدرس Freemius.com ارسال می‌شود رو به رو می‌شود که با کلیک بر روی کادر Allow & continue شما اجازه ارسال این اطلاعات را می‌دهید.

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

upgrade: در این بخش می‌توانید نسخه فعلی را به نسخه پرمیوم ارتقا دهید.

ایجاد تصاویر لایت باکس به صورت Responsive

ابتدا در زیرمنوی Setting روی کادر general کلیک کنید و به پیکربندی افزونه بپردازید.

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

طبق توضیحات زیر، تنظیمات خود را اعمال کنید.

WordPress Galleries: فعال کردن لایت باکس تصاویر FooBox برای تمام گالری‌های تصاویر در وردپرس.

WordPress Images With Captions: فعال کردن FoBox برای تصاویر کپشن دار وردپرس.

Attachment Images: فعال کردن افزونه برای تمام تصاویر رسانه‌ای که در پست‌ها یا صفحات موجود است.

Fit To Screen: با فعال‌سازی این بخش تصاویر به اندازه ابعاد صفحه نمایش داده می‌شوند.

Hide Page Scrollbars: پنهان‌سازی اسکرول‌های صفحه هنگام مشاهده لایت باکس.

Show Counter: با زدن تیک این بخش یک شمارنده تصاویر در لایت باکس قرار می‌گیرد.

Count Message: تنظیم نحوه نمایش متن شمارنده در زیر لایت باکس.

Hide Captions: پنهان‌سازی کپشن‌ها.

Show Captions On Hover: نمایش کپشن هنگام حرکت ماوس روی تصاویر.

Error Message: تنظیم پیغام خطا هنگام بروز مشکل در هنگام نمایش تصاویر وردپرس.

پس از انجام تنظیمات لازم و ذخیره تغییرات، امکان استفاده از لایت باکس تصاویر وجود دارد. می‌توانید از لایت باکس به سه صورت زیر استفاده کنید:

  1. می‌توانید گالری تصاویر بسازید و تصاویر آن را به صورت پشت سر هم در لایت باکس مشاهده کنید.
  2. می‌توانید تصویر موردنظر و دلخواه خود را در لایت باکس مشاهده کنید.
  3. می‌توانید تصاویر دارای کپشن را در لایت باکس مشاهده کنید.

نکته: برای تنظیم گالری با حالت لایت باکس، ابتدا باید گالری خود را تهیه کنید و قابلیت لایت باکس را به صورت دستی یا با استفاده از افزونه کمکی Foogallery برای گالری خود فراخوانی کنید.

روش فراخوانی قابلیت لایت باکس تصاویر

  1. به کمک افزونه
  2. به صورت دستی

ساده‌ترین راه برای فراخوانی قابلیت لایت باکس برای گالری تصاویر استفاده از افزونه‌ی کمکی Foogallery است.

۱- فراخوانی قابلیت لایت باکس برای گالری تصاویر Foogallery

ابتدا افزونه Foogallery را همان‌گونه که در بالا شرح دادیم آپلود کنید و آن را در پنل مدیریتی فعال کنید سپس برای ایجاد گالری تصاویر پس از نصب روی گزینه Add gallery کلیک کنید و تصاویر موردنظر خود را بارگذاری و در آخر بر روی کادر Add media کلیک کنید تا گالری ساخته شود.

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

قابلیت لایت باکس برای گالری تصاویر Foogallery

حال شورت کد Foogallery را مانند تصویر زیر از قسمت gallery shortcode کپی کنید و در برگه یا نوشته جدید درج کنید و در آخر آن را منتشر کنید.

قابلیت لایت باکس برای گالری تصاویر Foogallery

۲- فراخوانی قابلیت لایت باکس به صورت دستی

می‌توانید برای تنظیم لایت باکس برای تصاویر تکی و تصاویر کپشن از کد “=class” FooBox جهت فراخوانی کلاس FooBox استفاده کنید.

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


<a href="address" class="foobox">تصاویر لایت باکس وردپرس</a>

نتیجه نهایی

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

نمایش تصاویر لایت باکس در وردپرس

جمع‌بندی نهایی

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

دانلود افزونه و قالب وردپرس- download worpress plugin and theme دانلود افزونه لایت باکس وردپرس

دانلود  صفحه‌ی افزونه

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

4 نوشته تا کنون

پاسخ دهید

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

دیدگاه های این نوشته

دیدگاهی برای این نوشته وجود ندارد.