تبلیغات

از درج هرگونه تبلیغات و مطالب هرز معذوریم

گالری تصاویر برای وردپرس با افزونه Photo Gallery by Supsystic به همراه ویدئو آموزشی

در ادامه آموزش افزونه های ساخت گالری تصاویر، در این مقاله میخواهیم افزونه ای برای ساخت گالری تصاویر برای وردپرس به نام Photo Gallery by Supsystic که در حوزه فعالیتی خود یکی از برترین هاست را معرفی کنیم و سعی می کنیم تمام بخش های آن را آموزش دهیم. سعی شده در این مقاله تمام گزینه ها جز به جز افزونه ساخت گالری تصاویر برای وردپرس آموزش داده شود. البته قبلا مقالات زیادی در این زمینه قرار دادیم مثل گالری عکس برای وردپرس که پیشنهاد میکنم حتما از این مقاله هم دیدن کنید.

گالری تصاویر برای وردپرس

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

صفحه افزونه گالری تصاویر در وردپرس

گالری تصاویر برای وردپرس با افزونه Photo Gallery by Supsystic

طبق روال همیشگی تولید محتوای ما، ابتدا می بایستی شما را با اطلاعاتی از افزونه که در صفحه مخزن بزرگ افزونه های وردپرس وجود دارد آشنا کنیم. اگر از انتهای همین مقاله آموزشی روی گزینه صفحه افزونه کلیک کنید و وارد صفحه مرتبط با افزونه در مخزن وردپرس شوید، متوجه می شوید که این افزونه پر کاربرد وردپرس توسط تیم supsystic.com  طراحی و برنامه نویسی شده است. کمی پایین تر در صفحه افزونه ، باکسی در سمت راست شما وجود دارد که اطلاعاتی درباره نسخه افزونه و اطلاعات دیگر واقع شده است.
این اطلاعات بیانگر دقیق بودن سیستم مدیریت محتوای وردپرس در رابطه با افزونه هاست. این افزونه تا کنون که در حال نگارش آن هستیم، بیش از ۷۰۰۰۰ بار دانلود و نصب و فعال سازی شده است و از تاریخ آخرین بروزرسانی آن نیز ۶ روز می گذرد. همچنین شما جهت کار با این افزونه به وردپرس بالاتر از نسخه ۳٫۵ وردپرس نیازمند هستید و اکنون که در حال تحریر این مقاله آموزشی هستیم ، آخرین نسخه قابل دسترس این افزونه، نسخه ۱٫۱۲٫۰ می باشد.

آموزش کار با افزونه Photo Gallery by Supsystic

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

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

انتخاب عنوان و قالب بندی گالری تصویر

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

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

زبانه اول از تنظیمات افزونه

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

تنظیمات زبانه اول افزونه

زبانه اول تنظیمات، یعنی Main Settings دارای تنظیمات بلند و بالایی است که موارد موجود در آن به شرح زیر می باشد:

Gallery Type: در این بخش از تنظیمات افزونه، شما می توانید نوع گالری ایجاد شده را مشخص نمایید.
Gallery Name: در این بخش از تنظیمات افزونه، شما می توانید نام گالری ایجاد شده را مشخص نمایید.
Gallery Position: در این بخش از تنظیمات افزونه، شما می توانید موقعیت قرارگیری گالری ایجاد شده را مشخص نمایید.
Image Distance: در این بخش از تنظیمات افزونه، شما می توانید فاصله تصاویر گالری را مشخص نمایید.
Gallery Width: در این بخش از تنظیمات افزونه، شما می توانید عرض گالری ایجاد شده را مشخص نمایید.
Full Screen Width: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید که گالری ایجاد شده شما به صورت فول اسکرین باشد. به بیان بهتر گالری شما تمام بخش های مانیتور کاربر را پوشش دهد.
Gallery Padding: در این بخش از تنظیمات افزونه، شما می توانید فاصله درونی گالری را مشخص نمایید.
Image Width: در این بخش از تنظیمات افزونه، شما می توانید عرض تصویر موجود در گالری را مشخص نمایید.
Image Height: در این بخش از تنظیمات افزونه، شما می توانید ارتفاع گالری موجود در گالری را مشخص نمایید.
Image Radius: در این بخش از تنظیمات افزونه، شما می توانید برای لبه های تصویر که به صورت پیش فرض حالت تیز مانند هستند، انحنا ایجاد کنید.
Image Crop: در این بخش از تنظیمات افزونه، شما می توانید تصاویر موجود در گالری را برش دهید.
Display Only First Image: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید کنید که تنها تصویر اول نمایش داده شود.
Open by Link in Popup: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید که لینک تصویر در پنجره جدید باز شود.
Hide Browser url tooltip on image hover‌: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید که در حالت هاور شدن تصویر در مرورگر، آدرس یا راهنمای تصویر نمایش داده نشود.
Social Sharin: در این بخش از تنظیمات افزونه، شما می توانید قابلیت اشتراک گذاری گالری در شبکه های اجتماعی را فعال کنید.
Load More Gallery Images Width Scroll or Button: در این بخش از تنظیمات افزونه، شما می توانید یک دکمه برای بارگذاری بیشتر تصاویر در گالری ایجاد کنید.
Custom Buttons: در این بخش از تنظیمات افزونه، شما می توانید دکمه ایجاد شده را سفارشی سازی نمایید.
Horizontal Scroll: در این بخش از تنظیمات افزونه، شما می توانید تنظیمات مرتبط با اسکرول افقی گالری را مشخص نمایید.
Border Type: در این بخش از تنظیمات افزونه، شما می توانید نوع حاشیه تصاویر گالری را مشخص نمایید.
Border Color: در این بخش از تنظیمات افزونه، شما می توانید رنگ مرتبط با حاشیه تصاویر گالری را مشخص نمایید.
Border Width: در این بخش از تنظیمات افزونه، شما می توانید عرض حاشیه تصاویر گالری را مشخص نمایید.
Shadow: در این بخش از تنظیمات افزونه، شما می توانید سایه حاشیه های تصاویر را مشخص نمایید.
Popup Image: در این بخش از تنظیمات افزونه، شما می توانید
Popup Box Theme: در این بخش از تنظیمات افزونه، شما می توانید
Disable on Mobile: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید که بخش پاپ آپ تصاویر در رزولوشن موبایل نمایش بدهد.
Popup Image Text: در این بخش از تنظیمات افزونه، شما می توانید متن تصویر در حالت پاپ آپ را مشخص نمایید.
Disable Browser History: در این بخش از تنظیمات افزونه، شما می توانید تاریخچه مرورگر را نسبت به گالری ایجاد شده فعال کنید.
Video Size: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید که اندازه ویدیو گالری در چه ابعادی باشد.
Autoplay Video: در این بخش از تنظیمات افزونه، شما می توانید نمایید که ویدیو بعد از اتمام و یا در ابتدای کار به صورت خودکار پلی شود.
When Video Ends: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید که وقتی ویدیو به اتمام می رسد چه اتفاقی رخ دهد.
Show Rotate Button: در این بخش از تنظیمات افزونه، شما می توانید قابلیت نمایش دکمه های چرخش را ایجاد کنید.
Show Details Button: در این بخش از تنظیمات افزونه ساخت گالری تصاویر برای وردپرس ، شما می توانید قابلیت نمایش دکمه جزئیات ویدیو را مشخص نمایید.
Show on Hover Thumbnail: در این بخش از تنظیمات افزونه ساخت گالری تصاویر برای وردپرس ، شما می توانید تنظیمات مرتبط با هاور شدن به صورت بندانگشتی ویدیو را مشخص نمایید.

زبانه دوم از تنظیمات

بعد از انجام تنظیمات مرتبط با منوی Main، روی گزینه Captions کلیک نمایید تا تنظیمات زیر قابل رویت شود.

تنظیمات زبانه دوم

این بخش هم به نوبه خود مانند بخش Main دارای تنظیمات منحصر به فردی است. این موارد شامل توضیحات زیر می باشد:

Use Caption Builder: در این بخش از تنظیمات افزونه، شما می توانید استفاده از سازنده توضیحات تصویر را مشخص نمایید.
Captions: در این بخش از تنظیمات افزونه، شما می توانید زیر نویس تصاویر را فعال کنید.
Effect: در این بخش از تنظیمات افزونه، شما می توانید افکت مرتبط با زیرنویس تصاویر را مشخص نمایید.
Image on Hover: در این بخش از تنظیمات افزونه، شما می توانید عملیاتی را برای زمان هاور شدن تصاویر ایجاد کنید.
Background Color For Show on Hover: در این بخش از تنظیمات افزونه، شما می توانید رنگ پس زمینه بخش زیرنویس را برای زمان هاور شدن مشخص نمایید.
Personal Captions: در این بخش از تنظیمات افزونه گالری تصاویر برای وردپرس ، شما می توانید زیرنویس های شخصی ایجاد کنید.
Polaroid Style: در این بخش از تنظیمات افزونه گالری تصاویر در وردپرس ، شما می توانید استایل های مرتبط با پلاروید را مشخص نمایید.
Background Color: در این بخش از تنظیمات افزونه گالری تصاویر برای وردپرس ، شما می توانید رنگ پس زمینه بخش زیرنویس را مشخص نمایید.
Text Color: در این بخش از تنظیمات افزونه گالری تصاویر برای وردپرس ، شما می توانید رنگ متن های موجود در بخش زیرنویس را مشخص نمایید.
Transparency: در این بخش از تنظیمات افزونه گالری تصاویر برای وردپرس ، شما می توانید شفافیت بخش زیرنویس را مشخص نمایید.
Text Size: در این بخش از تنظیمات افزونه، شما می توانید اندازه متن نوشته های موجود در بخش زیرنویس را مشخص نمایید.
Text Horizontal Align: در این بخش از تنظیمات افزونه، شما می توانید ترازبندی متن های افقی را مشخص نمایید.
Font Family: در این بخش از تنظیمات افزونه، شما می توانید خانواده فونت برای بخش زیرنویس انتخاب نمایید.
Hide Image Title Tooltip: در این بخش از تنظیمات افزونه، شما می توانید عنوان تصویر سربرگ را پنهان نمایید.
Mobile – Show Always Caption‌: در این بخش از تنظیمات افزونه، شما می توانید مشخص نمایید که زیرنویس در رزولوشن های موبایل نیز نمایش داده شود.
Disable Caption on Mobile: در این بخش از تنظیمات افزونه، شما می توانید عنوان ها را در رزولوشن موبایل غیرفعال کنید.
Show Icons: در این بخش از تنظیمات افزونه، شما می توانید نسبت به نمایش آیکن ها اقدام کنید.

پنل دسترسی به بخش ایجاد گالری

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

بگذریم!! روی گزینه Add Images کلیک نمایید تا پروسه ایجاد تصاویر فعال شود.

تنظیمات ظاهری گالری

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

تنظیمات زبانه caption

در این بخش از تنظیمات تصویر موجود در گالری شما می بایستی متن زیرنویس مرتبط با تصویر را انتخاب کنید. همچنین می توانید با کلیک کردن روی گزینه Choose Effect، افکت مورد نظر خود را برای این بخش مشخص نمایید.

تنظیمات زبانه Description

در این بخش از تنظیمات تصویر موجود در گالری شما می توانید توضیحاتی را برای تصویر خود در نظر بگیرید.

تنظیمات زبانه seo

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

تنظیمات زبانه link

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

تنظیمات زبانه video

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

تنظیمات زبانه category

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

تنظیمات زبانه link image

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

تنظیمات زبانه crop

در این بخش از تنظیمات تصویر موجود در گالری شما می توانید تصویر مورد نظر را کراپ (برش) کنید.

تنظیمات زبانه image on hover

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

دانلود افزونه Photo Gallery by Supsystic جهت ایجاد گالری تصاویر برای وردپرس :