در این آموزش با استفاده از کد سفارشی، یک شورتکد اسلایدر محصولات میسازیم. شما میتوانید این شورتکد را در صفحات خود استفاده کنید.
- استفاده از آن رایگان است.
- قابل استفاده در گوتنبرگ، المنتور و سایر صفحهسازها.
- بر خلاف پلاگینها این کد وردپرس شما را کند نمیکند.
- امکان توسعه بیشتر و افزودن امکانات دلخواه.
آموزش ساخت اسلایدر محصولات ووکامرس با کد سفارشی
روش کار بسیار ساده است، ابتدا کد ساخت شورتکد را در سایت قرار میدهیم، سپس با استفاده از بلوک شورتکد، اسلایدر محصولات را در صفحات خود قرار میدهیم.
کد شورتکد اسلایدر محصولات
کد سفارشی زیر را در وبسایت خود قرار دهید.
add_shortcode( 'nargil-woo-slider', function ( $atts ) {
$atts = shortcode_atts(
[
"image" => "on",
"check_stock" => "off", // on
"description" => "on", // off
"price" => "on", // off
"num" => "10",
"card" => "4",
"add_to_card" => "on",
"cats" => "", // 10,15,
"auto_paly" => "off",
"on_sale" => "",
"type" => "", // featured or bestselling
"sale_badge" => "on",
"rating" => "on",
"theme" => "",
],
$atts,
"woo-slider"
);
static $woo_slider_first_call = 1;
$num = $atts["num"];
$card = $atts["card"];
$image = $atts["image"];
$cat = $atts["cats"];
$check_stock = $atts["check_stock"];
$description = $atts["description"];
$price = $atts["price"];
$add_to_card = $atts["add_to_card"];
$on_sale = $atts["on_sale"];
$sale_badge = $atts["sale_badge"];
$rating = $atts["rating"];
$type = $atts["type"];
$theme = $atts["theme"];
$auto_paly = $atts["auto_paly"];
$auto_paly = ( $atts["auto_paly"] == "on" ) ? "slider-nav-autoplay" : "";
$tax_query = $meta_key = $total_sales = $type_arr = "";
$tax_query_arr = [];
$orderby = 'date';
$max_num_pages = 1;
if ( $check_stock == "on" ) { $check_stock_term = ['key' => '_stock_status','value' => 'outofstock','compare' => 'NOT LIKE']; } else { $check_stock_term = []; }
if ( $on_sale == "on" ) { $on_sal_meta =WC()->query->get_meta_query(); $on_sale_q = array_merge(array(0), wc_get_product_ids_on_sale()); } else { $on_sal_meta = $on_sale_q = []; }
if ( $cat != "" ) { $tax_query_arr[] = ['taxonomy' => 'product_cat','field' => 'term_id', 'terms' => explode(",", $cat) ]; $tax_query= 'tax_query'; }
if ( $type == "featured" ) { $tax_query_arr[] = [ 'taxonomy' => 'product_visibility','field' => 'name','terms' => 'featured','operator' => 'IN', ]; $tax_query= 'tax_query'; } else if ( $type == "bestselling" ) { $orderby = "meta_value_num"; $meta_key = 'meta_key'; $total_sales = 'total_sales'; }
$class= 'woo_slider'.$woo_slider_first_call;
$output ="<div class='Main_wrapper swiffy-slider slider-item-show".$card." ".$auto_paly." slider-item-show2-sm slider-nav-round slider-nav-sm slider-nav-visible slider-item-first-visible slider-nav-autopause slider-indicators-round slider-indicators-dark slider-indicators-outside slider-indicators-sm ".$auto_paly." ".$class."'> <ul class='slider-container'>";
$arr = [
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => $num,
$meta_key => $total_sales,
'orderby' => $orderby, // order by title or date
'order' => 'DESC',
'meta_query' => [$check_stock_term,$on_sal_meta],
$tax_query => $tax_query_arr,
'post__in' => $on_sale_q,
];
$the_query = new WP_Query($arr);
$number_of_result = $the_query->found_posts;
$count = min( $number_of_result,$num );
if ($the_query->have_posts()){
while ($the_query->have_posts()):
$the_query->the_post();
$product = wc_get_product();
$current_price = $product->get_price_html();
$sale_badge_e = "";
ob_start();
the_permalink();
$link = ob_get_clean();
ob_start();
the_title();
$title = ob_get_clean();
if ( has_post_thumbnail( get_the_ID() ) ) {
$img = get_the_post_thumbnail( get_the_ID(), 'shop_single' );
} else {
$img = '<img src="' . woocommerce_placeholder_img_src() . '" alt="'.$title.'" />';
}
$output .="<li class='slider_card slide-visible'> <div class='post_card'>";
if ( $product->is_on_sale() ) { $sale_badge_e = ( $sale_badge != "off" ) ? "<span class='onsale'>تخفیف!</span>" : ""; }
if ( $image == "on" ) { $output .='<a href="'.$link .'" style="position: relative;">'.$sale_badge_e.$img.'</a>'; }
$output .= "<span class='wwo_card_details'>";
$output .='<a class="p_title" href="'.$link .'">'.$title.'</a>';
if ( $product->get_average_rating() && $rating !="off" ) { $output .='<span class="woocommerce">'.wc_get_rating_html($product->get_average_rating())."</span>"; }
if ( $description == "on" ) { $output .='<p >'.$product->get_short_description().'</p>'; }
if ( $price == "on" ) { $output .='<span class="price">'.$current_price.'</span>'; }
if ( $add_to_card == "on" ) {
ob_start();
woocommerce_template_loop_add_to_cart();
$add_to_cart_button = ob_get_clean();
$output .= '<span class="woo_add_to_card">'.$add_to_cart_button.'</span>'; }
$output .= "</span'>";
$output .= "</div></li>";
endwhile;
wp_reset_postdata();
} // end of loop
$output .= "</ul>";
$output .= '
<button type="button" class="slider-nav" aria-label="Go left"></button>
<button type="button" class="slider-nav slider-nav-next" aria-label="Go left"></button>
<div class="slider-indicators">
<button class="active" aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
</div>
';
$output .= "</div>";
if ( $woo_slider_first_call == 1 ) {
add_action( 'wp_footer', function () use($class) { ?>
<script>const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()});</script>
<style>
/* Slider styles omitted for brevity - see full code above */
</style>
<?php }); }
add_action( 'wp_footer', function () use($class, $theme ) { if ( $theme == "2" ) { ?>
<style>
div.<?= $class ?> li.slider_card.slide-visible {
overflow: hidden;
}
div.<?= $class ?> span.wwo_card_details {
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
position: absolute;
inset: 0;
background-color: #ffffffe6;
justify-content: center;
transform: translateY(100%);
}
div.<?= $class ?> .slider-container .post_card:hover span.wwo_card_details {
transform: translateY(0px);
}
</style>
<?php }
});
$woo_slider_first_call++;
return $output;
});
یک صفحه جدید بسازید، یک بلوک شورتکد به آن اضافه کنید و شورتکد زیر را در آن قرار دهید.
[nargil-woo-slider]
تنظیمات اسلایدر محصولات
برای این شورتکد بیش از ده اتریبیوت در نظر گرفتهام که با تغییر هر کدام از آنها میتوانید اسلایدر خود را سفارشیسازی کنید.
| اتریبیوت | توضیح | مقدار پیشفرض |
|---|---|---|
theme |
تغییر پوسته اسلایدر (1 و 2) | 1 |
card |
تعداد محصولات قابل مشاهده | 4 |
sale_badge |
نمایش برچسب تخفیف | on |
rating |
نمایش امتیاز محصول | on |
description |
نمایش توضیحات کوتاه محصول | on |
auto_paly |
حرکت خودکار کارت محصولات | off |
num |
تعداد محصولات لود شده | 10 |
cats |
آیدی کتگوری محصولات | - |
check_stock |
حذف محصولات ناموجود | off |
on_sale |
نمایش محصولات تخفیفدار | off |
type |
نمایش محصولات ویژه یا پرفروش (featured/bestselling) | - |
نمونه شورتکدها:
تغییر پوسته به 2:
[nargil-woo-slider theme="2"]
ترکیب کامل:
[nargil-woo-slider card="4" num="10" sale_badge="on" rating="on" description="off" check_stock="off" on_sale="off" cats="" type="" auto_paly="on" theme="1"]
در این کد با ترکیب کلاس WP_Query وردپرس و کتابخانه swiffy slider، اسلایدر (کاروسل) محصولات را میسازیم.
کتابخانه swiffy slider یکی از سبکترین کتابخانههای ساخت اسلایدر است و خروجی نهایی زیبایی دارد که میتوانید آن را به دلخواه خود سفارشی سازی کنید. در این شورتکد ابتدا تنظیمات مورد نظر کاربر را با استفاده از اتریبیوتها دریافت میکنیم، سپس با ترکیب این اتریبیوتها کوئری مناسب را ساخته و با استفاده از کلاس WP_Query، آبجکت محصولات درخواستی را استخراج میکنیم و در فرمت استاندارد swiffy slider نمایش میدهیم.