امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

اضافه کردن یک اسلایدر Responsive به پوسته وردپرس

در این آموزش قصد دارم شما را با نحوۀ اضافه کردن یک اسلایدر انعطاف‌پذیر یا به‌اصطلاح Responsive به وب‌سات وردپرسی‌تان آشنا کنم.

مرحله به مرحله این آموزش را از ساخت یک نوع پست سفارشی(Custom Post Type) برای نگه‌داری اسلایدها گرفته تا نحوۀ استفاده آن در سایت، پوشش خواهیم داد.

برای این آموزش از FlexSlider 2 استفاده خواهیم کرد که کاری از WooThemes می‌باشد و یک اسلایدر انعطاف‌پذیر مناسب و مرتبی هست و زیر نظر پروانه GPLv2  جواز دارد. اگر علاقه داشتید می‌توانید کدهای آن را در مرکز  GitHub این اسلایدر بررسی نمایید.

اولین کاری که می‌کنیم این هست که FlexSlider را دانلود می‌کنیم.

بعد از دانلود آن را unzip کنید.

از بین فایل‌های extract شدۀ اسلایدر، فقط به چند تای آنها نیاز خواهیم داشت.

  • flexslider.css
  • images/bg_direction_nav.png
  • jquery.flexslider-min.js

مرحله اول : ست کردن فایل‌ها

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

در اینجا ما داخل پوشۀ پوسته‌مان یک پوشه جدید بنام inc درست کرده و داخل آن نیز پوشه‌ای با نام slider می‌سازیم تا فایل‌ها را در آن قرار بدهیم.

داخل پوشه slider 3 نیز پوشه‌هایی با نام‌های زیر می‌سازیم:

  • css
  • images
  • js

فایل flexslider.css را داخل پوشه css ، فایل bg_direction_nav.png را داخل پوشه images و jquery.flexslider-min.js را داخل پوشه js قرار می‌دهیم.

حال داخل پوشه slider دو فایل جدید با نام‌های زیر را ایجاد می‌کنیم:

slider.php – که قالب اسلایدر را ساخته و فایل‌های آن را بارگزاری می‌کند.

slider_post_type.php – که نوع پست را ایجاد می‌کند.

قبل از اینکه به مرحله بعدی برویم، فایل functions.php پوسته خود را باز کرده و کد زیر را در آن وارد نمایید تا توسط آن 2 فایل جدیدی که ایجاد کردیم فراخوانی شوند.

// Create Slider Post Type
require( get_template_directory() . '/inc/slider/slider_post_type.php' );
// Create Slider
require( get_template_directory() . '/inc/slider/slider.php' );

مرحله دوم : نوع پست اسلایدر

در این مرحله اولین کاری که می‌کنیم این هست که یک نوع پست سفارشی(Custom Post Type) درست می‌کنیم تا تمام اسلایدهای‌مان در آن قرار بگیرند. نوع پست‌های سفارشی در نسخه 3.0 وردپرس معرفی شدند که یکی از جالب‌ترین امکاناتی هست که تاکنون به وردپرس اضافه شده است.

فایل slider_post_type.php را با ویرایشگر کد خود باز کرده و کد زیر را در آن وارد نمایید تا توسط آن نوع پست سفارشی اسلاید را ایجاد کند :

<?php

// Create Custom Post Type
	
	function register_slides_posttype() {
		$labels = array(
			'name' 				=> _x( 'اسلایدها', 'post type general name' ),
			'singular_name'		=> _x( 'اسلاید', 'post type singular name' ),
			'add_new' 			=> __( 'اضافه کردن اسلاید جدید' ),
			'add_new_item' 		=> __( 'اضافه کردن اسلاید جدید' ),
			'edit_item' 		=> __( 'ویرایش اسلاید' ),
			'new_item' 			=> __( 'اسلاید جدید' ),
			'view_item' 		=> __( 'نمایش اسلاید' ),
			'search_items' 		=> __( 'جستجو در اسلایدها' ),
			'not_found' 		=> __( 'اسلاید' ),
			'not_found_in_trash'=> __( 'اسلاید' ),
			'parent_item_colon' => __( 'اسلاید' ),
			'menu_name'			=> __( 'اسلایدها' )
		);
		
		$taxonomies = array();
		
		$supports = array('title','thumbnail');
		
		$post_type_args = array(
			'labels' 			=> $labels,
			'singular_label' 	=> __('Slide'),
			'public' 			=> true,
			'show_ui' 			=> true,
			'publicly_queryable'=> true,
			'query_var'			=> true,
			'capability_type' 	=> 'post',
			'has_archive' 		=> false,
			'hierarchical' 		=> false,
			'rewrite' 			=> array('slug' => 'slides', 'with_front' => false ),
			'supports' 			=> $supports,
			'menu_position' 	=> 27, // Where it is in the menu. Change to 6 and it's below posts. 11 and it's below media, etc.
			'menu_icon' 		=> get_template_directory_uri() . '/inc/slider/images/icon.png',
			'taxonomies'		=> $taxonomies
		 );
		 register_post_type('slides',$post_type_args);
	}
	add_action('init', 'register_slides_posttype');

خوب اکنون که نوع پست سفارشی اسلاید ایجاد شد، در ادامه آن کدهای زیر را اضافه می‌کنیم تا یک metabox اضافه شود و بتوانیم توسط آن URL ای برای تصویر اسلاید درنظر بگیریم تا به آن لینک شود.

// Meta Box for Slider URL

	$slidelink_2_metabox = array( 
		'id' => 'slidelink',
		'title' => 'لینک اسلاید',
		'page' => array('slides'),
		'context' => 'normal',
		'priority' => 'default',
		'fields' => array(
	
					
					array(
						'name' 			=> 'URL اسلاید',
						'desc' 			=> '',
						'id' 				=> 'wptuts_slideurl',
						'class' 			=> 'wptuts_slideurl',
						'type' 			=> 'text',
						'rich_editor' 	=> 0,			
						'max' 			=> 0				
					),
					)
	);			
				
	add_action('admin_menu', 'wptuts_add_slidelink_2_meta_box');
	function wptuts_add_slidelink_2_meta_box() {
	
		global $slidelink_2_metabox;		
	
		foreach($slidelink_2_metabox['page'] as $page) {
			add_meta_box($slidelink_2_metabox['id'], $slidelink_2_metabox['title'], 'wptuts_show_slidelink_2_box', $page, 'normal', 'default', $slidelink_2_metabox);
		}
	}
	
	// function to show meta boxes
	function wptuts_show_slidelink_2_box()	{
		global $post;
		global $slidelink_2_metabox;
		global $wptuts_prefix;
		global $wp_version;
		
		// Use nonce for verification
		echo '<input type="hidden" name="wptuts_slidelink_2_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';
		
		echo '<table class="form-table">';
	
		foreach ($slidelink_2_metabox['fields'] as $field) {
			// get current post meta data
	
			$meta = get_post_meta($post->ID, $field['id'], true);
			
			echo '<tr>',
					'<th style="width:20%"><label for="', $field['id'], '">', stripslashes($field['name']), '</label></th>',
					'<td class="wptuts_field_type_' . str_replace(' ', '_', $field['type']) . '">';
			switch ($field['type']) {
				case 'text':
					echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:97%" /><br/>', '', stripslashes($field['desc']);
					break;
			}
			echo    '<td>',
				'</tr>';
		}
		
		echo '</table>';
	}	
	
	// Save data from meta box
	add_action('save_post', 'wptuts_slidelink_2_save');
	function wptuts_slidelink_2_save($post_id) {
		global $post;
		global $slidelink_2_metabox;
		
		// verify nonce
		if (!wp_verify_nonce($_POST['wptuts_slidelink_2_meta_box_nonce'], basename(__FILE__))) {
			return $post_id;
		}
	
		// check autosave
		if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
			return $post_id;
		}
	
		// check permissions
		if ('page' == $_POST['post_type']) {
			if (!current_user_can('edit_page', $post_id)) {
				return $post_id;
			}
		} elseif (!current_user_can('edit_post', $post_id)) {
			return $post_id;
		}
		
		foreach ($slidelink_2_metabox['fields'] as $field) {
		
			$old = get_post_meta($post_id, $field['id'], true);
			$new = $_POST[$field['id']];
			
			if ($new && $new != $old) {
				if($field['type'] == 'date') {
					$new = wptuts_format_date($new);
					update_post_meta($post_id, $field['id'], $new);
				} else {
					if(is_string($new)) {
						$new = $new;
					} 
					update_post_meta($post_id, $field['id'], $new);
					
					
				}
			} elseif ('' == $new && $old) {
				delete_post_meta($post_id, $field['id'], $old);
			}
		}
	}

خوب تا اینجا اگر به صفحه پیشخوان خود مراجعه کنید، یک نوع پست سفارشی جدید بنام “اسلایدها” مثل تصویر زیر را مشاهده خواهید کرد.

مرحله سوم : فراخوانی فایل‌های اسلایدر

فایل slider.php را باز کنید. اکنون می‌خواهیم با کد زیر، فایل jQuery و شیوه‌نامه FlexSlider را فراخوانی کنیم. در صورت تمایل می‌توانید بجای فراخوانی شیوه‌نامه FlexSlider، محتویات flexslider.css را در شیوه‌نامه پوسته خود (style.css) کپی نمایید.

<?php
// Enqueue Flexslider Files
    function wptuts_slider_scripts() {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_style( 'flex-style', get_template_directory_uri() . '/inc/slider/css/flexslider.css' );
        wp_enqueue_script( 'flex-script', get_template_directory_uri() .  '/inc/slider/js/jquery.flexslider-min.js', array( 'jquery' ), false, true );
    }
    add_action( 'wp_enqueue_scripts', 'wptuts_slider_scripts' );

بخاطر ساختار فایل‌مان باید تغییریاتی در فایل flexslider.css نیز انجام دهیم تا آدرس فراخوانی تصویر فِلِش‌ها معلوم شود. فایل شیوه‌نامه را باز کنید و دنبال ‘images’ بگردید و آن را با ‘images/..’ جایگزین کنید.

مرحله چهارم : مقداردهی اولیه اسلایدر

اکنون باید با اضافه کردن یک سری کد jQuery به بخش <head> پوسته‌مان، مقداردهی اولیه اسلایدر را انجام دهیم. کد زیر را به فایل slider.php اضافه می‌کنیم :

// Initialize Slider
    function wptuts_slider_initialize() { ?>
        <script type="text/javascript" charset="utf-8">
            jQuery(window).load(function() {
                jQuery('.flexslider').flexslider({
                    animation: "fade",
                    direction: "horizontal",
                    slideshowSpeed: 7000,
                    animationSpeed: 600
                });
            });
        </script>
    <?php }
    add_action( 'wp_head', 'wptuts_slider_initialize' );

پارامترهای بالا را می‌توانید بنا به نیاز و سلیقه خود تغییر دهید. مثلاً horizontal را vertical کنید و غیره. برای دیدن لیست کامل پارامترها می‌توانید به این لینک مراجعه نمایید.

مرحله پنجم : ایجاد اسلایدر

در این مرحله قصد داریم قالب اسلایدر را تهیه کنیم. برای این کار اول یک wp_query انجام خواهیم داد تا “نوشته‌ها” را از نوع پست سفارشی اسلایدها بدست آورد. سپس به بررسی وجود اسلاید خواهیم پرداخت و درصورت موجود بودن آن، اسلایدر را نمایش خواهیم داد. بعد از آن حلقه (loop) را آغاز می‌کنیم. سپس برای هر اسلاید چک خواهد کرد که آیا برای این اسلاید URL ای ست شده است یا خیر، و در صورت وجود یک لینک برای آن ایجاد می‌کند. بعد از آن تصویر اسلاید نمایش خواهد یافت و حلقه(loop) بسته می‌شود.

// Create Slider
    function wptuts_slider_template() {
        // Query Arguments
        $args = array(
            'post_type' => 'slides',
            'posts_per_page' => 5
        );
        // The Query
        $the_query = new WP_Query( $args );
        // Check if the Query returns any posts
        if ( $the_query->have_posts() ) {
            // Start the Slider ?>
            <div class="flexslider">
                <ul class="slides">
                    <?php
                    // The Loop
                    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <li>
                        <?php // Check if there's a Slide URL given and if so let's a link to it
                        if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
                            <a href="<?php echo esc_url( get_post_meta( get_the_id(), 'wptuts_slideurl', true) ); ?>">
                        <?php }
                        // The Slide's Image
                        echo the_post_thumbnail();
                        // Close off the Slide's Link if there is one
                        if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
                            </a>
                        <?php } ?>
                        </li>
                    <?php endwhile; ?>
                </ul><!-- .slides -->
            </div><!-- .flexslider -->
        <?php }
        // Reset Post Data
        wp_reset_postdata();
    }

مرحله ششم : استفاده از اسلایدر

خوب بالاخره اسلایدرمان را ساختیم! اکنون وقت آن هست که از آن استفاده کنیم. برای اضافه کردن تصویر به اسلایدر، از قسمت “اسلایدها” روی گزینه مربوطه کلیک می‌کنیم و از طریق قرار دادن تصویر شاخص، تصویر را بارگزاری می‌کنیم و به عنوان تصویر شاخص انتخاب می‌کنیم. اگر هم دوست داشتید تصویر به URL خاصی لینک شود، آن را در فیلد مربوطه وارد نمایید و در نهایت روی انتشار کلیک نمایید. جهت نمایش اسلایدر می‌توانید هر یک از فایل‌های قالب‌تان، مانند فایل index.php را باز کرده و تابع wptuts_slider_template را echo نمایید.

به عنوان مثال اگر می‌خواستیم اسلایدر را در پوسته “دو هزار و یازده” وردپرس، درست بعد از سربرگ صفحۀ خانه نمایش دهیم، داخل فایل index.php پوسته زیر کد<? ;()get_header کد زیر را اضافه می‌کنیم :

<?php echo wptuts_slider_template(); ?>

اما اگر این قالب را برای یک مشتری یا کسی تهیه می‌کنیم که نمی‌خواهد به فایل‌های پوسته دست بزند و کدنویسی بکند چکار کنیم؟ خوب یک راهش این هست که از shortcodeها استفاده کنیم تا تنها با یک کدی مثل [slider] بتواند اسلایدر را در هر نوشته یا برگه یا هر بخشی که امکان استفاده از shortcode در آن وجود دارد، نمایش دهد.

برای انجام این کار به انتهای فایل slider.php کد زیر را اضافه کنید :

// Slider Shortcode
    function wptuts_slider_shortcode() {
        ob_start();
        wptuts_slider_template();
        $slider = ob_get_clean();
        return $slider;
    }
    add_shortcode( 'slider', 'wptuts_slider_shortcode' );

اگر دوست داشتید می‌توانید پوشه مربوط به اسلایدر که حاوی فایل‌ها و کدهایی هست که در این آموزش با هم طی کردیم را از لینک زیر دانلود نمایید. کافیست پوشه را داخل پوشه inc پوسته‌تان extract کنید و اگر هم در مکانی دیگر جز inc کپی کردید یادتان نرود که آدرس‌دهی‌ها را تغییر دهید.

 منبع

درباره امین بهشتی

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

  1. سلام.

    ممنون از آموزشتون …. خیلی خوب بود.

    اما یه چیزی…..
    وقتی به اسلایدر دست نمیزنی (یعنی نه میزنی عکس بعدی نه عکس قبلی) بعد یه زمان مشخصی اسلاید ها خود به خود عوض میشه…
    اما زمانی که بهش دست میزنی دیگه از حالت خودکار رفتن به اسلاید بعد میوفته…!!
    مشکلش چیه؟؟؟
    ممنون.

    • خواهش می‌کنم،
      بله درسته. تنظیم پیش‌فرض اسلایدر به این صورت هست که موقع کار با کنترلر(بعدی، قبلی) اسلاید‌شو غیر فعال می‌شود. برای اینکه این گزینه را تغییر دهید باید در مرحله چهارم این آموزش کد زیر را اضافه کنید :

      pauseOnAction: false,
      

      بعد از اضافه شدن کد زیر را باید داشته باشید :

      // Initialize Slider
          function wptuts_slider_initialize() { ?>
              <script type="text/javascript" charset="utf-8">
                  jQuery(window).load(function() {
                      jQuery('.flexslider').flexslider({
                          animation: "fade",
                          direction: "horizontal",
                          slideshowSpeed: 7000,
                          pauseOnAction: false,
                          animationSpeed: 600
                      });
                  });
              </script>
          <?php }
          add_action( 'wp_head', 'wptuts_slider_initialize' );
      
  2. آموزش از اول دنبال کردم و مرحله به مرحله پیش رفتم اما اصلا قسمت اسلاید به پیشخوان اضاف نشد بعد که مشکل ببرسی کردم فهمیدم که باید قبل کدهای فایل فانکشن تگ php باز کرد. بعضی از دوستان هم همین مشکل داشتن واسه همین کد صحیح اینجا قرار میدم. از مدیر سایت هم خواهش میکنم کدها رو تصحیح کنند.

    // Create Slider Post Type

    // Create Slider

  3. سلام
    من آموزشتونو دیدم با این روش میشه اسلایدر های دیگه هم اضافه کرد؟
    راستش من یک اسلایدر سه بعدی دیدم که توی هر اسلایدش چند تا عکس داره ، برای اینکه تنظیمات اونجارو وارد ادمین کنیم باید چیکار کرد؟
    ممنون

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

      سپاس

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

        را زیر get_header گذاشتم ولی باز نمیاره
        راستی شاید چون با این پلاگین میشه چند تا اسلایدر درست کرد اینطوریه. اگه بخام یکی از اسلایدرارو بیاره باید کدشو چطوری وارد کنم؟

  4. سلام امین جان خب شما مثلا تصور کن ما خودمون یه اسلاید شویی رو طراحی کردیم و میخوایم در قسمت مدیریت این اسلاید شو رو مدیریت کنیم.چیکار باید بکنیم؟یعنی اگر بخوایم عکسی رو قرار بدیم دی اسلاید شو دیگه کد رو دست نزنیم

    • سلام،
      برای مدیریت تصاویر اسلایدرتون می تونید به دو روش عمل کنید:
      1- با استفاده از نوع پست‌های سفارشی (custom post types) که در این آموزش از همین روش استفاده شده و تصاویر با این روش ذخیره می‌شوند و بعد در قالب اسلایدر فراخوانی می‌شوند.
      2- ایجاد یک صفحه تنظیمات برای اسلایدر و تعیین فیلدهای لازم برای هر اسلاید و ذخیره آنها در پایگاه داده وردپرس و در آخر هم فراخوانی آنها در قالب اسلایدر.

      اولی راحت تر و بهتر هستش.

      سپاس

  5. سلام
    خسته نباشید
    من مشکل رو برطرف کردم !
    حتی در قسمت داشبورد اسلاید اومده و تصویر گذاشتم اما نمایش نمیده و به صورتی خطی راست هست !! برای مثال
    در ایت لینک http://hadafdownload.com/fag بالای قسمت نظرات یک خط ایجاد شده !!
    مشکل از کجاست !
    من دقیقا همون کارایی که گفتید رو انجام دادم مرحله 3-5 در فایل slider.php قرار دادم و مراحل دوم در فایل slider_post_type.php
    اما باز هم مشکل همینی هست که گفتم !

  6. سلام
    خدمت شما عرض کنم اگه طبق آموزش برم لازم هست مه جایی رو تغییر بدم !!
    یعنی من الا فایل های css js image ساختم !
    من یک بار اومدم بدون اینکه 2 پوشه بسازم یعنی inc/slider/css
    اینکارو کردم مستقیم نوشتم slidre/css
    در حالت دوم برای من یک عکسی نمایش می داد ولی الان فقط خطی سفید هست !

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

      در این آموزش فایل‌ها داخل پوشه‌ای بنام inc قرار داده شده‌اند، اگر شما هم طبق همین روش پیش رفته باشید باید آدرس دهی را هم دقیقاً به همان صورت انجام دهید.

  7. واسه مطمن شدن !
    اینکه مرحله 2 مستقیم در slider_post_type.php-
    مرحله ۳-۵ در فایل slider.php قرار داده میشه دیگه درسته ؟
    راستی ممکنه از فانکشن باشه ؟
    من وقتی کد ها رو اونجا قرار میدم ! مشکلی در ذخیره پیش نویس یا بروز رسانی وردپرس وجود میاد و به یه صفحه ی سفید میره البته ذخیره میکنه !!
    مشکل از این ممکنه باشه ؟

    • بله، کدهای مرحله دوم در فایل slider_post_type.php و کدهای مراحل 3 تا 5 در فایل slider.php

      اگر کاملاً مطمئن هستید که دقیقاً طبق آموزش پیش رفتید، احتملاً مشکل از جای دیگر هست.

      مثلاً یک احتمال این هست که یکی از افزونه‌هایی که نصب کردید با این کدها تداخلی ایجاد می‌کنند.

      باید با حوصله بشینید همه موارد را بررسی کنید.

      سپاس

  8. با سلام و تشکر از آموزش خوبتون . من فایل های source ای که شما برای دانلود گذاشتید رو استفاده کردم ولی گزینه “افزودن تصویر شاخص ” برای من وجود نداره .

    کلا هم در فایل slider_post_type بین آرایه های تعریف شده من این گزینه رو نمی بینم … میشه راهنمایی کنید لطفا ..

    ممنونم

  9. احتمال دیگری که به دهنم می‌رسه این هست که افزونه یا کدهایی در قالب‌تان با کدهای اسلایدر تداخلی ایجاد می‌کنند.
    اما با توجه به این که می‌فرمایید در پیج ادمین اضافه شده، احتمال بیشتری هست که یک جای کار را اشتباه رفتید.
    باید بررسی بشه.
    چند تا کار که برای با بررسی این مشکل می‌توانید انجام بدید این هست که :
    1- اول از همه چیز پشتیبان بگیرید!
    2- افزونه‌هایی که نصب هستند را یکی یکی غیر فعال کنید بعد اسلایدر را تست کنید.
    3- در یک فالب دیگر (مثلاً قالب 2012 وردپرس) آن مراحلی که رفتید را تست کنید.

    سپاس

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

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

(الزامی*)
(اختیاری)


− 3 = شش

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>