وب کافه

یک سایت دیگر با وردپرس فارسی
آموزش ساخت اسلایدر بدون افزونه برای ووکامرس
نویسنده:
24 آگوست 14

Parallax-Content-Slider

 

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

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

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

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

 

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *