Con questo piccolo tutorial voglio illustrare il modo per visualizzare gli articoli recenti con effetto newsticker sulla sidebar del vostro blog in wordpress. Con il termine “newsticker” si vuole indicare una piccola sezione della pagina in cui si possono leggere le ultime notizie (gli ultimi post in questo caso) con l’effetto scorrimento tipico dei siti di informazione giornalistica.
L’esecuzione di questo script richiede l’editing di alcuni file specifici del vostro template grafico, quindi è consigliabile eseguire una copia di backup della cartella del tema corrente.

Articoli Recenti con Effetto Newsticker

Passo 1 – Creazione delo stile del modulo

La seguente porzione di codice contiene lo stile CSS del modulo recent-post-newsticker. Possiamo inserire il seguente codice direttamente nel foglio di stile principale del nostro template (di solito denominato style.css) oppure creare un nuovo file css (newsticker.css).

#listticker{/*Impostazioni generali del modulo*/
text-align:left;
height:220px;
width:270px;
overflow:hidden;
padding:6px 6px 6px 6px;
}
#listticker ul{/*Impostazioni generali della lista*/
border:0;
margin-bottom:0;
padding:0;
list-style:none;
background:#f4f4f4;
}
#listticker li{/*Impostazioni del singolo elemento della lista*/
height:40px;
padding:5px;
list-style:none;
margin-top:5px;
border:dashed 1px #dddddd;
background:#ffffff;
}
#listticker a{/*Impostazioni dell'aspetto dei link*/
display:block;
color:#857d59;
margin-bottom:0px;
font-weight:bold;
float:left;
font-size:11px;
}

Questo codice CSS può essere modificato secondo i propri gusti ed in linea allo stile grafico del blog in cui va inserito. Con le impostazioni d’esempio dovremmo ottenere il seguente rendering.

A questo punto creiamo una cartella post_newsticker dove posizioniamo l’eventuale file .css dello stile se si è scelta questa strada. All’interno della cartella post_newsticker inseriamo anche il file jquery.js che fà riferimento alle librerie base di JQuery, framework javascript utilizzato per ricreare l’effetto scorrimento.
A questo punto siamo pronti per trasferire sul server e precisamente all’interno della directory del template grafico la cartella post_newsticker contenente i file.

Passo 2 – Modifica del file header.php

Con questa modifica intendiamo richiamare i file precedentemente caricati. Le seguenti porzioni di codice vanno inserite all’interno dei tag head. Nel caso del file .css separato per lo stile inseriamo:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); >/post_newsticker/newsticker.css" type="text/css" />

Inseriamo il riferimento alla libreria jquery:

<script src="<?php bloginfo('template_directory'); >/post_newsticker/jquery.js" type="text/javascript">
</script>

A questo punto inseriamo il codice javascript che realizzerà l’effetto scorrimento sulla lista di articoli.

<script type="text/javascript">
$(document).ready(function(){

	var first = 0;
	var speed = 500;
	var pause = 3000;

		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = '
	<li style="display:none" mce_style="display:none">'+first+'</li>
';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);
});
</script>

Intervenendo sulle variabili speed e pause possiamo modificare rispettivamente la velocità di aggiornamento dell’elemento della lista e il tempo tra un aggiornamento e l’altro.
A questo manca il collegamento tra gli n articoli recenti del blog e gli elementi della lista.

Passo 3 – Modifica del file sidebar.php

Per ricavare la lista degli “n” articoli recenti del blog utilizziamo le funzioni native relative alla gestione dei post offerte dalla piattaforma wordpress.

<h2> Articoli recenti</h2>
<ul id="listticker">
 <?php
 $lastposts = get_posts('numberposts=10');
 foreach($lastposts as $post) :
    setup_postdata($post);
 ?>
 <li>
 <a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>

Il codice dovrà essere inserito seguendo la struttura stilistica della pagina, presumibilmente potrebbe far parte di un elemento div oppure potrebbe essere lasciato così com’è.
Come si può notare l’elemento ul richiama lo stile dell’id definito nel foglio di stile. Con la variabile “numberpost” definiamo il numero n dei post che dovranno essere contenuti nella lista newsticker.

Conclusione

A questo punto il modulo recent-post-newsticker è stato installato correttamente.

Buona parte del materiale che ha resto possibile l’implementazione di questo modulo è stato recuperato su Woork (il blog tecnico di Antonio Lupetti) nel seguente articolo ” How to implement a news ticker with jQuery and ten lines of code “.

Se hai suggerimenti o idee su come migliorare il modulo puoi scrivere un commento all’articolo.