افزونه Visual Portfolio

افزونه Visual Portfolio

امروزه بسیاری از مشاغل مانند عکاسان، آژانس های تبلیغاتی، معماران و هر کسب و کاری دیگری که خلاقیت لازمه کارش است، نیاز به ساخت یک وب سایت نمونه کار دارد تا کارهای خود را به معرض نمایش گذاشته و مشتریان بالقوه بیشتری کسب کند. اگر شما هم به چنین وب سایتی نیاز دارید، وردپرس بستر بسیار مناسبی است زیرا افزونه هایی مانند افزونه Visual Portfolio ایجاد یک وب سایت نمونه کار در بستر وردپرس را بسیار راحت کرده اند.از سری مقاله های آموزش رایگان طراحی سایت امروز به آموزش افزونه Visual Portfolio می پردازیم.

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

اگر از ویرایشگر گوتنبرگ وردپرس استفاده می کنید، این افزونه بلوک های اختصاصی برای این ویرایشگر دارد؛ اگر از افزونه های صفحه ساز وردپرس مانند افزونه المنتور و WPBakery Page Builder استفاده می کنید، کاملاً با این صفحه سازها سازگار است.

آموزش افزونه Visual Portfolio و نمایش نمونه کارها در وردپرس

ابتدا افزونه را دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید.

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

ساخت آیتم های نمونه کار

برای ایجاد یک آیتم جدید نمونه کار در پیشخوان وردپرس به مسیر Visual Portfolio » Portfolio Items بروید. صفحه ای مشابه شکل زیر مشاهده می کنید.

در این صفحه تمام نمونه کارها را می توانید مشاهده کنید. با توجه به اینکه هنوز نمونه کاری ایجاد نکرده اید، این صفحه خالی است.

برای ساخت نمونه کار جدید، روی دکمه Add New در بالای صفحه کلیک کنید.

صفحه ای مشابه ویرایشگر وردپرس به شما نمایش داده می شود.

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

• عنوان پست
• محتوای پست
• فرمت نوشته
• تاریخ انتشار
• تصویر شاخص
• دسته ها
• برچسب ها
• و غیره…

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

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

ابتدا روی آیکون + که مربوط به اضافه کردن بلوک جدید است، کلیک کنید. به پایین باکس اسکرول کنید تا بخش Visual Portfolio را مشاهده کنید. در این بخش، بلوک های مختلفی که این افزونه ارائه می دهد را مشاهده خواهید کرد.

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

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

به عنوان مثال اگر می خواهید نوشته ها یا هر نوع پست سفارشی دیگری را در طرح بندی خود نمایش دهید، روی Posts کیک کنید.

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

حال پست های شما در صفحه نمایش داده می شود.

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

Items Per Page- در این قسمت می توانید تعداد آیتم های هر صفحه را محدود کنید. می توانید تعداد موارد را محدود کرده و با ماژول Pagination ترکیب کنید.
No Items Action – وقتی هیچ موردی برای نمایش در دسترس نیست، یک اعلان سفارشی نمایش دهید یا بلوک را کاملاً مخفی کنید. اعلان سفارشی را می توانید در باکس زیر همین قسمت شخصی سازی کنید.

Exclude Posts: در این قسمت می توانید پست های خاصی را از خروجی حذف کنید. برای دیدن پیشنهادات پست، باید نام پست را تایپ کنید.

Taxonomies: این گزینه به شما امکان می دهد از طبقه بندی ها استفاده کنید. شما می توانید برچسب ها یا دسته های مورد نظر خود را در لیست طبقه بندی ها وارد کنید. دو گزینه در لیست Taxonomies وجود دارد: OR و AND.

اگر می خواهید همه نوشته ها را از طبقه بندی های انتخاب شده مشاهده کنید، رابطه OR را انتخاب کنید. به عنوان مثال، اگر می خواهید همه پست ها را از هر دو گروه “2020” و “2021” نشان دهید، OR را انتخاب کنید.

اگر می خواهید نوشته هایی را ببینید که همه برچسب ها و دسته های انتخاب شده را همزمان دارند، رابطه AND را انتخاب کنید. به عنوان مثال، اگر می خواهید همه پست ها با برچسب “طراحی” از دسته “2020” را نشان دهید، And را انتخاب کنید.

Order by: با استفاده از این گزینه، ترتیب موارد پیش فرض را براساس موارد زیر تغییر دهید:

• تاریخ
• عنوان
• شناسه
• تعداد کامنت ها
• ویرایش شده
• ترتیب منو
• تصادفی

جهت را با استفاده از گزینه Order Direction تغییر دهید.

Avoid Duplicate: در خروجی پست های منحصر به فرد و بدون تکراری که قبلاً در بلوک های نشان داده شده قبلی اضافه شده بود، نمایش داده می شود.

Offset: از این تنظیم برای پرش از روی پست ها استفاده کنید (به عنوان مثال 2 برای صرف نظر کردن از دو پست اول)

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

افزونه Visual Portfolio به طور پیش فرض با تصاویر و نوشته ها کار می کند. در نسخه Pro، می توانید ادغام با شبکه های اجتماعی را اضافه کرده و آخرین پست های شبکه های اجتماعی خود را در سایت نمایش دهید.

همه پست های شبکه اجتماعی هر 3 ساعت یکبار به طور خودکار لود می شوند؛ بنابراین پس از پیکربندی دیگر نیازی نیست نگران آن باشید. علاوه بر این، افزونه Visual Portfolio رسانه را از پست های اجتماعی دانلود کرده و آن را در سرور شما ارائه می دهد. این فرایند هم خودکار است که با استفاده از وظایف Cron به طور خودکار اجرا می شود.

شبکه های اجتماعی پشتیبانی شده توسط افزونه Visual Portfolio عبارتند از:

• اینستاگرام
• یوتیوب
• ویمئو
• فلیکر
• توییتر
• Google Photos

Visual Portfolio نه تنها برای نمونه کارها بلکه برای اکثر انواع پست ها تنظیمات متای سفارشی ارائه می دهد.

نقطه کانونی تصویر شاخص

هنگامی که تصویر شاخص را انتخاب می کنید، گاهی اوقات باید نقطه کانونی تصویر را تغییر دهید. برای این کار کافی است تصویر شاخص را انتخاب کرده و نقطه کانونی را به صورت بصری تغییر دهید. به این معنی که نقطه کانونی را کشیده و در مکان موردنظر خود رها کنید:

تنظیمات افزونه Visual Portfolio

برای پیکربندی تنظیمات افزونه Visual Portfolio در پیشخوان وردپرس به مسیر Visual Portfolio > Settings بروید. توجه داشته باشید که تنظیماتی که در این قسمت اعمال می کنید برای همه طرح های نمونه کارها اعمال خواهد شد.

تنظیمات عمومی افزونه Visual Portfolio

در تب General می توانید تنظیمات عمومی افزونه را پیکربندی کنید.

• Portfolio Slug– نامکی که در URL آیتم های نمونه کارها استفاده می شود.
• Filter Taxonomies– در این قسمت می توانید طبقه بندی هایی که می توانند برای نمونه کارها استفاده شوند را اضافه کنید. به عنوان مثال، اگر طبقه بندی portfolio_tag را در لیست اضافه کنید، می توانید گروهی از پست ها را براساس برچسب ها برای نمونه کارهای خود انتخاب کنید.
• No Image– در این قسمت می توانید یک تصویر پیش فرض تنظیم کنید که در صورت عدم وجود تصویر شاخص برای آیتم نمونه کارها استفاده شود.
• AJAX Cache and Preload– زمان درخواست تماس AJAX را کاهش دهید. این ویژگی تنها در نسخه Pro ارائه شده است.
• Responsive Breakpoints– این گزینه هم در نسخه Pro ارائه شده است و با استفاده از آن می توانید نقاط شکست پیش فرض برای ریسپانسیو بودن که برای کد ریسپانسیو خودکار چیدمان کاشی، ستون های چیدمان آجری و تعداد اسلایدهای گردونه استفاده می شود را تغییر دهید.

تصاویر

در تب Images می توانید تنظیمات تصاویر نمونه کارها را پیکربندی کنید.

Lazy Loading- در این قسمت می توانید ویژگی بارگذاری تنبل تصاویر Visual Portfolio را فعال کنید تا سرعت بارگیری صفحه بهینه شود. برای آشنایی با مفهوم بارگذاری تنبل و دیگر افزونه های این دسته، مقاله بهترین افزونه های Lazy Load وردپرس را مطالعه کنید.

سه گزینه در این بخش در اختیار شما قرار دارد:

• Disabled- اگر از افزونه دیگری برای بارگذاری تنبل تصاویر استفاده می کنید، برای اینکه تداخلی در کار هم ایجاد نکنند، بارگذاری تنبل ویژوال پورتفولیو را غیرفعال کنید.
• Visual Portfolio only- انتخاب این گزینه باعث می شود ویژگی بارگذاری تنبل تنها برای نمایش تصاویر در طرح های Visual Portfolio فعال شود.
• All images- بارگذاری تنبل را برای همه تصاویر در سایت خود فعال کنید.

Image Sizes- افزونه Visual Portfolio مجموعه ای از اندازه های سفارشی برای تصاویر ارائه می دهد. شما می توانید این اندازه ها را تغییر دهید اما حتماً باید تصاویر بندانگشتی را بازتولید کنید که با افزونه Regenerate Thumbnails به راحتی امکان پذیر است.

گالری پاپ آپ

تنظیمات گالری پاپ آپ را می توانید در تب Popup Gallery  افزونه Visual Portfolio تنظیم کنید.

• Vendor Script- اسکریپت گالری پاپ آپ (PhotoSwipe یا Fancybox) را از این قسمت می توانید انتخاب کنید.
• WordPress Images- پنجره پاپ آپ را نه تنها برای گالری های Visual Portfolio بلکه برای همه تصاویر و گالری های وردپرس فعال کنید.
• Deep Linking– این گزینه در نسخه Pro ارائه شده و باعث می شود هنگام باز کردن پنجره پاپ آپ URL به طور خودکار تغییر کند. به این ترتیب به راحتی می توانید به یک تصویر پاپ آپ خاص لینک دهید.
• Use Deep Linking URL to Share Images– این گزینه هم در نسخه Pro ارائه شده و باعث می شود هنگام اشتراک گذاری تصاویر، URL های Deep Linking را به اشتراک بگذارید. در صورت غیرفعال بودن، همه گالری ها لینک مستقیم به فایل های تصویر را به اشتراک می گذارند.
• Display Arrows- برای حرکت بین تصاویر پیکان نمایش دهید.
• Display Images Counter- اگر این گزینه را فعال کنید، یک شمارنده تصویر نمایش داده می شود.
• Display Zoom Button: نمایش دکمه بزرگنمایی
• Display Fullscreen Button: نمایش دکمه تمام صفحه
• Display Share Button: نمایش دکمه اشتراک گذاری
• Display Close Button: نمایش دکمه بستن
• Display Thumbnails: نمایش تصاویر بندانگشتی
• Display Download Button: نمایش دکمه دانلود
• Display Slideshow:  نمایش اسلایدشو
• Click to Zoom: به شما امکان می دهد با کلیک روی تصویر، امکان پیش فرض بزرگنمایی را غیرفعال کنید.
• Pages iFrame Custom CSS: وقتی صفحات را در iframe پاپ آپ نمایش می دهید، ممکن است به برخی از عناصر صفحه مانند هدر و پاورقی نیازی نداشته باشید. با استفاده از CSS سفارشی با کلاس .vp-popup-iframe می توانید آنها را مخفی کنید.

طرح بندی های ذخیره شده

اگر از ویرایشگر گوتنبرگ وردپرس برای ساخت نوشته ها و برگه های خود استفاده می کنید، از Saved Layouts استفاده نکنید بلکه از بلوک هایی که افزونه Visual Portfolio برای ویرایشگر گوتنبرگ وردپرس ساخته است، استفاده کنید.

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

طرح بندیهای ذخیره شده فقط برای صفحه سازهایی مانند وب سایت ساز Elementor ، افزونه WPBakery Page Builder و غیره استفاده می شوند.

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

همچنین یک کد کوتاه مفید برای صفحه ساز WPBakery و ابزارک المنتور وجود دارد که به شما امکان می دهد یکی از Saved Layout های موجود را انتخاب کرده و از آن استفاده کنید.