• Contatto
  • Note Legali
  • Privacy
  • FAQs
  • Downloads
  • Collabora
  • Supporta
  • WordPress: creare una pagina di Archivio dei Post, gradevole e navigabile

    Scritto da Erriko in Wordpress il 8 luglio 2009

    Per chi come me, utilizza diversi loops in home page, il problema di mostrare in una pagina “normale” gli articoli in ordine cronologico così come sono stati scritti si fa sentire.

    In questi mesi ho provato diversi plugin e diverse soluzioni per creare la mia “pagina archivio” ma niente mi soddisfava. Si trattava sempre di elenchi numerati o puntati oppure di cose accattivanti ma poco pratiche come Snazzy Archive.
    Mi sono detto: basta plugin e scriviamo un po’ di codice. Così sono arrivato a quella che, secondo la mia opinione, è la migliore soluzione in assoluto. Una pagina navigabile con tutti gli articoli in ordine cronologico in stile blog “normale” per venire incontro a chi i loop magazine-style così come sono in home page non piacciono.

    Prima di iniziare con la spiegazione di ciò che ho fatto, però, che ne dite di dare un’occhiata al risultato finale andando nella mia pagina Archivio Articoli (raggiungibile anche cliccando su “tutti gli articoli” nella parte bassa della home page)? Bello no? :-)

    Iniziamo

    • Per realizzare il nostro archivio è necessario creare un file template da utilizzare nella pagina che creeremo.
    • Installare il plugin Different Post Per Page per suddividere l’archivio in pagine.
    • Installare il plugin WP Page Numbers per rendere navigabili le pagine dell’archivio.

    Realizziamo il Template

    Se vogliamo che il template risulti coerente con il resto del sito, dobbiamo prelevare dal nostro tema una copia del file page.php così da avere già una base sulla quale inserire il codice senza scervellarci a ricreare la pagina da zero.

    Da page.php cancelliamo tutto ciò che riguarda la visualizzazione del contenuto della pagina. In genere si tratta di un loop unico che riconoscete poichè ha una struttura del genere:

    <div id="quello-che-è">
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    -- codice vario necessario alla visualizzazione della pagina ed al css --
    
    <?php endwhile; endif; ?>

    Inseriamo adesso al posto del codice citato sopra il seguente:

    <!-- Mettiamo un menu' a tendina con le date -->
    <select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
    <option value=""><?php echo attribute_escape(__('Select Month')); ?></option>
    <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>
    
    <!-- menu' a tendina con le categorie -->
    <?php wp_dropdown_categories('orderby=name&show_count=1&show_option_none=Seleziona una categoria'); ?>
    <script type="text/javascript">
      var dropdown = document.getElementById("cat");
      function onCatChange() {
    	if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
    		location.href =
    		"<?php echo get_option('home');?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    	}
        }
        dropdown.onchange = onCatChange;
    </script>
    
    <!--Imposta il numero di articoli da visualizzare in una pagina-->
    <?php
    $offset = "0";
    $no_of_posts = "10"; //Number of posts to display on each page
    if (preg_match('/page/', $_SERVER['REQUEST_URI'])) {
     $uri = explode('/', $_SERVER['REQUEST_URI']);
     foreach ($uri as $key=>$value) {
     if ($value == "") {
     unset($uri[$key]);
     }
     }
     $offset = (array_pop($uri) * 10) - 10; //entrambi questi numeri devono essere uguali a $no_of_posts
    }
    query_posts('posts_per_page=' . $no_of_posts . '&offset=' . $offset); ?>
    
    <!-- Il Loop -->
    <?php if (have_posts()) : ?>
    	<?php while (have_posts()) : the_post(); ?>
    		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    <p><?php the_excerpt(); ?></p>
    	<?php endwhile; ?>
    
    <?php endif; ?>		
    
    <!-- Se abbiamo il plugin wp_page_numbers questo mostrerà la navigazione per pagine -->
    <?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>

    Ovviamente qui non consideriamo la formattazione css che dovrete inserire voi secondo lo stile del vostro tema.
    In genere risolvete racchiudendo in un div particolare il loop (quindi andate a vedere le altre pagine come sono formattate in quanto a css), ma il vostro tema potrebbe essere più complesso (come sopra, occhio alle altre pagine ;-) ).

    Per concludere questa parte di lavoro inseriamo in cima al file:

    <?php
    /*
    Template Name: Archivio
    */
    ?>

    Salviamo ora il file come archivio.php e carichiamolo nella cartella del nostro tema.

    La parte più facile

    Dopo avere installato ed attivato i plugin citati sopra, creiamo una nuova pagina dalla bacheca e inseriamo come titolo, ad esempio Archivio Articoli.
    Lasciamo vuoto il contenuto della pagina e scegliamo dal menu a tendina sulla destra (nella sezione attributi) il template che abbiamo appena creato.

    Non ci resta che cliccare su Pubblica per avere la nostra pagina archivio con gli articoli mostrati in formato titolo+estratto e due comodi menu’ a tendina per spostarsi dall’archivio assoluto a quello del mese o della categoria.

    Spero di essere stato abbastanza chiaro, per qualsiasi dubbio commentate pure ;-)

    Happy Blogging! 8-)

    Articoli Correlati

    WordPress: visualizzare una lista dei post più commentati
    WordPress: Inserire del codice da mostrare alla fine di ogni post
    WordPress trick: articoli correlati con thumbnail
    Usare i tag condizionali in WordPress per personalizzare al massimo il tema

    19 commenti a “WordPress: creare una pagina di Archivio dei Post, gradevole e navigabile”

    1. Ottimo articolo Erriko! Ben scritto e credo di sicuro interesse a molti blogger italiani. Continua così!

    2. Erriko

      Grazie Mick! Detto da te poi è sicuramente un valore aggiunto! Wink

    3. Complimenti,
      posso pubblicare questa guida sul mio sito?
       
      Saluti,
      Carmine Picariell0
      http://www.tutorialgratuiti.com

    4. Erriko

      Questo si che è un commento SEO… Nerd

      Per quanto riguarda il tutorial, sicuramente puoi, ma ricordati di rispettare la licenza CC (che vedi anche a fondo pagina), e cioè devi attribuire la paternità (un link a questo sito esponendo chiaramente il nome dell’autore, Enrico Deleo), non puoi riutilizzarlo per scopi commerciali e non puoi modificare i contenuti (a meno che non lo concordi insieme a me).

      Spero che nessuno dei punti sia un problema, per il resto spero piaccia anche ai tuoi lettori :)

      A presto ;)

    5. Certamente lo farò,
      i mei siti sono sempre stati fonte open source e link di valore per molti amici/colleghi per cui se prendo qualcosa la rimando sul link dell’interessato, non copiando il contenuto perchè verremmo penalizzati entrambi.
      Saluti,
      Carmine Picariello
      http://www.pcinformatica.eu

    6. Gran bella guida, ma ho un problema: ho fatto tutto correttamente, mi visualizza tutto, la selezione della categoria mi va mentre quella del mese quando seleziono  settembre mi dimentica un / rendendo la pagina non visualizzabile es. http://www.miosito.com/2009 –&gt; http://www.miosito.com2009 …qualcuno mi può aiutare?

    7. Controlla il codice, sicuramente hai cancellato qualche stringa dal codice originale e per questo si dimentica lo slash. Con un attenta analisi dovresti risolvere il problema da subito.
       
      Ciao

    8. Ho ricontrollato tutto e ricopiato più volte, ma niente. Non è che cè qualche errore sul codice sopra citato?

    9. Erriko

      Guarda ho controllato e mi sembra tutto ok. Tra l’altro non sei tu che metti lo slash negli url bensì vengono generati automaticamente con il get monthly… Dovremmo avere un WordPress terzo dove provare pari pari il codice e vedere se va… Se qualcun altro ha avuto lo stesso problema, lo dica, così capiamo cosa può essere successo… E’ inutile che ti dica che qui funziona…

    10. ciao
      trovo questo tutorial molto interessante e credo mi possa essere utile per quello che vorrei fare nel mio sito
      ti spiego cosa vorrei fare e spero tu possa darmi qualche consiglio:
      voglio personalizzare l’archivio della categoria università, solo quella, facendo apparire in alto un immagine, una descrizione, una serie di link, e poi lasciare il resto al loop degli articoli…
      questa guida mi puo essere utile per quello che ho in mente?
      grazie e spero nn sia troppo disturbo
      saluti :)

    11. una cosa importante: complimenti x il sito!!! utilissimo e graficamente bellissimo :)
       
      ciao

    12. Erriko

      Innanzitutto grazie per i complimenti! In secondo luogo, puoi benissimo creare un archivio come questo modificando il codice in modo da mostrare soltanto una categoria ed eliminando il codice relativo ai menu a tendina…

    13. Ottimo articolo ;)
       
      A me sinceramente ha dato dei problemini aggiungendo le prime 5 righe con il nome del “tema”..
      ma successivamente aver editato la pagina con quel tema creato..ho eliminato quelle prime 5 righe ed ora funziona tutto perfettamente :D

    14. Ciao.
      Questo articolo era proprio quello che cercavo per fare un archivio sul mio blog.
      Ho fatto tutto e personalizzato alcune cose, però incontro alcuni problemi, dato che col codice non ci acchiappo per niente o quasi.
      Intanto ho un problema di posizionamento in fondo alla pagina per quanto riguarda i widget, ma i problemi fondamentali sono due:
      Perchè l’indice non mi parte dall’ultimo articolo a seguire, ma pare variare casualmente come modifico nel codice il numero di titoli da mostrare per pagina?
      Poi, la barra di navigazione tra le pagine indice, c’è, ma non mi naviga nulla, refresha solo la pagina visibile.
      Puoi vedere quanto dico all’url che ti ho indicato, sotto INDICE ARTICOLI.
      Puoi darmi un aiuto, eventualmente anche in privato se qui annoia?
      Grazie mille e ciao!!!

      • Erriko

        Prova a cambiare struttura dei permalink (avrai vantaggi anche in termini SEO), settando struttura personalizzata e inserendo /%postname%/ probabilmente la pagina che vedi e’ sempre la stessa perche’ non riesce a richiederla con la tua struttura.

        Vedi qui: http://www.erriko.it/archivio-articoli/ e fai caso quando vai ala pagina due come viene mostrato l’url…

    Commenta