امروزه هر سایت مدرن شرکتی و خدماتی را که مشاهده می کنید بخشی با عنوان گالری تصاویر رسپانسیو دارند.
سایت های شرکتی معمولا در گالری تصاویر رسپانسیو خود؛ تصاویر همکاران، بخش های مختلف شرکت، تندیس ها و… را قرار می دهند و از قرار دادن این گونه تصاویر در بخش های دیگر سایت جهت جلوگیری از شلوغ شدن سایت، خودداری می کنند.
از این رو می توان گالری تصاویر رسپانسیو در وردپرس را یک امکان عالی و مفید دانست چرا که به کمک آن می توانید به سایت خود نظم بدهید و مهمتر از آن تجربه ی کاربری سایت خود را بالاتر ببرید!
تصاویر رسپانسیو در وردپرس
در این نوشته از گستران وب به آموزش افزونه ای جهت ایجاد گالری تصاویر رسپانسیو در وردپرس می پردازیم تا به راحتی در هر قسمتی از سایت خود بتوانید از این گالری تصاویر بهره مند شوید.
گالری تصاویر رسپانسیو برای هر نوع سایتی که به نوعی می خواهند تصاویری را در یک برگه/نوشته از سایت قرار دهند مناسب می باشد و فقط مختص سایت های شرکتی نمی باشد.
گالری تصاویر رسپانسیو در وردپرس با Responsive Photo Gallery
شروع کار
برای شروع کار ابتدا افزونه را دریافت نموده و از بخش افزونه های سایت خود آن را نصب نمایید. بعد از نصب این افزونه در بخش پیشخوان سایت وردپرسی شما بخشی با عنوان Responsive Photo Gallery برای ساخت گالری تصاویر رسپانسیو در وردپرس ایجاد شده است.
بعد از ورود به بخش تنظیمات این افزونه تمامی گالری هایی را که ایجاد کرده اید را مشاهده می کنید. اما چون هیچ گالری تصاویری ایجاد نکرده اید صفحه ی باز شده برای شما به شکل زیر خواهد بود.
ایجاد اولین گالری
از بخش مشخص شده در تصویر بالا بر روی گزینه ی Add New Gallery کلیک کنید تا اولین گالری تصاویر رسپانسیو در وردپرس را ایجاد کنید.
در صفحه ای که به شکل زیر برای شما باز می شود:
ستون سمت راست
ابتدا از ستون سمت راست می توانید عنوان گالری تصاویر رسپانسیو در وردپرس را مشخص کنید و بعد از آن هم می توانید تعداد تصاویر دلخواه را برای اضافه شدن به گالری مورد نظر اضافه کنید.
به عنوان مثال طبق تصویر بالا ما یک گالری برای گستران وب ایجاد کرده ایم و ۶ تصویر را به آن اضافه کرده ایم. از قسمت زیر هر تصویر هم می توانید یک لیبل برای تصویر خود مشخص کنید، لیبل هر تصویر می توانید به نوعی نام تصویر یا هر متن دلخواه که مربوط به تصویر است باشد.
ستون سمت چپ
این بخش که نیاز به توضیح ندارد و برای ذخیره ی گالری تصاویر رسپانسیو در وردپرس می باشد.
از این بخش هم می توانید شورت کد گالری تصاویر رسپانسیو در وردپرس خود را مشاهده کنید. بعد از انجام تمامی تنظیمات و ایجاد گالری مورد نظر می توانید این شورت کد را به بخشی از نوشته/برگه سایت خود اضافه کنید.
سه بخش دیگر ستون سمت چپ نیاز به توضیح ندارند و مربوط به بخش پرمیوم افزونه می باشند، که ما چون از بخش رایگان آن استفاده می کنیم به این بخش نیازی نداریم.
نمایش خروجی
ابتدا ما شورت کد مورد نظر را در یک نوشته از سایت خود قرار می دهیم.
و بعد از آن هم به نمایش نوشته می رویم تا نتیجه ی خروجی کار خود را مشاهده کنیم.
همان طور که مشاهده می کنید نتیجه کار به این صورت برای ما نمایش داده می شود.
با بردن مأوس بر روی هر تصویر هم با یک افکت زیبا مواجه می شوید که می توانید کاملا آن را شخصی سازی کنید (پایین تر توضیح می دهیم).
با کلیک بر روی هر تصویر هم، تصویر به صورت تک و اسلایدر برای شما نمایش داده خواهد شد. از قسمت چپ و راست تصویر می توانید به تصویر بعدی و قبلی بروید.
از قسمت بالا هم که در تصویر به آن اشاره کرده ایم می توانید تصویر باز شده را ببندید اما ممکن است این بخش برای شما نامناسب باشد این به این دلیل است که دکمه ی مورد نظر به زیر ادمین بار سایت شما در بالا رفته است اما با ورود کاربر به سایت شما این مشکل رفع خواهد شد چرا که کاربر وارد سایت نشده و ادمین بار برای او نمایش داده نمیشود.
تنظیمات گالری ایجاد شده
از بخش Gallery Settings افزونه می توانید تنظیمات مربوط به گالری تصاویر رسپانسیو در وردپرس ایجاد شده را انجام دهید.
Image Hover Animation: نوع انیمیشنی را که با بردن مأوس بر روی هر تصویر مشاهده می شود را می توانید با این گزینه تغییر دهید.
Gallery Layout: اگر به گالری تصویری که ایجاد کردیم توجه کرده باشید بصورت دو ستونه بود، با این گزینه می توانید آن را بصورت دو ستونه/سه ستونه ایجاد کنید.
Display Gallery Title: نمایش/عدم نمایش عنوان گالری تصاویر رسپانسیو در وردپرس
Hover Color: نوع رنگی که با بردن مأوس بر روی تصاویر نمایش داده می شود را با این گزینه می توانید تعیین کنید.
ادامه تنظیمات
Hover Color Opacity: گزینه ی بالا نوع رنگ را مشخص می کرد که با این گزینه می توانید داشتن/عدم داشتن شفافیت رنگ را مشخص کنید.
Image View Icon: آیکونی که با بردن مأوس بر روی هر تصویر نمایش داده می شود را می توانید مشخص کنید.
Caption Font Style: اگر به یاد داشته باشد می توانستیم برای هر تصویر یک لیبل(متن مربوط به هر تصویر) ایجاد کنیم، با این گزینه می توانید نوع فونت لیبل هر تصویر را مشخص کنید.