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

اگر شما هم با مشکل باز نشدن گالری تصاویر بصورت لایت باکس در نسخه جدید ووکامرس و بعد از بروز رسانی آن به نسخه ۳٫۰ روبرو هستید، پیشنهاد می کنیم که این مطلب را بخوانید.

مشکل کار نکردن لایت باکس در نسخه جدید ووکامرس

پیش از ارتقاء ووکامرس به نسخه ۳٫۰، باید تنظیمات در قسمت ووکامرس > پیکربندی > محصولات > Display به صورت زیر بود:

با فعالسازی ویژگی مذکور، تصاویر محصولات به شکل زیر در می آمد:

خب حالا فرض کنیم که شما وبلاگ ووکامرس را دنبال نمی کنید (در صورتیکه باید دنبال کنید!) و فرض کنیم که شما نسخه ۳٫۰ ووکامرس را ابتدا روی نسخه کپی و آزمایشی سایت خود تست نکرده اید.

همه چیز به خوبی کار کرده و شما ادامه داده و ووکامرس را در سایت اصلی خود به نسخه ۳٫۰ بروز رسانی می کند.

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

به محض اینکه به نسخه ۳٫۰ بروز رسانی کنید، اولین چیزی که متوجه آن می شوید این است که لایت باکس غیرفعال شده و تصاویر در مرورگر به صورت زیر نمایش داده می شوند.

حالا وقتی که به مسیر ووکامرس > پیکربندی > محصولات > Display مراجعه می کنید، متوجه این موضوع می شوید که دیگر اثری از گزینه مربوط به نمایش لایت باکس برای تصاویر نیست!

حتما سوال شما هم هست که چه اتفاقی افتاده؟ گزینه مربوط به نمایش لایت باکس کجا رفته و چرا این اتفاق بعد از بروز رسانی به نسخه ۳٫۰ افتاده است؟

ووکامرس نسخه ۳٫۰ و ویژگی های جدید مربوط به گالری

ووکامرس نسخه ۳٫۰ ویژگی های جدید و جالبی را به خصوص برای بخش تصاویر معرفی کرده است:

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

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

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

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

رفع مشکل سازگاری با ویژگی های جدید اضافه شده در نسخه ۳٫۰ ووکامرس برای گالری تصاویر

خبر خوب این است که سازگار کردن قالب و رفع مشکل مربوط به گالری تصاویر در نسخه ۳٫۰ ووکامرس کار ساده ای است. اگر از قالبی استفاده می کنید که توسط فروشگاه های معتبر ارائه شده است، توصیه ما به شما این است که با طراح قالب خود تماس گرفته و از وی بخواهید تا این مشکل را رفع کند. اما اگر خود میخواهید این مشکل را رفع کنید، تنها کافی است کدهای زیر را درون فایل functions.php قالب خود قرار دهید:

add_action( 'after_setup_theme', 'yourtheme_setup' );
function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

به محض اینکه کدهای مذکور را اضافه کردید، کافی است به صفحه محصول مورد نظر خود بازگشته و نتیجه را مشاهده کنید:

اگر قالب شما استایل مربوط به هسته ووکامرس را غیرفعال نکرده باشد، تنها کاری که مانده و باید انجام بدهید استفاده از گالری جدید است. اما معمولا اتفاقی که رایج است این است که این استایل غیرفعال شده است و از همین رو شما باید کدهای استایل مربوطه را اضافه کنید. از همین رو می توانید کدهای CSS زیر را به فایل style.css قالب خود اضافه کنید:

/* WooCommerce 3.0 Gallery */
 
.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}
 
.woocommerce-product-gallery figure {
margin: 0
}
 
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}
 
.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}
 
.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}
 
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}
 
.woocommerce-product-gallery img {
display: block
}
 
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}
 
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}
 
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}
 
.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}
 
a.woocommerce-product-gallery__trigger {
text-decoration: none;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}
 
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}

از گالری جدید خود لذت ببرید!

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

پــــــایـــــــان