گالری تصاویر رسپانسیو در وردپرس با Responsive Photo Gallery

تصاویر رسپانسیو در وردپرس

اضافه شدن ویدئوی آموزشی در تاریخ 15 تیر ماه 1396
امروزه هر سایت مدرن شرکتی و خدماتی را که مشاهده می کنید بخشی با عنوان گالری تصاویر رسپانسیو دارند.
سایت های شرکتی معمولا در گالری تصاویر رسپانسیو خود؛ تصاویر همکاران، بخش های مختلف شرکت، تندیس ها و… را قرار می دهند و از قرار دادن این گونه تصاویر در بخش های دیگر سایت جهت جلوگیری از شلوغ شدن سایت، خودداری می کنند.
از این رو می توان گالری تصاویر رسپانسیو در وردپرس را یک امکان عالی و مفید دانست چرا که به کمک آن می توانید به سایت خود نظم بدهید و مهمتر از آن تجربه ی کاربری سایت خود را بالاتر ببرید!

تصاویر رسپانسیو در وردپرس

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

گالری تصاویر رسپانسیو در وردپرس با Responsive Photo Gallery

responsive photo gallery - تصاویر رسپانسیو در وردپرس

شروع کار

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

all gallery - تصاویر رسپانسیو در وردپرس

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

add new gallery - تصاویر رسپانسیو در وردپرس

ایجاد اولین گالری

از بخش مشخص شده در تصویر بالا بر روی گزینه ی Add New Gallery کلیک کنید تا اولین گالری تصاویر رسپانسیو در وردپرس را ایجاد کنید.
در صفحه ای که به شکل زیر برای شما باز می شود:

add new image - تصاویر رسپانسیو در وردپرس

ستون سمت راست

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

subject - تصاویر رسپانسیو در وردپرس

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

ستون سمت چپ

publish-تصاویر رسپانسیو در وردپرس

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

shortcode - تصاویر رسپانسیو در وردپرس

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

  استفاده از وردپرس برای مدیریت اسناد با WP Document Revisions

نمایش خروجی

ابتدا ما شورت کد مورد نظر را در یک نوشته از سایت خود قرار می دهیم.

image gallery - تصاویر رسپانسیو در وردپرس

و بعد از آن هم به نمایش نوشته می رویم تا نتیجه ی خروجی کار خود را مشاهده کنیم.

result -تصاویر رسپانسیو در وردپرس

همان طور که مشاهده می کنید نتیجه کار به این صورت برای ما نمایش داده می شود.
با بردن مأوس بر روی هر تصویر هم با یک افکت زیبا مواجه می شوید که می توانید کاملا آن را شخصی سازی کنید (پایین تر توضیح می دهیم).

open image - تصاویر رسپانسیو در وردپرس

با کلیک بر روی هر تصویر هم، تصویر به صورت تک و اسلایدر برای شما نمایش داده خواهد شد. از قسمت چپ و راست تصویر می توانید به تصویر بعدی و قبلی بروید.

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

تنظیمات گالری ایجاد شده

gallery settings - تصاویر رسپانسیو در وردپرس

از بخش Gallery Settings افزونه می توانید تنظیمات مربوط به گالری تصاویر رسپانسیو در وردپرس ایجاد شده را انجام دهید.

responsive - تصاویر رسپانسیو در وردپرس

Image Hover Animation: نوع انیمیشنی را که با بردن مأوس بر روی هر تصویر مشاهده می شود را می توانید با این گزینه تغییر دهید.
Gallery Layout: اگر به گالری تصویری که ایجاد کردیم توجه کرده باشید بصورت دو ستونه بود، با این گزینه می توانید آن را بصورت دو ستونه/سه ستونه ایجاد کنید.
Display Gallery Title: نمایش/عدم نمایش عنوان گالری تصاویر رسپانسیو در وردپرس
Hover Color: نوع رنگی که با بردن مأوس بر روی تصاویر نمایش داده می شود را با این گزینه می توانید تعیین کنید.

ادامه تنظیمات

Hover Color Opacity: گزینه ی بالا نوع رنگ را مشخص می کرد که با این گزینه می توانید داشتن/عدم داشتن شفافیت رنگ را مشخص کنید.
Image View Icon: آیکونی که با بردن مأوس بر روی هر تصویر نمایش داده می شود را می توانید مشخص کنید.
Caption Font Style: اگر به یاد داشته باشد می توانستیم برای هر تصویر یک لیبل(متن مربوط به هر تصویر) ایجاد کنیم، با این گزینه می توانید نوع فونت لیبل هر تصویر را مشخص کنید.

موفق باشید…

ویدئوی آموزشی

دانلود ویدئوی آموشی

ویدئوی آموزشی

دانلود افزونه Responsive Photo Gallery

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

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.