Articoli di stile per categoria sulla pagina principale del blog

Cosa starai creando

I grandi siti basati sulle notizie a volte usano una sorta di stile per differenziare le sezioni del loro sito. Spesso questo assume la forma di colori diversi per ogni sezione.

Un buon esempio è il sito del London Times, che usa un colore diverso per ogni sezione del suo sito. La prima pagina usa questi colori in un banner sopra ogni post, come mostrato nello screenshot:

E mentre navighi all'interno del sito, ogni sezione ha il suo colore:

Utilizzare lo stile per le sezioni del tuo sito come questo può rendere la tua home page più coinvolgente e aiutare i visitatori a trovare contenuti in categorie che leggono regolarmente. In questo tutorial ti mostrerò come scegliere come target gli stili forniti da WordPress per fare proprio questo, modellando i post sulla tua pagina principale del blog per categoria.

Cosa ti serve

Per seguire questo tutorial, avrai bisogno di:

• un'installazione di sviluppo di WordPress
• un editor di codice

Se hai già un tema in cui vuoi utilizzare questa tecnica, lavorerai sul foglio di stile del tuo tema. Creerò un tema figlio del tema Twenty Fifteen e modificherò il foglio di stile nel mio tema figlio.

Il tuo sito sarà probabilmente già popolato di post; in modo che il mio sito abbia alcuni post ho intenzione di scaricare i dati del test tema di WordPress.

Creare il tema

Se stai lavorando con il tuo tema puoi saltare questa sezione, ma dov'è che cosa devi fare per creare un tema figlio di Twenty Fifteen.

Nel tuo sito wp-content / themes cartella, creare una nuova cartella e dargli un nome. Sto chiamando il mio tutsplus-style-messaggi-by-categoria.

All'interno di quella cartella, creare un file CSS vuoto chiamato style.css e aggiungi il seguente:

/ * Nome del tema: Tuts + Style Posts per categoria URI di tema: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Descrizione: Theme per supportare tutorial + tutorial sui post di stile per categoria. Tema infantile per il tema Twenty Fifteen. Autore: Rachel McCollin Autore URI: http://rachelmccollin.co.uk/ Template: twentyfifteen Versione: 1.0 * / @import url ("... /twentyfifteen/style.css");

Questo dice a WordPress tutto ciò che deve sapere per creare un tema figlio e importa il foglio di stile da Twenty Fifteen. Probabilmente vorrai aggiungere il tuo nome e i tuoi dettagli al posto mio, ma questo ti dà un'idea.

Ora attiva il tuo tema.

Importare i dati

Se il tuo sito contiene già post, puoi saltare questa sezione, ma ecco come importare i dati del test dell'unità tema nel tuo sito.

1. Vai alla pagina Test unità tematica e scarica il xml file a cui è collegato.
2. Nel tuo sito, vai a Strumenti> Importa. Clicca sul WordPress collegamento.
3. Clicca sul Scegli il file pulsante e seleziona il file che hai appena scaricato. Clicca il Carica file e importa pulsante.
4. Segui le istruzioni e attendi che WordPress importi i dati.

Identificazione di stili su target

WordPress ha un paio di tag modello che generano classi per le tue pagine e i tuoi post quando vengono visualizzati nel browser. Questi sono:

• body_class (), che aggiungi al corpo tag in un tema header.php file: aggiunge classi al file corpo elemento in base al tipo di pagina visualizzata.
• post_class (), che funziona in modo simile ma viene utilizzato con i messaggi nel ciclo.

Se stai lavorando con il tuo tema e non hai ancora aggiunto questi tag modello, dovrai farlo. Questo tutorial su come lavorare con classi e ID generati da WordPress ti mostra come.

Se stai lavorando con un figlio del tema Twenty Fifteen, questi tag saranno già stati aggiunti al tema Twenty Fifteen stesso, quindi non devi fare nulla.

Se apri la home page del tuo sito in un browser e utilizzi gli strumenti di sviluppo per esaminare l'HTML di output, vedrai che questi tag hanno aggiunto un sacco di classi alla tua pagina.

Ecco cosa ricevo quando visualizzo la home page del mio sito:

Il tag body viene emesso come:

Il casa e blog le classi mi dicono che questa è la home page del sito e che è la pagina principale del blog. Posso usare queste classi per scegliere come target i CSS nella mia home page.

Qualcosa di simile accade ai post:

L'articolo che ho selezionato è taggato come: 

Sono un sacco di classi! Questi ci dicono alcune cose sul post: ID, tipo di post, stato, formato, categoria e tag. È possibile utilizzare tutti questi per indirizzare il tuo stile. Quello che useremo qui è il categoria-markup classe.

Disegnare i post

Ora che ho identificato le classi che ho bisogno di indirizzare, è ora di aggiungere un po 'di stile. Lo manterrò sottile e cambierò semplicemente il colore del testo del titolo di ogni post, che si trova all'interno di un link in a

etichetta.

Apri il foglio di stile del tema e aggiungi questo:

.blog .category-markup .entry-title a: link, .blog .category-markup .entry-title a: visited color: # 6cd2c8;  .blog .category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b; 

Ho usato un'ombra di ciano per il collegamento e visitato stati e una marina per il librarsi e attivo afferma: puoi cambiarle in colori che si adattano al tuo design.

Ora salva il tuo foglio di stile e aggiorna la pagina del tuo blog. Vedrai che i post con la categoria che hai scelto come target ora hanno un'intestazione di colore diversa:

Ora aggiungi altri colori per le altre categorie nel tuo blog:

.blog .category-template-2 .entry-title a: link, .blog .category-template-2 .entry-title a: visited color: # e5572f;  .blog .category-template-2 .entry-title a: hover, .blog .category-template-2 .entry-title a: active color: # 120e5b;  .blog .category-media-2 .entry-title a: link, .blog .category-media-2 .entry-title a: visited color: # 933bbe;  .blog .category-media-2 .entry-title a: hover, .blog .category-media-2 .entry-title a: active color: # 120e5b; 

Ancora una volta, regola i colori per adattarli al tuo marchio. Ora avrai una gamma di colori per i tuoi titoli di post.

Se ti piace, puoi aggiungere dei bordi, sia al posto che così come cambiare il colore dei titoli:

.blog .category-markup .entry-title padding-top: 0.5em; border-top: 2px # 6cd2c8 solido;  .blog .category-template-2 .entry-title padding-top: 0.5em; border-top: 2px # e5572f solido;  .blog .category-media-2 .entry-title padding-top: 0.5em; border-top: 2px # 933bbe solido; 

Ora i miei post hanno un bordo sottile così come il cambio di colore per il titolo del post:

Questo guida i visitatori verso diverse categorie nel mio sito senza essere troppo vistoso.

Sommario

Perché WordPress ci dà il body_class () e post_class () i tag modello, è possibile scegliere come target una pagina specifica sul tuo sito e quindi indirizzare i post in ogni categoria e modificarli in modo diverso.

In questo tutorial hai imparato come identificare le classi da indirizzare e aggiungere lo stile per ogni categoria, per dare ai visitatori alcuni indizi visivi sulla struttura del tuo sito.

Nel prossimo tutorial ti mostrerò come espanderlo e usarlo per modellare le diverse sezioni del tuo sito in modo diverso.