وب کافه

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

ابتدا ما نیاز به  پلاگین جاوا اسکریپت اسلاید داریم که من یک نمونه بطور مثال 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')?>

برای راحتی کار فایلهای بالا را برای دانلود قرار دادم که میتوانید دانلود کرده و استفاده نمایید توجه داشته باشید شما میتوانید کدهای حلقه محصولات را در هر اسلایدری که دوست داشتید استفاده کنید

دانود نمونه اسلایدر