Jetpack, creare un news ticker dei post più visti

Oggi 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

$max = 10;
$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

foreach($top_posts as $post) { }

Terzo step

Recuperiamo le informazioni dei post

$post_obj = get_post($post['post_id']);

$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

if (isset($post_obj) && $post_obj->post_type == 'post' && $post_obj->post_status == 'publish' && $cnt &lt; $max ) { }

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

echo '<li style="margin: 0px; display: list-item;"><i class="fa fa-angle-double-right" style="font-size:.8rem;"></i><a href="'.get_permalink( $post_obj->ID ).'">'.wp_trim_words($post_obj->post_title, 10, '...').'</a></li>';

Sesto step

Chiudiamo il nostro codice con la variabile che incrementa la variabile $cnt

$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

<div class="breaking-news-scroll" style="position: relative; overflow: hidden; height: 43px;">
<ul>
<li class="loading">loading...</li>
<?php
$l = ICL_LANGUAGE_CODE;
$max = 10;
$cnt = 0;
$top_posts = stats_get_csv('postviews', "days=31&amp;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 &lt; $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 .

function newsticker(trg){

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&gt;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!

CONDIVIDI SU