

امروز قصد دارم آموزش ساخت اسلایدر را برای فروشگاه ساز ووکامرس قرار بدم شما میتوانید بدون استفاده از پلاگین این اسلایدر را ایجاد کرده و در سایت خود قرار بدهید .
ابتدا ما نیاز به پلاگین جاوا اسکریپت اسلاید داریم که من یک نمونه بطور مثال ParallaxContentSlider انتخاب کردم .
ابتدا باید در هدر سایتتون css و java را فراخوانی کنید پس ما کد زیر را بین تگ head قرار میدهیم
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/modernizr.custom.28468.js"></script> <script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.7.1.min.js"></script> <script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.cslider.js"></script>
و برای css کد زیر ار قرار میدهیم
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/daslider.css" />
اسلاید ما برای نمایش از کد زیر تبعیت می کند که ما باید حلقه محصولات خود را درون این کد قرار دهیم
<div id="da-slider" class="da-slider"> <div class="da-slide"> <h2>نام محصول</h2> <p>توضیحات محصول</p> <a href="#" class="da-link"></a> <div class="da-img"><img src="لینک عکس" alt="image01" /></div> </div> <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav> </div>
حالا ما نیاز داریم که یه فایل php ساخته و کد های مربوط به محصولات را داخل آن قرار دهیم بطور مثال شما میتوانید یک فایل ایجاد کرده و نام آن را slider .php قرار دهید و کدهای زیر را کپی کنید
<div id="da-slider" class="da-slider"> <?php args = array( 'post_type' => 'product', 'product_cat' => 'نام دسته مورد نظر برای نمایش محصول', 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?> <div class="da-slide"> <h2><?php the_title(); ?></h2> <p><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></p> <a href="<?php the_permalink(); ?>" class="da-link">خرید</a> <div class="da-img"> <a href="<?php the_permalink(); ?>"> <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" />'; ?> </a> </div> </div> <?php endwhile; ?> <?php wp_reset_query(); ?> <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav> </div> <script> $(function() { $( '#da-slider' ).cslider({ autoplay : true, bgincrement : 950 }); }); </script>
خب کار تمام شد فقط کافیه که این فایل slider.php را درون قالب خود فراخوانی کنید که میتوانید از کد زیر استفاده کنید
<?php include(TEMPLATEPATH.'/slider.php')?>
برای راحتی کار فایلهای بالا را برای دانلود قرار دادم که میتوانید دانلود کرده و استفاده نمایید توجه داشته باشید شما میتوانید کدهای حلقه محصولات را در هر اسلایدری که دوست داشتید استفاده کنید
سپاس