Ti è mai capitato di imbatterti in un sito che offre uno stile diverso per ogni articolo? Alcuni siti hanno articoli diversi « in avanti Evidenziato mentre altri hanno ciascuna categoria con colori diversi, a volte alcuni possono persino avere una prospettiva molto unica.
Bene, questo è esattamente ciò che tratteremo in questo tutorial. Condivideremo con te i diversi metodi che puoi utilizzare per dare uno stile unico ai tuoi articoli su WordPress.
Quindi cosa useremo? Useremo una funzione chiamata " post_class ". Questa funzione stampa classi differenti sui contenitori degli articoli (tag HTML), solitamente in index.php, single.php e altri file che visualizzano un " ciclo di articoli "(Con riferimento a" WordPress loop ").
osservazione: Questo tutorial richiede che tu abbia familiarità con il design di tema WordPress e padroneggia un po' di HTML/CSS.
Quando apri il tuo file "index.php", o un altro file che ha un ciclo, normalmente vedrai " div "Con le classi" post- {id} ", ma probabilmente anche l'uso della funzione" post_class ".
" >
Aggiunta di questa funzione in un tag " div », Ciascuno dei tuoi articoli avrà le seguenti classi, aggiunte da WordPress. Le seguenti classi sono aggiunte per impostazione predefinita:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (pagine microformat hAtom)
- ID .category
- .category-nome
- .tag-nome
Ecco un esempio di tag con classi.
Quindi se apri il tuo file "style.css" e aggiungi la classe "category-dancing", sarai in grado di personalizzare la visualizzazione degli articoli nella categoria "dancing".
.category-dancing {background: #97c3e1; border: solid 1px #84aac4;}
Quanto sopra darà articoli nella categoria "danza" per avere uno sfondo blu. Puoi continuare aggiungendo un'altra classe per la classe "danza di categoria" ecc. Puoi utilizzare la stessa tecnica per dare un aspetto unico agli articoli che hanno un'etichetta specifica.
Ma per qualcuno che vuole davvero personalizzare l'aspetto del proprio sito, potrebbe aver bisogno di alcuni controlli extra in termini di classi. Bene, puoi specificare le classi che vuoi usare come segue:
Ma come funzionerà su una piattaforma dinamica come WordPress? Diamo un'occhiata ad alcuni esempi su come aggiungere lezioni ai tuoi articoli su WordPress.
Stile sulla base di autori
Spesso noterai che alcuni blog utilizzano uno stile diverso a seconda dell'autore. Per questi blog, è una buona idea dare a ogni articolo uno stile unico secondo gli autori. Quindi in questo esempio daremo a ogni post il proprio stile in base al nome dell'autore. Quindi nel tuo file "index.php" o in un altro file (archivio.php / category.php ecc.), Recupereremo il nome dell'autore dell'articolo:
Il codice precedente recupera il nome "visualizzato" di un autore e assegna la variabile $ author. Ora che abbiamo un valore, possiamo aggiungerlo nel nostro codice post_class in questo modo:
Nota: Non è necessario mantenere la classe 1 e la classe 2. È solo se si desidera aggiungere classi statiche.
Il nostro esempio dovrebbe apparire così:
Il nome sarà diverso su ogni articolo a seconda della variabile del nome pubblico di un autore. È quindi possibile aggiungere lo stile desiderato in questo modo:
.Herve {border: 1px solid # 000;} .Thierry {border: 1px solid # d88b3d;} .Franklin {border: 1px solid # 4781a8;}
Quindi ogni elemento nel ciclo avrà una classe diversa e quindi verrà applicato uno stile diverso.
Stile del numero di commenti
Hai visto siti con articoli popolari in un widget, che si basano principalmente sul numero di commenti. Bene, in questo esempio, ti mostreremo come lo stile dei post varia a seconda del numero di commenti. La prima cosa che dobbiamo fare è ottenere il numero di commenti e associarvi una classe. Per ottenere il numero di commenti, abbiamo bisogno del seguente codice nel ciclo:
approvato; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popular'; }?>
Nel codice sopra, aggiungiamo le classi secondo una scala specifica. Se un articolo è inferiore ai commenti 10, la classe " nuovi Sarà aggiunto. Se l'articolo contiene più di commenti 10 e meno di commenti 20, la classe "ermergingVerrà aggiunto Se l'articolo contiene più di commenti 20, allora la classe 'Popolare' sarà aggiunto. Puoi modificare questa scala in base al tasso medio di recensioni del tuo sito.
Quindi il codice dell'articolo sarà simile a questo:
Assicurati di inserire il codice sopra nel loop. Quindi aggiungerai la variabile $ custom_values alla funzione post_class.
.new {border: solid 1px #FFFF00;} .emerging {border: tratteggiato 1px #FF9933;} .popular {border: tratteggiato 1px #CC0000;}
Questo è di gran lunga il modo migliore per personalizzare lo stile degli articoli su WordPress. Ma a volte, vuoi avere un maggiore controllo. Le classi CSS ti danno la possibilità di modificare l'anteprima, ma non di cambiare la struttura.
Questo è tutto per questo tutorial. Spero che riuscirai a creare stili specifici per articoli su WordPress.
