آموزش افزونه FooGallery برای ساخت گالری تصاویر در وردپرس

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

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

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

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

برخی از مزایای افزونه FooGallery عبارت است از:

  • قالب های مختلف آماده موجود در افزونه
  • ویرایش بصری
  • مرتب کردن مجدد عکس ها با کشیدن و رها کردن
  • پشتیبانی لایت باکس
  • ۱۰۰% ریسپانسیو
  • پشتیبانی از تصاویر رتینا
  • CSS سفارشی

در این آموزش افزونه FooGallery را مورد بررسی قرار داده و نحوه استفاده از آن را توضیح خواهیم داد.

آموزش افزونه FooGallery و نحوه ساخت گالری تصاویر در وردپرس

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

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

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

بر روی Allow & Continue کلیک کنید. صفحه خوش آمدگویی افزونه برای شما باز می شود. در این صفحه نمای کلی از ویژگی های موجود در افزونه FooGallery ارائه شده است.

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

در پیشخوان وردپرس، زیرمنو های افزونه FooGallery به صورت نمایش داده می شود.

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

برای ساخت اولین گالری تصاویر خود می توانید به مسیر گالری ها»اضافه کردن گالری رفته یا در پیشخوان وردپرس بر روی اضافه کردن گالری کلیک کنید.

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

صفحه اضافه کردن یک گالری جدید برای شما باز می شود. 

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

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

افزونه FooGallery امکان ساخت گالری ویدئو  برای You Tube، Vimeo، Wistia، Dailymotion یا هر جای دیگری که بخواهید را نیز فراهم می کند.

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

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

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

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

در میان قالب های رایگان موجود، قالبی به نام “گالری با یک تصویر بند انگشتی” وجود دارد که با انتخاب آن در نمایش گالری تنها یک تصویر بند انگشتی نشان داده می شود. اما با کلیک بر روی آن تصویر بند انگشتی تمام گالری در یک لایت باکس FooBox نشان داده می شود.

البته باید افزونه جداگانه FooBox Lightbox را نصب کنید تا تصاویر گالری شما در یک لایت باکس زیبا و پاسخگو باز شوند.

تنظیمات براساس قالبی که انتخاب می کنید می تواند متفاوت باشد. در ادامه آموزش افزونه FooGallery تنظیمات برای قالب “گالری تصاویر واکنش گرا” توضیح داده می شود.

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

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

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

در تب ظاهر می توانید ظاهر تصاویر بند انگشتی خود را تغییر دهید.

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

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

اثر بارگذاری شده پس از بارگذاری تصاویر استفاده می شود. در نسخه رایگان افزونه تنها “محو شدن در” وجود دارد ولی در نسخه پرمیوم گزینه های دیگری اضافه شده است.

در بقیه تب ها نیز می توانید به همین ترتیب تنظیمات تصاویر بند انگشتی را اعمال کنید.

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

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

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

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

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

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

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

FooGallery از تصاویر رتینا نیز پشتیبانی می کند که می توانند در ساید بار سمت چپ صفحه تنظیمات آن را انجام دهید.

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

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

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

به عنوان مثال برای اینکه یک تصویر در هر دو دستگاه عادی و رتینا به صورت واضح بارگذاری شود، باید یک تصویر 300 × 300 پیکسلی به صورت یک تصویر 600 × 600 پیکسلی در گالری بارگذاری شود.

برای یک تصویر مشابه از نظر اندازه (عرض و ارتفاع)، تصویر رتینا دارای تراکم پیکسل بالاتر (2 برابر یا بیشتر) هستند.

تصاویر بندانگشتی رتینا هنگام ساخت اولین گالری به صورت خودکار ایجاد می شوند. بنابراین اگر تنظیمات 2x و 3x را برای رتینا فعال کنید، 3 نسخه از تصاویر بندانگشتی ایجاد می شود. به عنوان مثال ، اگر تصویر بندانگشتی گالری را روی 200 × 200 تنظیم کنید، هر سه اندازه 200 × 200 و 400 × 400 و 600 × 600 برای هر تصویر بندانگشتی (در صورت امکان) ایجاد می شود. به این دلیل در صورت امکان می گوییم زیرا اگر اندازه کامل تصویر از اندازه رتینا (600 × 600) کوچکتر باشد، از آن استفاده نمی شود.

در انتها با کلیک بر روی دکمه “انتشار” گالری تصاویر ریسپانسیو ایجاد شده، ذخیره می شود.

قرار دادن گالری در یک صفحه

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

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

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

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

 در منوی FooGallery پیشخوان وردپرس روی زیرمنوی افزونه ها کلیک کنید. صفحه ای مشابه شکل زیر خواهید دید.

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

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

همانطور که می دانید وردپرس ۵ با ویرایشگر جدید گوتنبرگ عرضه شده است. خوشبختانه FooGallery با ویرایشگر گوتنبرگ نیز کار می کند.

برای استفاده از ویرایشگر گوتنبرگ در ابتدا باید مطمئن شوید آخرین نسخه افزونه FooGallery را نصب کرده اید. سپس روی آیکون اضافه کردن بلوک کلیک کرده و بلاک FooGallery را پیدا نموده و روی آن کلیک کنید.

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

بلوک FooGallery به صورت زیر ظاهر می شود. برای اضافه کردن گالری روی دکمه Select Gallery کلیک کنید.

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

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

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

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

دانلود افزونه FooGallery
صفحه افزونه FooGallery

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

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

WP Job Manager

WP Job Manager افزونه راه اندازی سایت کاریابی در وردپرس

WP Job Manager  یک افزونه ایجاد سیستم فرصت های شغلی و ساخت سایت کاریابی برای …

۲ دیدگاه

  1. حسین توکلی

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

    • این افزونه بصورت معمول برای گالری های خاص استفاده می شوند، یعنی نیاز به تعریف یک گالری با ویژگی های منحصر به فرد را پاسخگو می باشد و می توانید آن گالری را با یک کد ساده در هر تعداد صفحه یا برگه ی مد نظر خود استفاده کنید، از افزونه FooGallery برای اعمال تنظیمات کلی برای تمامی گالری های تصاویر در وردپرس استفاده نمی شود…
      از افزونه FooBox Lightbox کنار افزونه FooGallery استفاده نمائید، به احتمال زیاد نیاز شما را برآورده می کند.

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

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