آموزش و معرفی 2 افزونه برای لایت باکس تصاویر وردپرس

آموزش افزونه fancybox

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

 

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

 

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

 

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

حالا این لایت باکس چیه ! اصلا چرا به اون نیاز داریم ؟ از نمونه سوالاتی هستند که در ذهن هر وبمستری ممکنه باشه ! بزارید اینطوری براتون توضیح بدیم که در برخی از وب سایت ها وقتی که بر روی یک تصویر کلیک می کنید ، تصویر در یک جعبه (Box) به نمایش در می آید . این جعبه به صورت تمام صفحه و کاربر پسند است. نه تنها تصاویر، بلکه هر فایل چند رسانه ای را می توان بدین شکل نمایش داد. همانطور که بالاتر هم اشاره کردیم ، افزونه fancybox رو  سمپل لایت باکس رو مورد بررسی قرار میدهیم .

 

افزونه FancyBox چیست؟

قبل اینکه افزونه FancyBox رو بهتون معرفی کنیم ، باید بدونید که FancyBox یک ابزار ساخته شده توسط jQuery است که با به کارگیری این ابزار می توانید تصاویر، فایل های چندرسانه ای را با حالت “Mac-Style” و به صورت لایت باکس(LightBox) نمایش دهید. همچنین شما به راحتی می توانید تمامی اجزای نمایشی ابزار FancyBox را در اختیار داشته باشید و تغییرات ظاهری لازم را از جمله : حاشیه,فاصله های خارجی و داخلی,عرض,رنگ و … خیلی دیگر از موارد را به دلخواه تغییر دهید.

 

این افزونه به صورت پیش فرض با استفاده از jQuery، ابزار FancyBox را به تمامی تصاویر بند انگشتی که به صورت مستقیم به تصویر اصلی لینک می شوند را اعمال می کند. شما میتوانید از این قابلیت در نوشته ها، برگه ها و … استفاده کنید . این افزونه به صورت رایگان و در دسترس موجوده ! یعنی که میتونید اون رو از مخزن وردپرس دانلود و نصب کنید . پس از نصب افزونه ، امیدواریم که به راحتی اون رو فعال کنید تا بقیه مراحل رو با هم پیش ببریم .

 

 

آموزش نحوه استفاده از افزونه Easy FancyBox

بعد از نصب افزونه به منوی تنظیمات و زیر منوی رسانه ها بروید.

پیشخوان وردپرس

 

دنبال بخش FancyBox بگردید.

 

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

تنظیمات دلخواه خود را در این بخش اعمال کنید.

 

برای تبدیل عکس ها به لایت باکس باید طبق دستور عمل زیر پیش بروید !

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

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

 

 

آموزش افزونه Simple Lightbox و نمایش لایت باکس در وردپرس

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

 

نحوه ایجاد لایت باکس با این افزونه

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

 

پیکربندی تنظیمات

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

 

تنظیمات بخش Activation

  • Enable Lightbox Functionality: این گزینه به صورت دیفالت (پیش فرض) فعاله . برای نمایش دادن پست ها به صورت لایت باکس به کار میرود.
  • Enable on Home page: با فعال کردن این گزینه ، تصاویر صفحه اصلی به صورت لایت باکس نمایش داده خواهند شد.
  • Enable on Single Posts: فعال بودن این گزینه باعث می شود تصاویر نوشته های تکی به صورت لایت باکس نمایش داده شوند.
  • Enable on Pages: با فعال کردن این بخش ، تصاویر برگه های تکی به صورت لایت باکس نمایش داده شوند.
  • Enable on Archive Pages: با فعال کردن این بخش ، آرشیو سایت به صورت لایت باکس در خواهد آمد.
  • Enable for Widgets: فعال کردن این گزینه باعث می شود تصاویر موجود در ابزارک های وردپرس به صورت لایت باکس نمایش داده شود.
  • Enable for Menus: لایت باکس کننده منوهای سایت

 

تنظیمات بخش Grouping

  • Group items: با فعال کردن این گزینه می توانید تصاویر را گروه بندی کرده به صورت اسلایدشو نمایش دهید.
  • Group items by Post: با استفاده از این گزینه می توانید تصاویر را براساس پست ها گروه بندی کنید.

 

تنظیمات بخش UI

  • Theme: در این قسمت می توانید قالب مورد نظر خود را برای نمایش پنجره لایت باکس انتخاب کنید.
  • Resize lightbox to fit in window: برای کارکرد صحیح لایت باکس تصاویر در همه سایز ها (موبایل، تبلت، دسکتاپ)
  • Enable animations: فعال کردن این گزینه افکت انیمیشن روی لایت باکس ایجاد می کند.
  • Slide Duration: تعیین زمان نمایش اسلایدها
  • Loop through items: هنگامی که اسلایدشو به تصویر آخر برسد، مجدداً تصاویر از ابتدا نمایش داده شوند.
  • Overlay Opacity: میزان شفافیت پس زمینه پنجره لایت باکس را می توانید در این قسمت تعیین کنید.

 

آموزش افزونه برای لایت باکس

به این مطلب امتیاز دهید

امتیاز کلی : 0 / 5. تعداد آرا : 0

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

وبیت این پست توسط نگارش شده است.

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

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

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 0 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود

هنوز نظری ثبت نشده است ، اولین نفری باشید که نظر میدهید !

همکاران وبیت