WordPress: aggiungere dei pulsanti di navigazione tra un articolo e l’altro (pulsanti inclusi)

Nella realizzazione del mio tema personale ci sto prendendo davvero gusto, come vedete sono state aggiunte ancora altre novit come la barra a sinistra ritoccata e le nuove icone “sociali”, anche il form di registrazione alla newsletter molto pi gradevole secondo me.

Ma parliamo della vera novit ovvero quei piccoli pulsanti sotto il titolo di ogni articolo:
bt down[1] Successivo e bt up[1] Precedente.
Che ne pensate non sono graziosi? Permettono di saltare direttamente alla notizia successiva sulla pagina senza dover per forza scorrerla tutta.

Vediamo velocemente come implementare questa piccola soluzione nel vostro template preferito per [tag]WordPress[/tag], naturalmente questa modifica possibile soltanto a coloro che hanno accesso ai file dei propri temi grafici.

Il file in questione index.php, la modifica pu essere portata allo stesso modo anche su archive.php e su tutti gli altri file che mostrano una lista di post in un loop.

Ci basta trovare l’inizio del nostro loop sul file index.php e aggiungere qualche variabile e un paio di collegamenti, oggi mi sento buono pertanto vi posto direttamente le righe da sostituire, mi raccomando lavoro sempre con il template default di WordPress ma molto facile fare altrettanto con le altre template basta soltanto trovare il loop e la posizione in cui inserire i link con i pulsanti (vedi a fine post per alcuni pulsanti da scaricare).

Sostituisci queste righe

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('j F Y') ?> <!-- di <?php the_author() ?> --></small>

Con queste
<?php if (have_posts()) : ?>

<?php $postCounter = 1; $postStopCounter = get_option('posts_per_page'); ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2 id="post-<?php echo $postCounter; ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('j F Y') ?> <!-- di <?php the_author() ?> -->
<?php
if ($postCounter!=$postStopCounter)
echo '&nbsp; <a href="#post-'.($postCounter+1).'" title="Vai al post successivo">
<img src="http://www.tuosito.com/img/bt_down.png" alt="Next Post" />Successivo</a> ';
if ($postCounter!=1)
echo '&nbsp;<a href="#post-'.($postCounter-1).'" title="Vai al post precedente">
<img src="http://www.tuosito.com/img/bt_up.png" alt="Prev Post" />Precedente</a>';
$postCounter++;
?>
</small>

Alcune icone da poter utilizzare come pulsanti:
bt down[1] bt up[1] back forward
, bt down bt up bt left bt right, bt rw bt fw bt skip rw bt skip fw, arrow_down.gif arrow_up.gif
Grazie a Paolo di Flashmotus per le ultime due icone 😉
Potete scaricare moltre altre icone da questo sito http://fasticon.com/freeware/

Tag: , ,

25 Commenti a “WordPress: aggiungere dei pulsanti di navigazione tra un articolo e l’altro (pulsanti inclusi)”

  1. Mavero ha detto:

    Interessante! Bravo.

  2. luigibio ha detto:

    la cosa molto carina, stavo pensando che quasi quasi la implemento anche io, per preferirei inserirlo nella lettura dell’articolo singolo, funzionerebbe uguale semplicemente togliendo il # o sono necessarie modifiche?
    saluti luigibio

  3. Danilo ha detto:

    Ottimo … la terr in considerazione per il mio prossimo tema.
    Sar il Blog Oh Blog v2.0
    http://www.blogohblog.com

  4. eyeonweb ha detto:

    Ti stai dando da fare con la personalizzazione 😉 ottimi spunti, complimenti! 🙂

  5. annarita ha detto:

    Bravo! Molto carine le icone sociali e veramente utili i pulsanti “precedente” , “successivo”.

    Comode le stringhe di codice. Le terr presenti quando avr finalmente un po’ di tempo da dedicare alla personalizzazione del mio wordpress.

    Per il momento, prendo atto…e, naturalmente, grazie!

  6. TheKaneB ha detto:

    Ottimo Raffaele! l’ho trovata subito un’idea graziosa gi quando l’ho vista in opera 1-2 giorni fa 😉
    Bravo!

  7. Alex2000 ha detto:

    cavolo ci stavo giusto lavorando in questi giorni… ma il tuo lavoro pi migliore del mio. Per cui ne attingo e lo implemento sul mio blog. Bravo, grazie.

  8. Daniele Salamina ha detto:

    Interessante. Ti leggo e ti commento anche dalla spiaggia e con il cellulare 🙂

  9. Traffyk ha detto:

    @ Tutti
    Grazie mille a tutti voi per il prezioso contributo! 😀

    @Luigibio
    La procedura leggermente diversa ma totalmente semplificata, basta mettere nel file single.php le seguenti stringhe:
    <?php next_post_link(); ?>
    <?php prev_post_link(); ?>

    Se nel caso nel tuo tema ci sono invece richiami alle funzioni next_post() e prev_post() rimuovili perch sono stati deprecati e sostituiti da quelli sopra. Per maggiori informazioni per la formattazione e inclusione dei link per categoria ti rimando alla pagina di Codex:
    http://codex.wordpress.org/Template_Tags/next_post_link

Lascia un Commento