WordPress » Tutorials » Sviluppo » Internet » CSS

Wordpress: personalizzare la navigazione tra i post

lunedì 9 febbraio, 2009

Wordpress mette a disposizione numerose funzioni per spostarsi tra i vari post e pagine in avanti ed indietro. Queste sono usate all'interno dei temi, spesso in modo del tutto interscambiabile, anche se contengono alcune differenze. Tutto questo, a dire il vero, creo non poca confusione al momento della scelta della funzione da usare. Eccone alcune note:

  • adjacent_post_link()
  • next_posts_link()
  • posts_nav_link()

Con la release 2.7 di Wordpress, poi, sono stati aggiunge altre funzioni (o rese pubbliche) usate in realtà all'interno di quelle già note. Ad esempio la nuova get_next_posts_link() è usata da next_posts_link(), disponibile dalla release 0.71. Ovviamente la get_previous_posts_link() viene chiamata da previous_posts_link().

Per ragioni storiche e di compatibilità con i "vecchi" template, analizzando il codice sorgente di Wordpress ci si rende conto che alcune funzioni sono davvero ridondanti. Ad esempio posts_nav_link() chiama al suo interno previous_posts_link() e next_posts_link(). Tuttavia il codice (nella release 2.7 di Wordpress) di next_posts_link() è:

PLAIN TEXT
PHP:
  1. /**
  2.  * Display the next posts pages link.
  3.  *
  4.  * @since 0.71
  5.  * @uses get_next_posts_link()
  6.  *
  7.  * @param string $label Content for link text.
  8.  * @param int $max_page Optional. Max pages.
  9.  */
  10. function next_posts_link( $label = 'Next Page »', $max_page = 0 ) {
  11.     echo get_next_posts_link( $label, $max_page );
  12. }

Personalizzazione

Lasciando da parte le questioni di codice sorgente a basso livello, torniamo ad affrontare l'argomento di questo post, cioè di come modificare facilmente il layout classico dell'avanti e indietro. La navigazione avanti ed indietro può essere posizionata dove si vuole, ad esempio nel file archive.php si può usare:

PLAIN TEXT
HTML:
  1. <div class="navigation">
  2.  <div class="prev alignleft"><?php next_posts_link('<span>Precedente</span>') ?></div>
  3.  <div class="next alignright"><?php previous_posts_link('<span>Successivo</span>') ?></div>

Dato che ci stiamo muovendo in un archivio, che è limitato rispetto all'intera possibilità di post (perchè filtra per data, argomento, tag, etc...) usiamo next_posts_link() e previous_posts_link(). Impostando poi le label in modo opportuno, come nell'esempio, possiamo operare le modifiche di layout tramite il solo foglio di stile, lasciando un output HTML valido. Ad esempio è possibile "nascondere" le label e sostiturle con un'immagine usando:

PLAIN TEXT
CSS:
  1. .alignright{float:right}
  2. .alignleft{float:left}
  3. /* personalizzazione della navigazione *>
  4. div.navigation {display:block;height:38px;padding:16px 0 16px 16px;width:678px}
  5. div.navigation div.prev a {display:block;width:38px;height:38px;background:url(images/prev_image.png) no-repeat}
  6. div.navigation div.next a {display:block;width:38px;height:38px;background:url(images/next_image.png) no-repeat}
  7. div.navigation div.prev a span, div.navigation div.next a span{display:none}

L'ultima riga è quella che permette di nascondere i testi, ed è per questo che sono stati inseriti degli span nella chiamata alla funzione next_posts_link() e previous_posts_link()

Per la navigazione nel file single.php, spesso si usa:

PLAIN TEXT
HTML:
  1. <div class="navigation">
  2.  <div class="prev alignleft"><?php adjacent_post_link('%link', '<span>Precedente</span>', false, '', true);  ?></div>
  3.  <div class="next alignright"><?php adjacent_post_link('%link', '<span>Successivo</span>', false, '', false);  ?></div>

Anche in questo caso il codice CSS è sempre lo stesso.

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , , , , , ,

5 commenti a: “Wordpress: personalizzare la navigazione tra i post”

  1. getAvatar 1.0
    09 feb, 2009 ziosteve:

    Ottimo articolo... sto iniziando a seguire il tuo blog e devo dire che offri dei contenuti veramente molto interessanti. Complimenti :-) !

    Rispondi Quota
  2. getAvatar 1.0
    09 feb, 2009 Giovambattista Fazioli:

    @ziosteve: grazie! :)

    Rispondi Quota
  3. getAvatar 1.0
    10 feb, 2009 liliansi:

    Ti ringrazio molto per l'articolo...utilissimo davvero. Metterò alla prova al più presto i tuoi consigli. Ciao!

    Rispondi Quota
  4. getAvatar 1.0
    25 feb, 2009 Luce nera:

    sono alle prime armi
    spero di migliorare
    e di imparare passo passo

    Rispondi Quota
  5. getAvatar 1.0
    31 mar, 2009 rinaldo:

    ciao, ho inserito i link di navigazione in una pagina wp però non funzionano. quando clicco su uno dei due link mi visualizza sempre gli stessi articoli visualizzati nella pagina "principale".
    cosa sbaglio?

    grazie dell'aiuto

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL