Dopo che in molti hanno insistito per questo tutorial/guida, oggi vedremo come creare un bottone “Load more” in stile Twitter per caricare in tempo reale più articoli. Esattamente come il bottone che c’è nella home di Skimbu, dopo tutti gli articoli e prima del footer. Per la creazione dello script abbiamo preso ispirazione dallo script di un tutorial ora non più visitabile, lo script è basato sulla libreria jQuery.

Breve introduzione

Se ti piace aggiungere nuove funzionalità al tuo tema e mostrarle ai tuoi lettori, allora questa è una delle prime novità che dovrai implementare. Un bottone dinamico e veloce come “Carica più articoli” non solo renderà più interessante e moderno il tuo blog, ma lo velocizzerà, in quanto tantissimi lettori navigano spesso tra le pagine che a volte raggiungono anche tempi di caricamento piuttosto lunghi.

Per implementare questo script faremo tutto dalla pagina del tema Functions.php, da essa infatti faremo aggiungere da PHP un pezzo di script jQuery nel footer che servirà a gestire più che altro il click del bottone, quindi in PHP, sempre in functions.php, metteremo la parte di codice che elabora la richiesta e restituisce gli articoli.

Guida

La prima cosa da fare è creare la funzione che aggiungerà uno script jQuery al footer e aggiungere un cosiddetto filtro che compia quest’azione. Quindi, presupponendo che PHP sia già aperto (altrimenti all’inizio aggiungi <?php ) aggiungi questo codice in functions.php:

add_filter('wp_footer', 'javascript_page');

function javascript_page() {

global $query_string;

?>

L’ultima riga global $query_string permette di sapere se il lettore si trova in un archivio, in una categoria, o nella home. In ogni caso la richiesta da fare al database sarà diversa.

A questo punto aggiungiamo lo script per intero, che ho commentato a dovere per spiegarlo e ho messo in evidenza le parti che dovrai modificare per adattarle meglio alle tue pagine:

<script type="text/javascript">

$(document).ready(function() {

var number = 7; //DA MODIFICARE: Questo è il numero di articoli per ogni pagina, devi impostare quello del tuo blog!

var offset = 0; //L'attuale numero di articoli oltre il numero di articoli per ogni pagina

var page_number = 2; //La prima pagina di cui sicuramente dovrai caricare gli articoli

var busy = false;

$('#loading-more').bind('click', function(e) { //DA MODIFICARE: sostituisci #loading-more con l'ID (css) del bottone che si troverà nel tuo tema.

busy = true;

$('#loading-more').html('<?php _e("Sto caricando...", "l_skimbu"); ?>').addClass('loading'); //DA MODIFICARE: sostituisci sempre l' ID css del bottone che hai aggiunto al tuo tema

//Qui sotto vengono fatte tutte le elaborazioni varie e la richiesta degli articoli, gestita via Ajax e PHP

$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {

action: 'and_action',

off: offset+number,

pagenumber: page_number,

query_string: '<?php echo $query_string; ?>'

}, function(data) {

if(data == "") {  //Nel caso non ci siano articoli da caricare

$('#loading-more').html('<strong>Non ci sono articoli!</strong>').removeClass('loading');	//DA MODIFICARE: cambia sempre l'ID CSS del tuo bottone

}

else {

offset = offset+number;

$('.empty-div').append('<h1 class="pages">Pagina '+page_number+'</h1>'+data); //DA MODIFICARE: cambia .empty-div con la classe del contenitore nel quale appariranno gli articoli

$('#loading-more').removeClass('loading').html('Carica più articoli');	//DA MODIFICARE: cambia sempre l'ID css del bottone

busy = false;

page_number += 1;

}

});

});

});

</script>

Dopo aver aggiunto lo script che gestisce la richiesta, passiamo al vero motore dello script, la parte PHP che esegue la richiesta al database. Essa non fa altro che dare a WordPress le informazioni della query al database che dovrà compiere, in sostanza dice a WordPress quali articoli deve prendere. Solo la parte finale dovrai forse modificare (ho comunque commentato lo script).

<?php

}

add_action('wp_ajax_and_action', 'get_posts_page');

add_action('wp_ajax_nopriv_and_action', 'get_posts_page');

function get_posts_page() {

$query_string = $_POST['query_string'];

global $wpdb;

parse_str( $query_string, $args );

$args = array(

'posts_per_page'      => 7, //DA MODIFICARE: sostituisci 7 con il numero di articoli per pagina del tuo blog

'post_status'     => 'publish',

'offset' =>$_POST['off']

);

query_posts( $args );

if (have_posts()) : while (have_posts()) : the_post();

//QUI VA IL LOOP, cioè la parte che mostra gli articoli, se non sei sicuro di cosa mettere, prova a lasciare la riga qui sotto, altrimenti sostiuiscila con il loop giusto.

get_template_part( 'loop');

endwhile; endif;

die();

}

La parte più importante è finita, considera che ci sono molte cose che dovrai stare attento a modificare. Non solo i vari ID e riferimenti vari che dipenderanno dal tuo tema e dal tuo blog, ma anche il loop, la parte finale dello script.

In ogni caso per qualunque domanda prova a farla nei commenti e cercheremo di risponderti!

Il bottone e le classi HTML

Una volta aggiunta la parte di codice fondamentale in functions.php basterà aggiungere il bottone al template per far funzionare tutto. Per cominciare, puoi aggiungerlo nella pagina Index.php, nella posizione che desideri, per essere sicuro di non perdere alcuna referenza nel codice puoi utilizzare questo template per il bottone:

<div class="empty-div"></div>

<div id="loading-more">

Carica più articoli

</div>

Poi a te toccherà stilizzare il contenuto tramite i CSS. Ricorda che lo script aggiunge in automatico una classe chiamata loading al bottone #loading-more, puoi sfruttare quella classe per dare uno stile particolare al bottone mentre i nuovi articoli si stanno caricando, esattamente come accade in Skimbu.

Lo script completo

Se non hai avuto voglia di seguire la guida oppure ti interessa lo script completo da piazzare in functions.php, eccolo!!

/*LOAD MORE POSTS*/

add_filter('wp_footer', 'javascript_page');

function javascript_page() {

global $query_string;  // So we can access the category information and stuff like that

?>

<script type="text/javascript">

$(document).ready(function() {

var number = 7; //DA MODIFICARE: Questo è il numero di articoli per ogni pagina, devi impostare quello del tuo blog!

var offset = 0; //L'attuale numero di articoli oltre il numero di articoli per ogni pagina

var page_number = 2; //La prima pagina di cui sicuramente dovrai caricare gli articoli

var busy = false;

$('#loading-more').bind('click', function(e) { //DA MODIFICARE: sostituisci #loading-more con l'ID (css) del bottone che si troverà nel tuo tema.

busy = true;

$('#loading-more').html('<?php _e("Sto caricando...", "l_skimbu"); ?>').addClass('loading'); //DA MODIFICARE: sostituisci sempre l' ID css del bottone che hai aggiunto al tuo tema

//Qui sotto vengono fatte tutte le elaborazioni varie e la richiesta degli articoli, gestita via Ajax e PHP

$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {

action: 'and_action',

off: offset+number,

pagenumber: page_number,

query_string: '<?php echo $query_string; ?>'

}, function(data) {

if(data == "") {  //Nel caso non ci siano articoli da caricare

$('#loading-more').html('<strong>Non ci sono articoli!</strong>').removeClass('loading');	//DA MODIFICARE: cambia sempre l'ID CSS del tuo bottone

}

else {

offset = offset+number;

$('.empty-div').append('<h1 class="pages">Pagina '+page_number+'</h1>'+data); //DA MODIFICARE: cambia .empty-div con la classe del contenitore nel quale appariranno gli articoli

$('#loading-more').removeClass('loading').html('Carica più articoli');	//DA MODIFICARE: cambia sempre l'ID css del bottone

busy = false;

page_number += 1;

}

});

});

});

</script>

<?php

}

add_action('wp_ajax_and_action', 'get_posts_page');

add_action('wp_ajax_nopriv_and_action', 'get_posts_page');

function get_posts_page() {

$query_string = $_POST['query_string'];

global $wpdb;

parse_str( $query_string, $args );

$args = array(

'posts_per_page'      => 7, //DA MODIFICARE: sostituisci 7 con il numero di articoli per pagina del tuo blog

'post_status'     => 'publish',

'offset' =>$_POST['off']

);

query_posts( $args );

if (have_posts()) : while (have_posts()) : the_post();

//QUI VA IL LOOP, cioè la parte che mostra gli articoli, se non sei sicuro di cosa mettere, prova a lasciare la riga qui sotto, altrimenti sostiuiscila con il loop giusto.

get_template_part( 'loop');

endwhile; endif;

die();

}