O
ggi vi spieghiamo come utilizzare Jetpack per creare un news ticker che visualizzi gli articoli più visti.
Cos'è Jetpack
Jetpack è uno dei plugin più scaricati ed utilizzati di WordPress, la sua caratteristica principale è quella di includere in un unico plugin diverse funzionalità che permettono di arricchire il vostro sito senza dover installare ulteriori plugin.
Alcune delle funzionalità di Jetpack sono: la condivisione automatica dei tuoi articoli sui social network, la raccolta delle informazioni importanti, il monitoraggio delle statistiche sul traffico e la possibilità di attivare un tema per il Mobile. Altre funzionalità potete trovarle in JetPack -> Impostazioni.
NOTA: per attivare tutte le funzionalità, JetPack richiede che sia collegato un account WordPress.com. Se non hai già un account, potrai crearlo comodamente durante il procedimento di installazione del plugin.
Leggere le statistiche e mostrare i post più letti
Per recuperare le statistiche e creare il nostro news ticker useremo la funzione stats_get_csv() di JetPack.
Essa accetta una serie di parametri utili per filtrare al meglio i post:
api_key, blog_id, blog_uri, table, post_id, end, days, period, limit, summarize, format
Da questo link https://stats.wordpress.com/csv.php è possibile avere ulteriori informazioni su come utilizzare questi dati
Il codice Html
Primo step
Creiamo queste 3 variabili all’interno di un template file
$cnt = 0;
$top_posts = stats_get_csv(‘postviews’, “days=30&limit=20”);
$max -> il numero massimo di articoli che vogliamo visualizzare
$cnt -> la variabile per contare i cicli del loop
$top_posts -> la variabile per recuperare le visite degli ultimi 30 giorni e come limite mettiamo un numero più elevato della variabile $max perchè la funzione recupera tutte gli elementi più visti, quindi oltre ai post anche le page e gli attachment.
Secondo step
Lanciamo un ciclo con il costrutto foreach
Terzo step
Recuperiamo le informazioni dei post
$post_obj -> creiamo questa variabile che grazie alla funzione get_post() crea un Object che racchiude alcune informazioni del post. Le informazioni relative al post vengono recuperate grazie all’ID.
Quarto step
Prima di mostrare a video i post più letti facciamo dei controlli sui post
Grazie alla variabile $post_obj verifichiamo se le pagine recuperate tramite la funzione stats_get_csv() siano dei post ($post_obj->post_type == ‘post’) e che siano pubblicate ($post_obj->post_status == ‘publish’) oltre a contare il numero di post da visualizzare ($cnt < $max)
Quinto step
Mostriamo a video i dati del post
Sesto step
Chiudiamo il nostro codice con la variabile che incrementa la variabile $cnt
La variabile $cnt++ ci serve per contare il numero di cicli e visualizzare il numero dei post assegnati all’altra variabile $max
Il codice completo
<ul>
<li class=”loading”>loading…</li>
<?php
$l = ICL_LANGUAGE_CODE;
$max = 10;
$cnt = 0;
$top_posts = stats_get_csv(‘postviews’, “days=31&limit=50”);
foreach($top_posts as $post) {
$post_obj = get_post($post[‘post_id’]);
$lingua = apply_filters( ‘wpml_post_language_details’, NULL, $post_obj->ID );
if (is_array($lingua)){
$lang = array_filter($lingua);
if (isset($post_obj) && $post_obj->post_type == ‘post’ && $post_obj->post_status == ‘publish’ && $cnt < $max && $lang[‘language_code’] == $l) {
$categories = get_the_category( $post_obj->ID );
foreach ($categories as $category) {
$cat = $category->cat_ID;
}
if($cat != 130 ){
$cnt++;
}
}
}
}
?>
</ul>
</div>
jQuery per far scorrere i post
Il nostro News Ticker è quasi pronto. Per renderlo dinamico bisogna aggiungere del codice jQuery.
Nell’esempio che vi mostriamo di seguito abbiamo usato il plugin Easy Ticker .
var dd = $(trg).easyTicker({
direction: ‘up’,
easing: ‘easeInOutBack’,
speed: ‘slow’,
interval: 5000,
height: ‘auto’,
visible: 1,
mousePause: 1,
controls: {
//up: ‘.up’,
//down: ‘.down’,
// toggle: ‘.toggle’,
//stopText: ‘Stop !!!’
}
}).data(‘easyTicker’);
dd.stop();
var timer_ = setInterval(function(){
if($(trg).find(‘ul li’).length>1){
clearInterval(timer_);
$(trg).find(‘ul li.loading’).remove();
dd.start();
}
}, 100);
}; //end function
Se avete domande o suggerimenti lasciateci un commento!
See you soon!
Leave a Comment