افزونه FooGallery

By سمانه حسین زاده آموزش وردپرس, طراحی سایت

افزونه FooGallery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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