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

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

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

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

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

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

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

شروع کار

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

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

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

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

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

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

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

ستون سمت راست

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

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

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

ستون سمت چپ

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

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

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

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

نمایش خروجی

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

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: اگر به یاد داشته باشد می توانستیم برای هر تصویر یک لیبل(متن مربوط به هر تصویر) ایجاد کنیم، با این گزینه می توانید نوع فونت لیبل هر تصویر را مشخص کنید.

موفق باشید…

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

  اتصال وردپرس به تلگرام با Telegram for WP+ آموزش ویدئویی

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

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

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

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

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

300,987 نفر

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

مطالب زیر را حتما بخوانید

دوره‌های آموزشی