TomStardust.com
Web Design Blog: accessibilità, XHTML e CSS
Sei qui: Homepage » wordpress, xhtml » Guida Wordpress 2.7: come personalizzare i post
dic 15 2008
Guida Wordpress 2.7: come personalizzare i post
Con la nuova versione di Wordpress è possibile personalizzare i post con facilità: ecco come modificare il codice del proprio template.
La versione 2.7 di Wordpress è arrivata: la nuova interfaccia di amministrazione fa parlare di sè, ma ci sono altri cambiamenti che possono aiutare gli sviluppatori a personalizzare i temi, senza più bisogno di hack e plugin esterni.
Una delle novità più interessanti riguarda la personalizzazione dei post. Adesso infatti è presente una nuova funzione chiamata post_class() che assegna automaticamente a tutti i post contenuti nel loop alcune classi HTML. Queste classi possono essere utilizzate nel CSS, per modificare l’aspetto delle pagine e degli articoli.
La funzione post_class()
Per sfruttare la nuova funzione è sufficiente individuare nel template il blocco di codice HTML relativo ad ogni post, che si apre con:
<div class="post" id="post-<?php the_ID(); ?>">
A questo punto sostituitelo con:
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
La nuova funzione genera automaticamente la classe post e ne crea di nuove, contenenti tra l’altro informazioni su categorie e tag. Se avete bisogno di aggiungere una classe a quelle di Wordpress, vi basta specificarla con la funzione:
<?php post_class('nome-classe'); ?>
o se avete bisogno di più classi:
<?php post_class('classe1 classe2 altra-classe'); ?>
Infine se volete utilizzare la funzione all’esterno del loop o nelle pagine dei singoli post, potete farlo passando come secondo parametro l’ID del post:
<?php post_class('', $post_id); ?>
Come risultato finale avrete numerose classi a disposizione con cui personalizzare i vostri temi. Questo è l’elenco nel dettaglio:
- .post: classe generica, applicata a tutti gli articoli
- .sticky: classe assegnata ai post in evidenza, che con Wordpress 2.7 possono essere visualizzati prima di tutti gli altri
- .hentry: classe usata nei microformats
- .category-nomecategoria: classe che indica la categoria di appartenenza del post, può essere più di una
- .tag-nometag: classe che indica il tag di appartenenza del post, può essere più di una
Potete già immaginare le possibilità offerte da questa nuova funzione di Wordpress 2.7. Niente che prima non si potesse fare con qualche hack, ma adesso è tutto pronto all’uso e collaudato, all’interno della piattaforma. Ora creare un post in evidenza con un aspetto diverso dagli altri è semplice, così come assegnare un’icona o uno sfondo differente ad ogni articolo, a seconda della categoria.
Nel prossimo post dedicato alla nuova versione di Wordpress descriverò come personalizzare i commenti.
Usi Twitter?
23 Commenti a “ Guida Wordpress 2.7: come personalizzare i post ”
Scrivi un commento
Menu secondario
TomStardust Diary - Il blog personale di Tommaso Baldovino
feed
classifica commentatori
categorie
archivio
risorse esterne
extra
Interessante, non sapevo di questa funzione…WP 2.7 mi sembra un deciso passo avanti, complimenti al team di sviluppo!
Probabilmente non rivoluzionerà la vita a chi masticava pane e WP prima della 2.7, ma la cosa veramente importante è che con queste nuove feature anche un tema diciamo “classico” potrà beneficiare di tutte quelle caratteristiche extra che solitamente si ottenevano con molto codice in più.
Ottimo, ottimo ;)
io non riuscivo più a trovare l’elenco delle categorie da associare ai post.. bisogna abituarsi ai cambiamenti :-)
Aggiungo a quello che scrive Francesco, che questo contribuirà a “standardizzare” il modo in cui verranno “marcati” i contenuti nei temi, arendendo molto più semplice e veloce lo sviluppo, l’assistenze e la “spiegazione” della struttura dei temi.
Ora ogni tema usa classi a sè… credo che con queste nuove funzioni ci sarà molta più uniformità nel codice html… ovviamente massima libertà sull’uso dei css per personalizzare e stravolgere ogni cosa….
Stefano
@Stefano: esatto, questo tra l’altro potrebbe aprire la strada a nuove pratiche, come fornire delle skin per i temi esistenti, visto che alcune classi diventeranno comuni. Non è ancora una standardizzazione completa, ma la strada è quella giusta.
Per chi fa template non cambia moltissimo, ma almeno hanno semplificato le cose e aggiunto la possibilità di variare gli sticky post. Quello che trovo utilissimo, ma solo per un tema personale, o per un tema in cui il proprietario del blog non pasticci troppo con le categorie, è la classe .category-nomecategoria. Rende superfluo il limitato if in_category(‘id’). O no?
In realtà il controllo sulla categoria di appartenenza può ancora tornare utile nella creazione di template, ma senza dubbio la classe alleggerisce molto alcune personalizzazioni :)
Grazie!!!! questo mi serviva proprio!!
E’ possibile inserire script Javascript nei post senza usare plugins?
In linea di massima sì, il codice all’interno dei post viene interpretato (se lo inserisci nella modalità HTML).
Grazie della risposta Tom ma con la versione 2.7 di wordpress l’editor, come dire si mangiava il codice
Se c’èra qualcosa del tipo ….. salvando subito il post anche senza passare in visuale spariva tutto.
Mi è capitato anche con la 2.7.
Ora non è vitale però a volte qualche banner di affiliazione non invasivo da metter sul post che pubblicizza il prodotto o un sito mi farebbe anche comodo. :-)
Grazie.
Hai ragione, l’editor di WP fa strani scherzi, lo dicono anche sul Codex ufficiale. Un’alternativa che potresti considerare è quella di inserire i banner direttamente nel template, ad esempio nel file single.php per le pagine dei singoli post, così ti semplificheresti la vita.
Grazie Tom per la risposta.
Devo fare di necessità virtù perché da come vedi dall’indirizzo del blog il blog cosedicasa è un sotto dominio del domino noiblogger.com che non è di mia proprietà quindi non ho accesso all’installazione del blog. Ho cominciato così ed ora che sono più esperto penso di aprere un blog mio che mi installo io ecc ecc
Grazie comunque.
grazie… provo!
ciao a tutti!
scusate ma ho bisogno di aiuto,
come si fa a far si che il nome di ogni categoria abbia un colore diverso sia nel post che nella sidebar?
grazie.
francesca
@fra: seguendo le istruzioni dell’articolo è possibile avere su ogni post una classe del tipo “categoria-nomecategoria”. Questa può essere sfruttata tramite i fogli di stile per cambiare l’aspetto di ogni post.
Se però vuoi cambiare solo colore al nome delle categorie, non è questa la soluzione, credo che tramite le funzioni standard di Wordpress non sia possibile.
Ciao, io uso un tema particolare che non vorrei cambiare, che invece di riportare la funzione che riporti tu, ne utilizza un’altra. In buona sostanza viene fatta una differenza tra post-left (data, image-field, autore del post) e post-right (titolo e contenuto del post). Ho fatto alcuni tentativi, ma non faccio che pocciare.
Ciò che vorrei fare sarebbe di mettere in evidenza lo sticky-post, che già viene messo in prima posizione rispetto agli altri post, dandogli anche, ad esempio, un colore di sfondo leggermente diverso, o una cornice, in modo da renderlo palesemente evidenziato.
Come potrei fare?
@Arianna: la funzione di cui parlo è in php, quello che dici tu sono le classi html del template, attenzione a non fare confusione.
Ti basta un minimo di php per inserire al posto giusto nel template la funzione post_class(): in questo modo potrai personalizzare anche il post sticky. Nel tuo caso, mi pare che il div su cui aggiungere la funzione si chiami post-container.
Ora ci provo. Se non si è capito, sono autodidatta! :-)
Grazie
Ciao mi chiedevo (e forse è proprio lo scopo di questo tuo post!) è possibile far si che un post pubblicato in più categorie (aventi stili differenti) assuma lo stile proprio della categoria? Se sì fammi sapere come! GRAZIE
PS. Nel sito noti l’errore cambiando la categoria titolo e sfondo restano quelli della categoria precedente!
Qualcuno può rispondermi cortesemente? Thanks!
@Davide: se inserisci la funzione php post_class seguendo l’esempio dell’articolo, avrai ogni post identificato da una classe tipo “category-nomeclasse”. A quel punto puoi cambiare lo stile come preferisci dal CSS.