Responsive Lightbox & Gallery و ایجاد لایت باکس تصاویر در وردپرس

Responsive Lightbox & Gallery

نحوه نمایش تصاویر در سایت وردپرس می تواند تأثیر زیادی در ظاهر سایت شما داشته باشد. افزونه های گالری ساز وردپرس به شما کمک می کنند که گالری های تصاویر زیبا و حرفه ای در سایت وردپرس خود ایجاد کنید. اما گالری های ایجاد شده با افزونه Responsive Lightbox & Gallery با ایجاد افکت لایت باکس برای تصاویر، جلوه بسیار بهتری به گالری تصاویر شما بخشیده و ترکیبی از ظرافت و راحتی را ایجاد می کنند.

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

در این مقاله افزونه Responsive Lightbox & Gallery را مورد بررسی قرار داده و نحوه استفاده از آن را آموزش می دهیم.

آموزش Responsive Lightbox & Gallery و ساخت گالری و لایت باکس رسپانسیو در وردپرس

پس از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه دو منوی جدید شامل Gallery و Lightbox به پیشخوان وردپرس شما اضافه خواهد شد.

در منوی Lightbox می توانید تنظیمات لایت باکس ها و همچنین گالری ها را پیکربندی کنید. در منوی Gallery می توانید گالری های جدید ساخته و آنها را مدیریت کنید. همچنین می توانید برای گالری ها دسته و برچسب ساخته و آنها را طبقه بندی کنید.

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

تنظیمات عمومی افزونه Responsive Lightbox & Gallery

اولین تب در منوی LightBox ، تب General است. در این قسمت می توانید تنظیمات اصلی افزونه Responsive Lightbox & Gallery را پیکربندی کنید. این تنظیمات به شما امکان می دهند قوانین عمومی عملکرد افزونه و پارامترهای فنی افکت لایت باکس و گالری را مشخص کنید. به عنوان مثال می توانید افکت لایت باکس مورد علاقه خود را انتخاب کنید، مشخص کنید که برای کدام المان به طور خودکار راه اندازی شود و پارامترهای آن را تنظیم کنید. همچنین می توانید گالری پیش فرض و تنظیمات آن را انتخاب کنید.

Responsive Lightbox & Gallery

Introduction Tour: با کلیک بر روی دکمه Start Tour می توانید توری را مشاهده کنید که نحوه استفاده از افزونه را به شما می آموزد.

Default Lightbox: این اسکریپت ها استایل مشاهده تصویر را مشخص می کنند. در نسخه رایگان می توانید گزینه های prettyPhoto ، SwipeBox (محبوب ترین نوع) ، FancyBox ، Nivo Lightbox ، Image Lightbox ، TosRUs ، Featherlight و Magnific Popup را انتخاب کنید. در نسخه پرمیوم گزینه های دیگری مانند Justified Gallery و Lightcase Lightbox وجود دارد. وقتی اسکریپتی را انتخاب کردید ، حتما به پایین اسکرول کرده و تنظیمات را ذخیره کنید.

Selector: این گزینه باعث می شود که هر تصویر به سلکتور لایت باکس پیش فرض شود. سلکتور چیزی است که افکت لایت باکس را تریگر می کند. اگر قبلاً از “lightbox”  به عنوان سلکتور افزونه دیگری استفاده کرده اید می توانید این گزینه را تغییر دهید.

Images: این گزینه اجازه می دهد تا هر تصویر یک لایت باکس به عنوان تنظیمات پیش فرض داشته باشد. در صورت عدم علامت گذاری، تصاویر فاقد لایت باکس بوده و به صورتی که در تنظیمات نمایش پیکربندی شده اند نشان داده می شوند.

Single image title: این گزینه به شما امکان می دهد برای هر تصویر به صورت تکی عنوان انتخاب کنید. شما می توانید از بین هیچ کدام، عنوان تصویر، کپشن تصویر، متن alt تصویر یا توضیحات تصویر یکی را انتخاب کنید.

Single image caption: این گزینه به شما امکان می دهد برای هر تصویر به صورت تکی کپشن انتخاب کنید. شما می توانید از بین هیچ کدام، عنوان تصویر، کپشن تصویر، متن alt تصویر یا توضیحات تصویر یکی را انتخاب کنید

Single Image as Gallery: این گزینه اجازه می دهد تا یک تصویر واحد به گونه ای نمایش داده شود که گویی بخشی از گالری تصاویر است.

Responsive Lightbox & Gallery

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

WordPress gallery: با این گزینه می توانید استایل پیش فرض گالری وردپرس را انتخاب کنید. شما می توانید از حالت پیش فرض، Basic Grid ، Basic Slider  یا Basic Masonry  استفاده کنید.

Builder Gallery: این گزینه به شما امکان می دهد استایل گالری سازنده پیش فرض را انتخاب کنید. می توانید از Basic Grid ،Basic Slider  یا Basic Masonry انتخاب کنید.

WooCommerce gallery: وقتی ووکامرس فعال است، این گزینه به شما امکان می دهد استایل گالری محصولات ووکامرس را انتخاب کنید. شما می توانید از حالت پیش فرض، Basic Grid ، Basic Slider  یا Basic Masonry استفاده کنید.

Gallery Image Size: با استفاده از این گزینه می توانید اندازه تصویر گالری را به تصویر بند انگشتی، متوسط​​، بزرگ یا اندازه کامل تنظیم می کند. توجه داشته باشید گزینه ای که در این قسمت انتخاب می کنید پیکربندی ایجاد شده در تنظیمات وردپرس را لغو می کند.

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

Gallery image title: افزونه Responsive Lightbox & Gallery به شما امکان می دهد که با انتخاب یکی از گزینه های این قسمت، عنوان تصویر در یک گالری را انتخاب کنید.

Gallery Image Caption: انتخاب یکی از گزینه های موجود در این بخش به تصویر گالری یک کپشن اختصاص می دهد. این گزینه اگر توسط لایت باکس و/یا گالری که انتخاب کرده اید پشتیبانی شده باشد، کار می کند.

Responsive Lightbox & Gallery

Videos: در این قسمت می توانید به فیلم ها یک لایت باکس بدهید. این افکت فقط برای فیلم هایی که در سایت شما آپلود شده اند کار می کند و برای ویدئوهای جاسازی شده که به صورت خودکار نمایش داده می شوند، نیست. وقتی کاربر روی لینک کلیک می کند، یک لایت باکس ویدیو نمایش داده می شود.

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

Comments: به محتوای دیدگاه ها یک لایت باکس می دهد.

Force lightbox: یک لایت باکس برای گالری های غیر بومی وردپرس مانند گالری های ویژوال کامپوزر یا جت پک ایجاد می کند.

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

Custom events: یک لایت باکس را در رویدادهای JQuery مانند ajaxComplete روشن می کند. شما باید آنها را تعریف کنید. اگر از قالب، افزونه یا جاوا اسکریپت سفارشی برای بارگذاری تصاویر استفاده کرده باشید، از رویدادهای سفارشی استفاده می شود.

Loading Place: این امکان را می دهد که اسکریپت لایت باکس در هدر یا فوتر بارگیری شود. توجه داشته باشید که بهتر است اسکریپت ها برای تحت تأثیر قرار ندادن سرعت سایت در فوتر قرار بگیرند.

Conditional loading: این گزینه اجازه می دهد اسکریپت ها فقط در صفحاتی که دارای تصویر در ناحیه محتوای پست هستند بارگیری شوند. این ویژگی درصورتی که نخواهید از لایت باکس در برگه ها استفاده شود، مفید خواهد بود که می تواند برای افزایش زمان بارگذاری سایت مفید باشد. اگر گالری ها یا تصاویر در ابزارک ها هستند یا در مکان دیگری قرار دارند، بهتر است این گزینه را غیرفعال کنید.

Delete Data: وقتی پلاگین غیرفعال شود، تنظیمات افزونه حذف می شود.

در پایان روی دکمه ذخیره تغییرات کلیک کنید.

تنظیمات لایت باکس

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

Responsive Lightbox & Gallery

SwipeBox: این استایل لایت باکس، تصویر را باز کرده و اطراف آن را سیاه می کند. برای بستن لایت باکس باید از آیکون ضربدر در گوشه تصویر استفاده کرد.

Responsive Lightbox & Gallery

صفحه تنظیمات SwipeBox امکان شخصی سازی مشاهده در دستگاه های موبایل و غیرموبایل را فراهم می کند

prettyPhoto: این استایل لایت باکس تصویر را به صورت ناگهانی باز کرده و همزمان با تاریک کردن پس زمینه آن را روشن می کند. همچنین تصویر دارای حاشیه است. برای بستن این لایت باکس نیز باید از علامت ضربدر گوشه تصویر استفاده کرد.

Responsive Lightbox & Gallery

صفحه تنظیمات prettyPhoto امکان شخصی سازی سرعت، اندازه و قالب ها را همراه با سایر ویژگی های خاص فراهم می کند.

FancyBox: این استایل لایت باکس تصویر را به صورت ناگهانی نشان داده و پس زمینه را روشن نگه می دارد. همچنین برای بستن آن باید از علامت ضربدر استفاده کرد.

Responsive Lightbox & Gallery

صفحه تنظیمات FancyBox امکان شخصی سازی نمایش، رویه، سرعت و اندازه ها را فراهم می کند.

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

Responsive Lightbox & Gallery

صفحه تنظیمات Nivo Lightbox امکان شخصی سازی افکت ها و پیام ها را فراهم می کند.

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

Responsive Lightbox & Gallery

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

TosRUs: این لایت باکس پس زمینه را تیره می کند اما حاشیه ای ندارد. . برای خروج باید روی علامت ضربدر کلیک کنید.

Responsive Lightbox & Gallery

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

Featherlight: این لایت باکس باز می شود و تصویر را روشن می کند ، پس زمینه را تیره می کند و دارای حاشیه سفید است. فلشهای قبلی و بعدی در حالت شناور قابل مشاهده هستند. برای خروج ، “x” را در گوشه بالا سمت راست انتخاب کنید.

Responsive Lightbox & Gallery

صفحه تنظیمات Featherlight امکان شخصی سازی انیمیشن ها، کلیک و دکمه فرار را فراهم می کند.

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

Responsive Lightbox & Gallery

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

تنظیمات گالری در افزونه Responsive Lightbox & Gallery

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

Responsive Lightbox & Gallery

به طور پیش فرض می توانید گالری Basic Grid ، Basic Slider Gallery یا Basic Masonry Gallery را پیکربندی کنید. و اگر هرکدام از پلن های پرمیوم (مانند Slider Gallery ، Justified Gallery ، Expander Gallery و غیره) را نصب کرده باشید، می توانید تنظیمات آنها را از این صفحه پیکربندی کنید.

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

گالری Basic Slider به شما امکان می دهد گالری ساده ای ایجاد کنید که با افکت اسلایدر تغییر وضعیت می دهد. شما می توانید گالری را به گونه ای پیکربندی کنید که نمایش اسلاید را به محض ورود بازدید کننده به برگه/نوشته، سرعت انتقال آن، بزرگ نمایی و موارد دیگر آغاز کند.

گالری Basic Masonry به شما امکان می دهد یک گالری به سبک Pinterest / Tumblr ایجاد کنید. شما می توانید نحوه نمایش گالری در اندازه های مختلف صفحه نمایش، فاصله بین آیتم های گالری و جریان افقی و عمودی آن را پیکربندی کنید.

تنظیمات سازنده گالری

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

Responsive Lightbox & Gallery
  • Gallery Builder: با فعال کردن این گزینه، سازنده گالری در افزونه Lightbox Responsive and Gallery  فعال می شود. وقتی تیک این گزینه را بردارید، عملکرد سازنده غیرفعال شده و منوی Gallery در پیشخوان وردپرس نشان داده نمی شود.
  • Categories: با انتخاب گزینه Categories، دسته های گالری فعال می شوند. دسته ها برای منظم نگه داشتن گالری های شما بسیار مفید هستند.
  • Tags: با انتخاب گزینه Tags، برچسب های گالری فعال می شوند که مانند دسته ها برای منظم نگه داشتن گالری های شما مفید هستند.
  • Gallery Permalink: در این قسمت می توانید پیوند یکتای گالری را انتخاب کنید. برای مثال اگر rl_gallery  را وارد کنید، گالری های شما از طریق لینک ثابت https://www.yoursite.com/rl_gallery/ قابل دسترسی خواهند بود.
  • Categories Permalink: پیونده یکتای دسته ها را در این قسمت می توانید پیکربندی کنید. به عنوان مثال اگر rl_category را وارد کنید، بایگانی دسته های گالری شما از طریق لینک ثابت https://www.yoursite.com/rl_category/. قابل دسترسی خواهد بود.
  • Tags Permalink: این قسمت نیز مربوط به پیکربندی پیوند یکتای برچسب ها است. به عنوان مثال ، اگر rl_tag را وارد کنید ، بایگانی برچسب گالری شما از طریق لینک ثابت https://www.yoursite.com/rl_tag/ قابل دسترسی خواهد بود.
  • Archives: با علامت زدن گزینه Archives می توانید بایگانی های گالری را در سایت خود فعال کنید. اگر می خواهید بایگانی گالری را غیرفعال کنید تیک این گزینه را بردارید.
  • Archives Category: می توانید انتخاب کنید که کدام دسته از گالری ها در بایگانی گالری نمایش داده شود. به طور پیش فرض این گزینه روی همه تنظیم شده است.

تنظیمات فولدر رسانه با افزونه Responsive Lightbox & Gallery

Responsive Lightbox & Gallery

Responsive Lithbox & Gallery یک ویژگی فولدرهای رسانه دارد که کتابخانه رسانه ای وردپرس شما را با فولدرهای تصویری گسترش می دهد. به شما امکان می دهد پیوست های خود را در یک ساختار درخت پوشه سازماندهی کنید. انتقال، کپی، تغییر نام و حذف پرونده ها و پوشه ها با یک رابط کشیدن و رها کردن امکان پذیر است.

تنظیمات قابلیت ها

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

کتابخانه از راه دور

کتابخانه از راه دور به شما امکان می دهد از تصاویر چندین منبع مانند Unsplash ، Wikimedia یا Flickr (در نسخه رایگان) و Instagram ،Pixabay , Pexels (در نسخه Pro) به طور مستقیم در مدیر رسانه وردپرس خود استفاده کنید.

ساخت گالری جدید و مدیریت گالری ها با افزونه Responsive Lightbox & Gallery

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

زیر منوی All Galleries شما را به صفحه گالری ها می برد و از آنجا می توانید تمام گالری های ایجاد شده را مشاهده کرده و آنها را ویرایش کنید. همچنین می توانید به کد کوتاه گالری ها دسترسی پیدا کنید.

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

زیر منوی Add New شما را به صفحه Add New Gallery می برد که می توانید از آنجا گالری ایجاد کنید. شما می توانید به گالری خود یک نام بدهید، تصاویر موجود در آن را انتخاب کنید و گالری/ طرح / لایت باکس / تنظیمات متفرقه آن را پیکربندی کنید. همچنین می توانید یک تصویر شاخص را برای گالری خود تنظیم کنید و کد گالری را از این صفحه مشاهده کنید.

Responsive Lightbox & Gallery

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

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

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

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

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

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.

دانلود افزونه

دانلود افزونه Responsive Lightbox & Gallery
صفحه افزونه Responsive Lightbox & Gallery

درباره ی مینا قدسی

مطلب پیشنهادی

آموزش افزونه Subscribe to Comments Reloaded

آموزش افزونه Subscribe to Comments Reloaded و پاسخ دیدگاه وردپرس

یکی از مشکلات سیستم کامنت گذاری پیش فرض وردپرس این است که اگر کسی در …

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

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