آموزش افزونه FooGallery برای ساخت گالری تصاویر در وردپرس
در این مقاله به آموزش افزونه FooGallery که یکی از افزونه های رایگان و محبوب وردپرس است، می پردازیم.
استفاده از تصاویر زیبا و مرتبط با موضوع یکی از بهترین راهها برای تعامل با بازدیدکنندگان سایت و افزایش زمان حضور آنها در سایت است. اگر چه می توان از طریق پیشخوان وردپرس بدون نیاز به نصب هیچ افزونه ای گالری تصاویر در وردپرس ساخت، اما استفاده از یکی از بهترین افزونه های ساخت گالری تصاویر وردپرس مزایای زیادی دارد.
افزونه FooGallery یک افزونه رایگان و بسیار قدرتمند وردپرس برای ساخت گالری تصاویر است که هم کار با آن بسیار ساده است و هم قابل توسعه برای توسعه دهندگان می باشد.
برخی از مزایای افزونه FooGallery عبارت است از:
- قالب های مختلف آماده موجود در افزونه
- ویرایش بصری
- مرتب کردن مجدد عکس ها با کشیدن و رها کردن
- پشتیبانی لایت باکس
- ۱۰۰% ریسپانسیو
- پشتیبانی از تصاویر رتینا
- CSS سفارشی
در این آموزش افزونه FooGallery را مورد بررسی قرار داده و نحوه استفاده از آن را توضیح خواهیم داد.
آموزش افزونه 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 در همین قسمت به پایان می رسد.
در منوی FooGallery پیشخوان وردپرس روی زیرمنوی افزونه ها کلیک کنید. صفحه ای مشابه شکل زیر خواهید دید.
در این صفحه addon های رایگان و پرمیومی وجود دارد که می توانید آنها را فعال کرده و قابلیت های بیشتری را برای افزونه FooGallery فراهم کنید. در تب “خودت بساز” این امکان برای توسعه دهندگان فراهم شده است که افزونه موردنظر خود را بنویسند. آموزش افزونه FooGallery در اینجا به پایان می رسد. تنها نکته باقیمانده استفاده از این افزونه در ویرایشگر گوتنبرگ است.
همانطور که می دانید وردپرس ۵ با ویرایشگر جدید گوتنبرگ عرضه شده است. خوشبختانه FooGallery با ویرایشگر گوتنبرگ نیز کار می کند.
برای استفاده از ویرایشگر گوتنبرگ در ابتدا باید مطمئن شوید آخرین نسخه افزونه FooGallery را نصب کرده اید. سپس روی آیکون اضافه کردن بلوک کلیک کرده و بلاک FooGallery را پیدا نموده و روی آن کلیک کنید.
بلوک FooGallery به صورت زیر ظاهر می شود. برای اضافه کردن گالری روی دکمه Select Gallery کلیک کنید.
منوی گالری ها برای شما نشان داده می شود. می توانید گالری موردنظر خود را انتخاب کرده و اضافه کنید.
امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.
دانلود افزونه
سلام خیلی ممنون بابت آموزش و معرفی افزونه خیلی خوب بود!
فقط یک سوال چطور میشه تنظیمات را جوری انجام داد که برای تمام گالری های بعدی ما هم ازش استفاده بشه؟
مچکرم…
این افزونه بصورت معمول برای گالری های خاص استفاده می شوند، یعنی نیاز به تعریف یک گالری با ویژگی های منحصر به فرد را پاسخگو می باشد و می توانید آن گالری را با یک کد ساده در هر تعداد صفحه یا برگه ی مد نظر خود استفاده کنید، از افزونه FooGallery برای اعمال تنظیمات کلی برای تمامی گالری های تصاویر در وردپرس استفاده نمی شود…
از افزونه FooBox Lightbox کنار افزونه FooGallery استفاده نمائید، به احتمال زیاد نیاز شما را برآورده می کند.
برای خرید نسخه pro باید چیکار کرد
سلام ریحانه عزیز .. وقت بخیر .. از هر کدام از مارکت های معتبر موجود در بازار میتونید خریداری کنید
سلام خسته نباشید این افزونه بعد از اعمال تصاویر گالری رو برعکس نشونومیده یعنی وقتی فلش فووباکس رو به سمت چپ میزنیم به جای رفتن به تصویر بعدش میره تصدیر آخر
و وقتی برعکس میزنیم درست میشم
چطور میشه جهت حرکت عکس بعد رو درست کرد؟
ممنونم
سلام .. وقت شما بخیر .. من در تنظیمات افزونه Foogallery و همینطور افزونه FooBox جایی برای عکس کردن جهت نمایش لایت باکس ها ندیدم .. احتمالاً از طریق CSS سفارشی بشه این کار رو انجام داد
ممنونم اما خوب کد css رو از کجا باید پیدا کنم و اصلا چه جوری بگدارمش جواب نمیده امتحتن کردم هر طوری
سلام .. شاید این لینک بتونه کمگ کنه .. لینک دیگه ای که پیدا کردم این لینک هست . امیدوارم بتونه کمک کنه
خیلی خیلی ممنونم
فقط یک سوال من نمیتونم css اصلی رو تغییر بدم یعنی قابل تغییر نیست ایا راهی نداره ؟
فقط یه موضوعی کد css فوگالری قابلیت تغییر نداره اون اصلیه که توی اطلاعات سیستمش هست
پس چطور میشه عوضش کرد