WordPress: visualizzare i post in evidenza con Nivo Slider

Nivo Slider, popolarissimo plugin per jQuery, ha anche una versione a pagamento per WordPress. In questo articolo vi mostrerò come ottenere lo stesso risultato senza dover acquistare il plugin per WordPress creando così uno slider di post in evidenza.

Preparazione

Scaricate Nivo Slider per jQuery e inserite i file del plugin in una directory del vostro tema. Per comodità chiameremo questa directory js. Dovreste avere la seguente struttura di directory:

- tema
  -- js
     -- nivo-slider

Ovviamente verificate sempre che i file richiamati dalle funzioni di WordPress si trovino effettivamente nelle directory specificate.

Aggiungere le immagini

Aggiungete il seguente codice al file functions.php:

add_theme_support( 'post-thumbnails' );
	
if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'sliding-images', 800, 400, true );
}

Inserire dei meta box per i post in evidenza

Aggiungete il seguente codice al file functions.php:

add_action("admin_init", "selection_meta_box");

	function selection_meta_box(){
		add_meta_box("featured-post", "Post in evidenza", "featured_post", "post", "side", "low");
	}
	
	function featured_post(){
		global $post;
		$meta_data = get_post_custom($post->ID);
		$featured_post = $meta_data["_featured_post"][0];
		$selected = ($meta_data["_featured_post"][0] == "yes") ? 'checked' : '';
		echo "<p>";
		echo "<input $selected type='checkbox' name='featured_post' value='yes' />";
		echo "<label>Imposta come post in evidenza.</label>";
		echo "</p>";
	}
	
	add_action('save_post', 'save_post_details');
	
	function save_post_details(){
		global $post;
		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
    	return;
		$featured_post = trim($_POST["featured_post"]);
		update_post_meta($post->ID, "_featured_post", $featured_post);
	}

Mostrare i post in evidenza

Aggiungete il seguente codice al file functions.php:

function show_featured_posts($numbers) {
		global $post;
		
		$featured_posts_array = get_posts( 'meta_key=_featured_post&meta_value=yes&numberposts='.$numbers.'&post_status=publish');
		$output .= '<div class="slider-wrapper theme-default">';
		$output .= '<div class="ribbon"></div>';
        $output .= '<div id="slider" class="nivoSlider">';
		foreach ($featured_posts_array as $post) :  setup_postdata($post); 
		$nivo_title = "#nivo".get_the_ID(); 
		if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { 
		$output .= get_the_post_thumbnail(get_the_ID(), array(800,400), array( "class" => "post_thumbnail", 'title' => $nivo_title )); }
		$caption .= "<div id='nivo".get_the_ID()."' class='nivo-html-caption'>
				<h2><a href='".get_permalink()."'>".get_the_title()."</a></h2>
                ".get_the_excerpt()."
            </div>";
		endforeach;
		$output .= '</div>';
		$output .= $caption;
		$output .= '</div>';
		return $output;
		
		wp_reset_query();
}

Aggiungere il codice JavaScript e CSS

Aggiungete il seguente codice al file functions.php:

function include_nivo_scripts() {
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
		wp_register_script( 'nivopack', get_bloginfo('template_directory').'/js/nivo-slider/jquery.nivo.slider.pack.js');
		wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'nivopack' );
	}    
	 
	add_action('wp_enqueue_scripts', 'include_nivo_scripts');
	
	add_action('wp_print_styles', 'add_nivo_stylesheets');
	function add_nivo_stylesheets() {
		 wp_register_style('nivo_theme_style', get_bloginfo('template_directory').'/js/nivo-slider/default/default.css');
		 wp_register_style('nivo_main_style', get_bloginfo('template_directory').'/js/nivo-slider/nivo-slider.css');
         wp_enqueue_style( 'nivo_theme_style');
		 wp_enqueue_style( 'nivo_main_style');
    }
	
	add_action('wp_footer', 'nivo_functioncall');
	function nivo_functioncall() {
		echo '<script type="text/javascript">
    	$(window).load(function() {
        $("#slider").nivoSlider();
   	 	});
   		</script>';
	}

Creare uno shortcode

Volendo possiamo anche utilizzare uno shortcode per visualizzare lo slider. Inserite il seguente codice nel file functions.php:

function nivo_featured_posts($atts, $content = null) {
		extract(shortcode_atts(array(
			"numbers" => '5'
		), $atts));
		echo show_featured_posts($numbers);
}
add_shortcode('nivo-featured', 'nivo_featured_posts');

Visualizzare lo slider

Possiamo utilizzare lo slider nel nostro tema in questo modo:

<?php echo show_featured_posts(5);?>