Cosa starai creando

Nel precedente tutorial ti ho mostrato come modellare i post sulla pagina del tuo blog principale in base alla loro categoria, creando codice colore per categoria.

Un sacco di siti che utilizzano questa tecnica lo fanno ulteriormente aggiungendo uno stile diverso a ciascuna sezione del loro sito, in un modo che si coordina con lo stile sulla pagina principale del blog o sulla home page. Puoi semplicemente utilizzare una semplice combinazione di colori o aggiungere uno stile completamente diverso a ciascuna sezione, magari con un logo o un marchio diverso per le diverse parti della tua organizzazione o persino un layout diverso.

Un esempio è il sito web del London Times, che utilizza 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:

In questo tutorial lavoreremo con lo stile aggiunto alla home page nel tutorial precedente e aggiungiamo uno stile simile ad ogni archivio di categorie. Modificheremo il colore dei titoli dei post e il titolo dell'archivio stesso.

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 su cui vuoi usare 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.

Se hai già seguito il tutorial precedente e stai aggiungendo lo stile basato su categorie anche alla tua pagina del blog principale, puoi utilizzare il tema di quel tutorial come punto di partenza: questo è ciò che farò. In alternativa puoi lavorare con il tuo tema esistente o creare un tema bambino fresco di Twenty Fifteen.

Creare il tema

Se stai lavorando con il tuo tema o quello del tutorial precedente puoi saltare questa sezione, ma ecco 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 una delle pagine di categoria del tuo sito in un browser e utilizzi strumenti di sviluppo per ispezionare l'HTML di output, vedrai che il file body_class () il tag del modello ha aggiunto un sacco di classi alla tua pagina.

Qui il corpo tag ha classi che ci dicono che tipo di pagina è:

Queste classi ci dicono che siamo in una pagina di archivio delle categorie per la categoria dei markup, tra le altre cose. La classe che andremo a bersaglio è la categoria-markup classe.

Styling dei titoli di posta nella lista degli archivi

Inizieremo aggiungendo un colore ai titoli dei post in base alla loro categoria. Nel foglio di stile del tuo tema, aggiungi questo:

/ * postare titoli nelle pagine di archivio * / .archive.category-markup .entry-title a: link, .blog .category-markup .entry-title a: visited color: # 6cd2c8;  .archive.category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b;  .archive.category-template-2 .entry-title a: link, .archive.category-template-2 .entry-title a: visited color: # e5572f;  .archive.category-template-2 .entry-title a: hover, .archive.category-template-2 .entry-title a: active color: # 120e5b;  .archive.category-media-2 .entry-title a: link, .archive.category-media-2 .entry-title a: visited color: # 933bbe;  .archive.category-media-2 .entry-title a: hover, .archive.category-media-2 .entry-title a: active color: # 120e5b; 

Potresti voler cambiare i colori in modo che funzionino con il tuo design.

Ora salva il tuo foglio di stile e apri una pagina di categoria nel tuo browser. La mia pagina di categoria Markup ora ha i titoli dei post colorati:

E il mio archivio Media ha titoli di post di un colore diverso:

Nota che negli screenshot c'è un post che appare in entrambi gli archivi, perché è in molte categorie. Questo è il motivo per cui è importante scegliere come target la classe per la categoria nel tag body della pagina dell'archivio e non solo le classi di categoria target per i post nel ciclo.

Ora aggiungiamo anche un bordo. Aggiungi questo al tuo foglio di stile:

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

Questo aggiunge un po 'di padding sopra i titoli dei post e un bordo dello stesso colore del testo. Ecco come appare nella pagina dell'archivio dei modelli:

Disegnare il titolo dell'archivio

Oltre a modellare i singoli elenchi dei post, voglio aggiungere il mio colore al titolo dell'archivio stesso.

Innanzitutto identifico gli elementi e le classi da indirizzare, utilizzando gli strumenti di sviluppo:

Il titolo dell'archivio viene emesso come segue:

 
Categoria: modello
 
 
Messaggi con test relativi ai modelli
 
 

Quindi dovremo mirare al intestazione di pagina e titolo della pagina classi, così come le classi sul corpo tag per l'archivio.

Nel tuo foglio di stile, aggiungi quanto segue:

.archive.category-markup .page-header .page-title color: # 6cd2c8;  .archive.category-template-2 .page-header .page-title color: # e5572f;  .archive.category-media-2 .page-header .page-title color: # 933bbe; 

Questo aggiunge il colore al titolo dell'archivio:

Ora cambiamo il colore del bordo per abbinarlo. Aggiungi questo al tuo foglio di stile:

.archive.category-markup .page-header border-left: 7px solid # 6cd2c8;  .archive.category-template-2 .page-header border-left: 7px solid # e5572f;  .archive.category-media-2 .page-header border-left: 7px solid # 933bbe; 

Questo cambia il colore del bordo in modo che corrisponda:

Sommario

L'utilizzo delle classi generate da WordPress per il targeting di pagine di archivio di categorie e il loro stile comporta l'identificazione delle classi di output e la scrittura di CSS per il loro targeting.

In questo tutorial hai imparato come eseguire questa operazione per creare sezioni codificate a colori del tuo sito per categoria.

Potresti continuare così, ad esempio:

• utilizzando i colori della sezione per altri elementi della pagina come il titolo del sito e il menu di navigazione
• aggiungere sfondi in colori di sezione, ad esempio sul piè di pagina
• utilizzando diverse immagini di sfondo per ogni sezione in luoghi chiave
• cambiando il layout per diverse sezioni del sito
  

Ci sono molte possibilità e se porti questa tecnica al limite più lontano puoi creare diverse sezioni del tuo sito che sembrano completamente diverse le une dalle altre, dando l'impressione di avere siti completamente separati.