Con il rilascio della v4.1 di WordPress e il relativo tema Twenty Fifteen molti blog si sono trovati improvvisamente compatibili con il modulo Infinite Scroll presente in Jetpack, il noto contenitore di plugin sviluppato da WordPress.com. Nel presente articolo darò per scontato che siate a conoscenza delle funzionalità del modulo, in caso contrario vi invito a leggere qui.
Il modulo prevede un Footer standard che si compone di una parte sinistra, nella quale troviamo il nome del sito o blog su cui è installato, e di una parte destra, contenente la frase "Proudly powered by WordPress theme <nome del tema>".
Per modificare i contenuti della parte destra è sufficiente aggiungere il seguente Filter personalizzato (se non sapete cos'è un Filter o come aggiungerlo, leggete qui):
|
1 2 3 4 5 6 7 |
/** * Custom Filter to replace footer credits for JetPack Infinite Scroll **/ function my_infinite_scroll_credit(){ return '<div>custom HTML text <a href="http://www.google.com/" target="_blank">with a link to Google</a>.</div>'; } add_filter('infinite_scroll_credit','my_infinite_scroll_credit'); |
Per cambiare la parte sinistra è necessaria qualche riga di codice aggiuntiva:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/** * Custom Infinite Footer for Jetpack Infinite Scroll. */ function my_custom_infinite_footer() { ?> <div id="infinite-footer"> <div class="container"> <div class="blog-info"> LEFT SIDE HTML CONTENT </div> <div class="blog-credits"> RIGHT SIDE HTML CONTENT </div> </div> </div> <?php } /** * Custom Filter to replace the JetPack Infinite Scroll Footer **/ function my_infinite_scroll_settings( $args ) { if ( is_array( $args ) ) $args['footer_callback'] = 'my_custom_infinite_footer'; return $args; } add_filter( 'infinite_scroll_settings', 'my_infinite_scroll_settings' ); |
Come si può vedere, in questo caso il Filter che andremo ad aggiungere richiama una funzione personalizzata che ha il compito di ricreare l'intero contenuto del Footer.
Nel caso in cui non vogliate alterare il codice sorgente del vostro template potete ottenere un effetto analogo utilizzando la seguente funzione JavaScript (richiede jQuery) da inserire nel blocco <head> della pagina (Appearance -> Edit > header.php):
|
1 2 3 4 5 6 7 |
<script style="text/javascript"> $(function() { var f = $("div#infinite-footer"); f.find(".blog-info").html("LEFT SIDE HTML CONTENT"); f.find(".blog-credits").html("RIGHT SIDE HTML CONTENT"); }); </script> |
Se invece volete sopprimere del tutto l'Infinite Footer vi basterà aggiungere la seguente linea di codice css (Appearance -> Edit CSS > style.php):
|
1 2 3 |
body div#infinite-footer { display: none; } |
Insomma, ce n'è per tutti i gusti.
