Indici per un sito WordPress
Posted May 7, 2006
Comments: 33
Inserire un indice in un sito WordPress non è difficile, utilizzando un template di pagina. In questo articolo realizzeremo gli indici di categoria e l’indice complessivo del sito.
Il meccanismo consiste nello scrivere un template di pagina “Category Index” contenente le istruzioni necessarie per stampare l’indice, e quindi creare una pagina vuota “Index page” a cui associare il template “Category Index”. La pagina così creata può essere infine richiamata nella sidebar, o in un menu orizzontale, per visualizzare l’indice di una determinata categoria o l’indice generale del sito.
Passo 1
Partiamo da un tema Kubrick pulito, e scriviamo il template di pagina “Category Index”.
Dobbiamo creare un nuovo file cat-index.php nella cartella del tema, wp-content/themes/default. In questo file scriviamo le seguenti istruzioni, iniziando con il nome che vogliamo dare al template:
<?php
/*
Template Name: Category Index
*/
?>
Inseriamo ora l’istruzione per richiamare l’header del blog, quindi apriamo un div di nome “cat-index” per contenere l’indice. Recuperiamo il valore $catID della categoria di cui stampare l’indice (vedremo più avanti come passare questo parametro al template) e stampiamo il titolo dell’indice:
<?php get_header(); ?>
<div id=”cat-index”>
<?php $catID = $_GET['cat']; ?>
<h2 class=”title” ><?php echo single_cat_title(); ?></h2>
Ora bisogna impostare la query per ottenere dal database l’elenco dei post che ci interessano; specifichiamo la categoria ($catID), il numero di post da elencare (10000, vale a dire tutti), l’ordinamento (per data) e l’ordine (ascending, cioè crescente):
<?php query_posts(‘cat=’ . $catID . ‘ & showposts=10000 & orderby=date & order=ASC’); ?>
Quindi è il momento di aprire il Loop, e per ogni post stampare la data di pubblicazione ed il titolo, seguiti da una riga orizzontale per separare i titoli successivi:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<small>
<?php the_time(‘F j, Y’); ?>
<?php edit_post_link(‘Edit’,'–’,”); ?>
</small>
<h2>
<a href=”<?php the_permalink(); ?>” ><?php the_title(); ?></a>
</h2>
<hr />
Per terminare occorre chiudere il Loop e il div che contiene l’indice, e richiamare il footer del tema.
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>
Chiudiamo infine il file cat-index.php salvando le modifiche inserite.
Passo 2
Adesso creiamo una pagina vuota a cui associare il template appena creato. Con il comando Site Admin, Write, Write Page apriamo la finestra di creazione pagine. Specifichiamo nel campo Page Title il titolo della pagina “Index page”, e nel campo Page Template selezioniamo Category Index, il nome del nostro template. Ora è sufficiente premere il bottone “Create New Page” per creare la nostra pagina indice; il suo nome, Index page, apparirà quindi nella sezione Pages della sidebar.
Se proviamo ad aprire questo nuovo link nella sidebar, otteniamo la visualizzazione dell’indice complessivo di tutti i post del sito. Non è un indice di categoria, e non è neppure molto bello da vedere; occupiamoci per il momento del primo problema, cioè di come ottenere un indice di categoria.
Passo 3
L’indice che vogliamo realizzare deve essere richiamato tramite un opportuno link, che può essere inserito nella sidebar, o in un menu orizzontale, o in una pagina apposita del nostro sito.
Ad esempio per inserirlo nella sidebar apriamo il file sidebar.php nella cartella wp-content/themes/default e, dopo le prime due righe, inseriamo:
<div id=”sidebar”>
<ul>
<!– inizio inserimento, dopo la seconda riga di sidebar.php –>
<li><h2>Site map</h2>
<ul>
<li>
<a href=”<?php bloginfo(‘home’); ?>/?page_id=XY&cat=2″>Index of category 2 </a>
</li>
<li>
<a href=”<?php bloginfo(‘home’); ?>/?page_id=XY&cat=4″>Index of category 4 </a>
</li>
<li>
<a href=”<?php bloginfo(‘home’); ?>/?page_id=XY”>General index </a>
</li>
</ul>
</li>
<!– fine inserimento –>
In page_id=XY al posto di XY dobbiamo inserire il page ID della pagina “Index page”; questo numero può essere letto dal pannello di amministrazione con il comando Site Admin, Manage, Pages.
Salviamo il file sidebar.php, e nella sidebar appariranno i tre nuovi link:
Site map
Index of category 2
Index of category 4
General index
Proviamo a selezionarli, e vedremo che fanno proprio quello che ci aspettiamo. L’estetica lascia ancora a desiderare, ma a questo possiamo rimediare scrivendo alcune semplici regole CSS per il nostro indice.
Passo 4
Per modificare l’aspetto dell’indice, dobbiamo aggiungere alcune regole CSS nel file style.css, che si trova anch’esso nella cartella wp-content/themes/default.
Apriamo il file ed aggiungiamo in fondo le seguenti righe:
#cat-index {
padding: 0 30px;
margin: 0 0 0 10px;
width: 457px;
}
#cat-index h2 {
margin: 0;
padding: 0;
}
#cat-index h2.title {
margin: 0;
padding: 20px 0 30px;
color: red;
}
#cat-index hr {
display: block;
margin: 2px 0;
padding: 0;
}
La prima regola serve a incolonnare correttamente l’indice, la seconda specifica il formato del titolo di un articolo, la terza definisce il formato del titolo dell’indice, e infine la quarta stabilisce il formato della riga orizzontale di separazione.
Conclusioni
Il lavoro è così completato. Naturalmente sono possibili molte variazioni sul tema, sia di tipo estetico, intervenendo sulle regole CSS inserite nel file style.css, sia di tipo sostanziale, intervenendo sulla struttura del template nel file cat-index.php.
Potete trovare i file già modificati secondo le istruzioni di questo articolo in siteindex.zip. Buona sperimentazione!
grazie mille davvero ora provo a realizzarlo
non ho avuto nessun problema grazie mille sei un grande e complimenti per il sito
ciao ciao
Grazie, mi fa piacere che l’articolo ti sia stato utile!
Ciao
mi farebbe molto comodo poter utilizzare questo trick
ho provato più volte, nella sidebar sembra tutto ok, ma al click mi da sempre “errore 404 non trovato”, sia nella index page che nelle pagine di categoria.
potresti aiutarmi?
grazie
Luciano
Ciao Luciano,
controlla che il numero di pagina sia corretto, cioè che in “?page_id=XY” XY sia l’ID della pagina che hai creato. Puoi controllare l’ID delle pagine da Site Admin, Manage, Pages.
PS: se hai scaricato siteindex.zip, devi comunque editare sidebar.php per inserire il numero di pagina corretto. Ciao!
ciao ho seguito la tua guida e tutto funziona
ma ti chiedo : sarebbe possibile creare in qualke modo un feed che comprenda tutti gli articoli della index page??????
Ciao Vincenzo,
se usi un indirizzo del tipo:
http://www.miosito.it/feed/?cat=7
ottieni il feed della categoria 7. Poi dal pannello Opzioni – Opzioni di lettura, puoi impostare il numero di post da inviare, e scegliere se inviare il testo completo di ogni articolo o solo il sommario.
Ciao, ancora una volta i tuoi articoli mi sono molto utili e questo mi ha dato un bello spunto per quello che mi serve, quello che vorrei chiederti però è quanto segue:
io voglio visualizzare in homepage, sulla barra laterale destra un elenco pressapoco simile a quello che ti scrivo di seguito:
categoria1:
–articoloA
–articoloB
–articoloC
categoria2:
–articoloA
–articoloB
–articoloC
In sostanza visualizzare gli ultimi tre articoli di ogni categoria, se ho capito bene l’unica cosa che devo modificare dal howto è sostituire showposts=10000 con showposts=3, è corretto?
Questa forse è una domanda stupida: non funziona solo con il tema Kubrick ma anche con gli altri vero? perchè per il sito che sto sviluppando uso stylevantage.
Grazie mille in anticipo per il tempo che ti faccio perdere.
Ciao Dave,
la tua ipotesi è corretta, basta indicare con showposts il numero di post desiderati. Il codice dovrebbe funzionare con tutti i temi, ho specificato Kubrick solo perchè è quello con cui ho fatto personalmente le prove.
Fammi sapere se il tutto funziona anche nel tuo caso!
Ciao, ok ho provato a seguire il tuo tutorial e funziona correttamente, anche mettendo il 3 al posto del 10000, ma direi che era scontato
.
Il punto ora è: questo howto mi premette di creare una pagina per ogni categoria con all’interno un elenco degli ultimi tre articoli. Io però non voglio una pagina per ogni categoria, ma voglio che i tre articoli siano visualizzati direttamente in home sulla barra laterale destra del mio tema, ho in mente una soluzione che potrebbe andare bene, provo a realizzarla e poi ti faccio sapere, se intanto tu hai qualche suggerimento che faccia al caso mio sai che li ascolto più che volentieri!
Ciao!
Complimenti per l’articolo.
Io volevo proprio creare un indice di tutti i post (senza categorie)
Purtroppo già al primo passaggio (creazione della pagina indice nuda e cruda) mi restituisce un bel errore Parse error: syntax error, unexpected ‘e corrisponde alla riga dove c’è il codice
Io utilizzo WP 2.6.1 funziona anche con questa versione?
Ciao e grazie!!
Ciao Ivo,
si, il codice è vecchiotto ma funziona anche con le versioni correnti. Se per caso hai fatto copia-incolla da questo articolo, può darsi che alcuni caratteri, ad esempio gli apici, non siano quelli giusti; in questo caso, prova a cancellarli e riscriverli.
Ciao,
innanzitutto complimenti per il tutorial… è davvero una cosa eccezionale soprattutto per chi come me non se ne intende molto di php.
Vorrei chiederti una cosa:
è possibile indicare direttamente nel php del template l’ID della categoria senza farlo richiamare con GET?
In questo modo creerei un template diverso per ogni “pagina indice” che posso richiamare direttamente dal menu orizzontale sopra l’header.
Grazie
Carlo
Ciao Carlo,
dovrebbe funzionare tutto, tranne forse l’istruzione
<h2 class=”title” ><?php echo single_cat_title(); ?></h2>
che però puoi sostituire con
<h2 class=”title” >Titolo della categoria </h2>
Ciao, fammi sapere!
Non ho ben capito… Cioè dovrei mettere il nome della categoria al posto di “Titolo della categoria” e il php in automatico mi tira fuori la lista degli articoli?
Credo di non essermi spiegato.
Dunque io pensavo di fare così:
tra i vari articoli che devo inserire nel blog ho dei racconti e delle recensioni.
Io volevo creare una pagina “Racconti” e una pagina “Recensioni”.
Queste come le altre Pagine mi compaiono in automatico sopra l’header… ho gia la pagina “chi siamo”, quella “contatti” e quella “links”…
e compaiono grazie a questa linea di header.php:
quindi non mi serve fare la modifica al file sidebar.php
Però quella modifica – almeno nel tuo tutorial – è fondamentale perchè dice al file cat-index.php qual’è il valore della variabile cat di cui fare l’indice.
Quindi la mia domanda è: senza modificare sidebar.php posso indicare direttamente nel template cat-index.php il valore corrispondete all’ID della categoria di cui voglio l’indice?
credo che sia qualcosa che va modificato in queste linee del file cat-index.php
Però non so cosa.
Spero di essermi chiarito
Perdona la mia imprecisione e grazie infinite per l’aiuto e soprattutto per la tempestività!
A presto
Carlo
PS: dimenticavo, io non sto usando Kubric come tema ma Elegant Grunge… però mi pare che non ci siano differenze. Spero non siate costretti a smentirmi
Grazie ancora.
La risposta era in effetti incompleta, rimedio subito!
Supponendo che la categoria abbia ID 7 e titolo “Categoria del Sette”, ti basta sostituire:
<?php $catID = $_GET[’cat’]; ?>
<h2 class=”title” ><?php echo single_cat_title(); ?></h2>
con:
<?php $catID = 7; ?>
<h2 class=”title” >Categoria del Sette </h2>
Ciao!
GRAZIE INFINITE!
E’ riuscito perfettamente!
Non appena mi confermano il passaggio del dominio al nuovo servizio di hosting ti posto il link così puoi dare un’occhiata.
Grazie Grazie Grazie
Mi spiace continuare a rompere le scatole… ma oltre ai titoli non è che si potrebbe visualizzare anche i riassunti?
Certamente! Prova ad aggiungere
<div class=”entry”>
<?php the_excerpt(); ?>
</div>
subito prima della riga
<hr />
Grandissimo Andrea!!! Ragazzi ho trovato un guru personale!!! ahahah… GRAZIE INFINITE!
ehm… mi rendo conto di iniziare ad essere un pò eccessivo… però voglio tentare ugualmente… è possibile rendere l’elenco come se fosse un elenco puntato in cui i punti sono delle icone? anzi un’icona… o un’immagine?
Ciao Carlo,
avrò bisogno di qualche giorno di tempo per le prove, ti faccio sapere. A presto!
Grazie mille Andrea!
grazie
come sempre eccezionale…
comunque il sito è finalmente online… basta che clicchi il mio nome… i commenti sono benvenuti;)
Per capirci se vai nella sezione racconti vorrei far comparire una specie di icona a fianco ad ogni titolo
Ciao a tutti… di nuovo
Ho un piccolo problema… invece di inserire il riassunto con il tag excerpt vorrei tentare di inserire la prima parte dell’articolo con il tag content… però quando lo vado a sostituire nel codice del template ricaricando la pagina mi mostra il contenuto intero dell’articolo senza interromperlo al <!–more–>
Qualcuno sa se ci sono altre modifiche da fare oltre a cambiare tag?
Ciao Carlo,
a questo punto temo che l’unica possibilità sia di usare ancora il tag excerpt, ma inserendo gli excerpt manualmente nell’apposito campo, nella pagina Edit Post.
Come sai se questo campo è lasciato vuoto WordPress genera automaticamente un excerpt con le prime parole del post, mentre se il campo è riempito WordPress usa come excerpt il suo contenuto.
Ciao a tutti e complimenti all’autore del template. Questo è il codice che ho inserito e mi da errore al passo 2 quando creo la pagina index page e cerco di visualizzarla dalla sidebar.
Parse error: syntax error, unexpected ‘=’ in SITO on line 14
HELP please
<a href=”” >
eccomi ancora!! l’errore (line 14) è su questa stringa qui sotto
Qualcuno puo aiutarmi?
Ciao Luca,
come vedi i tuoi messaggi non vengono visualizzati in modo completo, mandami una e-mail!
Grazie…te la mando domani che ora sto in pausa cena. Grazie ancora per la cortesia e la disponibilità
Luca
nella cartella del tema, wp-content/themes/default
come ci arrivo?
Se hai installato WordPress nella cartella xyz del tuo sito, troverai wp-content nella cartella xyz.
ciao andrea io voglio solamente far apparire l elenco delle sottopagine al passaggio del mouse sulle pagine in alto come avviene su questo sito, quindi menubar 4.9 puo aiutarmi???
Ciao Antonio,
si, ti basta usare Menubar con il template Suckerfish, come su questo sito.