WordPress Creare Un Sito

Integrare uno Slider con WordPress

By Andrea Marchetti
@marchetti_design

Oggi andiamo a vedere come integrare lo slider con testi animato realizzato in precedenza con wordpress. Per integrare uno slider con wordpress l’approccio solitamete è il seguente, si crea un loop personalizzato che richiama le immagini in evidenza degli utlimi “3/4” articoli, pubblicati in una categoria “slider” creata appositamente.

Oggi  non utilizzeremo questo approccio che si basa sugli  articoli, ma utilizzeremo le pagine. Nel backend di wordpress quando creeremo una pagina avremo un checkbox che sepuntato inserirà la pagina (immagine e testi) nel loop dello slider.

Cominciamo aprendo il file function.php del nostro tema e attiviamo la funzione immagine in evidenza, impostando un immagine “slider” della grandezza del nostro slider

<?php /*** Funzione Thumbnail Attiva ***/

add_theme_support(‘post-thumbnails’);
if ( function_exists(‘add_theme_support’) ) {

	add_theme_support(‘post-thumbnails’);

}

if ( function_exists( ‘add_image_size’ ) ) {

	add_image_size( ‘cover’, 1000, 400, true ); 	//(cropped)

}

?>

Ora dobbiamo creare un metabox nel backend di wordpress con un campo personalizzato che chiameremo “my_meta_box_check” se questo campo è spuntato la pagina verrà aggiunta al loop dello slider

<?php  /*** Checkbox nell’backend ***/

add_action( ‘add_meta_boxes’, ‘cd_meta_box_add’ );
function cd_meta_box_add(){

	add_meta_box( ‘my-meta-box-id’, ‘Opzioni articolo’, ‘cd_meta_box_cb’, ‘page’, ‘normal’, ‘low’ );

}

function cd_meta_box_cb( $post ){
	$values = get_post_custom( $post->ID );

	$check = isset( $values[‘my_meta_box_check’] ) ? esc_attr( $values[‘my_meta_box_check’][0] ) : ”;

	wp_nonce_field( ‘my_meta_box_nonce’, ‘meta_box_nonce’ );
	?>
        <p style="font-size:16px;"> <label for="my_meta_box_check">Vuoi che la pagina appaia nello slider della home? spunta la voce sottostante.</label> </p>

        <p>  <div style="padding:10px;"><input type="checkbox" name="my_meta_box_check" id="my_meta_box_check" <?php checked( $check, ‘on’ ); ?> /> Aggiungi allo slider nella home </p>
	<?php

}
add_action( ‘save_post’, ‘cd_meta_box_save’ );

function cd_meta_box_save( $post_id ){
	// Bail if we’re doing an auto save

	if( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) return;
	// if our nonce isn’t there, or we can’t verify it, bail

	if( !isset( $_POST[‘meta_box_nonce’] ) || !wp_verify_nonce( $_POST[‘meta_box_nonce’], ‘my_meta_box_nonce’ ) ) return;
	// if our current user can’t edit this post, bail

	if( !current_user_can( ‘edit_post’ ) ) return;
	// now we can actually save the data

	$allowed = array(

		‘a’ => array( // on allow a tags

			‘href’ => array() // and those anchords can only have href attribute

		)

	);
	// This is purely my personal preference for saving checkboxes

	$chk = ( isset( $_POST[‘my_meta_box_check’] ) && $_POST[‘my_meta_box_check’] ) ? ‘on’ : ‘off’;

	update_post_meta( $post_id, ‘my_meta_box_check’, $chk );
}
?>

Fatto questo dobbiamo aprire il file header.php e inseriamo i file necessari al funzionamento dello slider (jquery, il file javascript dello slider e lo stile dello slider) nel mio caso utilizzando nivo slider spiegato nell’ articolo precedente sono

<script type="text/javascript" src="<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">// <![CDATA[

	function captionMoveIn() {

	jQuery(‘.nivo-caption’)

	.fadeIn("fast")

	.animate({left: "40%"},400)

	;};
	function captionMoveOut() {

	jQuery(‘.nivo-caption’)
	.animate({left: "0"},400)

	.fadeOut("fast")

	;};
// ]]></script>

<script type="text/javascript">// <![CDATA[

$(window).load(function() {

	$(‘#slider’).nivoSlider({

        effect:"fade",
        pauseTime:5000,

		animSpeed:850,

		 directionNav:true,

		afterLoad: function (){captionMoveIn();},
        beforeChange: function (){captionMoveOut();captionMoveIn();}
    });

});

// ]]></script>

Ora dobbiamo impostare il loop che richiami le pagine che hanno il campo personalizzato “my_metabox_check” selezionato. Il loop richiama gli ultimi 3 post che hanno il campo selezionato e li ordina in base alla numerazione delle pagina (è possibile dassegnare alla pagina un numero con l’apposito box attributi pagina nel backend)

<div class="slider-wrapper theme-default">

            <div id="slider" class="nivoSlider">
            	<?php query_posts(array(‘showposts’ => 3, ‘meta_key’ => ‘my_meta_box_check’,’meta_value’ => ‘on’, ‘post_type’ => ‘page’,’orderby’ => ‘menu_order’,’order’ => ‘ASC’ )); while (have_posts()) { the_post(); ?>
					 <?php if ( has_post_thumbnail() ) { ?>

					    <?php the_post_thumbnail( ‘cover’, array(‘title’ => ‘#cap-‘.get_the_ID().” )); ?>

					 <?php } ?> 
				<?php } wp_reset_query(); ?>
            </div>        
    </div>

Questo loop richiama solo le immagini ora c’è da impostare un altro loop per i titoli e i testi. Da notare che per collegare l’immagine al titolo e il testo di riferimento viene utilizzato l’attributo title dell’immagine (che fa riferimento all’id del div html che contiene titolo e testo)

<?php query_posts(array(‘showposts’ => 3, ‘meta_key’ => ‘my_meta_box_check’,’meta_value’ => ‘on’, ‘post_type’ => ‘page’)); while (have_posts()) { the_post(); ?>
		<div id="cap-<?php echo get_the_ID();?>" class="nivo-html-caption">

	    	<h2><?php the_title(); ?></h2>

		    <?php my_excerpt(30); ?>

		</div>
	<?php } wp_reset_query(); ?>

Questi due loop vanno messi uno sotto l’altro. Una volta fatto questo nel backend di wordpress ci apparirà il checkbox

Ora quando vorremo pubblicare un contenuto nello slider basterà creare la pagina e spuntare il checkbox. Le pagine possono essere ordinate con il box attributi pagina, qui di seguito il download del file function.php e dei loop utilizzati.

Stay Tuned!

Creare Un Sito

Potrebbero interessarti:

Creare il tuo primo Tema WordPress Responsive