Integrare uno Slider con WordPress

By Andrea Marchetti - 23 Dic , 2012

Integrare uno Slider con WordPress
Slider Wordpress

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!

demo

Se ti và ringraziami con un Like a MarchettiDesign.net.

Oppure offrimi un caffè :-)
download

13 Commenti

  1. Ale ha detto:

    Ciao,
    senti ma il loop che richiami le pagine che hanno il campo personalizzato “my_metabox_check” selezionato.. dove va inserito? in header.php? e in quale punto di preciso? grazie

  2. Mimmo ha detto:

    Ciao grazie per il tutorial era giusto ciò che cercavo di capire ma ora mi trovo in una situazione a qui non riesco a risolvere 😛 non sono molto esperto di php credo sia dovuto al rest query in pratica ho inserito lo slide al disopra del file index.php subito prima del ciclo while per recuperare i post e non mi visualizza ne lo slider (ispezionando l’elemento trovo il risultato) ma no prosegue oltre e non visualizza neanche i post suggerimenti?

    grazie Mimmo

  3. Mimmo ha detto:

    Perdonami ho risolto 😛 ho pensato solo ora di spostare i js nell’header perche andavano in conflitto con quelli che wp inserisce nel footer 😉 grazie lo stesso per tutto e complimenti per il sito e i contenuti 🙂 pochi ma di qualità 🙂

  4. Mario ha detto:

    Ciao, prima di tutto complimenti per i tuoi articoli sono davvero ottimi..ma volevo chiederti una cosa, io sto creando il mio primo tema per wp e vorrei creare un landigpage con countdown…ma fin qui tutto ok il problema è passare i valori (mese, giorno, min ecc.) inseriti nell backend del tema? come li devo inserire nello script visto che questo e Jquery ? spero di essere stato chiaro grazie anticipatamante Mario

  5. Giorgio Assante ha detto:

    Errore: la demo in alto è in realtà è un altro download. Per il resto, ottimo tutorial. Grazie.

  6. domenico ha detto:

    ciao ho inserito la slider nell’header.php però ora viene visualizzata sulla testata di tutte le pagine.Sapresti dirmi se è possibile inserirla solo nella home?
    grazie

    • Andrea Marchetti ha detto:

      Ciao Domenico,
      inserisci lo slider tra il conditionl tag di wordpress < ?php if(is_home()){?> /* slider */ < ?php }?>

  7. Mario ha detto:

    Ciao Andrea,
    ho un problema riguardo il 4 touch slider nell’header, precisamente sulle diverse altezze delle immagini che scorrono, ho provato a renderle tutte delle stessa altezza senza però riuscirci. Ti ho mandato un’email in proposito ma non so se l’hai letta.
    Credi sia possibile renderle tutte della stessa altezza in modo da coprire il background nero?

    Grazie in anticipo per la risposta

  8. Piero ha detto:

    Ottimo articolo!!!
    Ma se volessi inserire più slider in una pagina?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *