Share
In un precedente tutorial ti ho mostrato come modellare le categorie nel tuo sito in modo diverso, in modo che se il tuo sito ha sezioni per ogni categoria di post, puoi farle sembrare molto diverse.
Ma cosa succede se il tuo sito è basato su pagine statiche? Non è raro vedere siti di grandi dimensioni basati su una struttura gerarchica delle pagine, quindi puoi utilizzare queste tecniche per un sito come questo?
La risposta è si. WordPress ti fornirà alcune classi CSS relative alla struttura della pagina del tuo sito che puoi utilizzare per scegliere come target lo stile e creare sezioni per il tuo sito basato su pagine che sembrano molto diverse.
In questo tutorial lavoreremo con un sito basato su pagine gerarchiche e modelleremo ogni sezione del sito usando un colore diverso per ogni sezione. Vedremo anche una tecnica alternativa basata sull'aggiunta di categorie alle pagine.
Per seguire questo tutorial, avrai bisogno di:
Se hai già un tema su cui vuoi utilizzare questa tecnica, lavorerai sul foglio di stile del tuo tema e sul file delle funzioni. Creerò un tema figlio del tema Twenty Fifteen e modificherò il foglio di stile e il file delle funzioni 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 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-pagine per sezione.
All'interno di quella cartella, creare un file CSS vuoto chiamato style.css e aggiungi il seguente:
Accentsconagua
/ * Nome del tema: Tuts + Pagine stile per tema URI di sezione: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Descrizione: Tema per supportare tuts + tutorial sulle pagine di stile in modo diverso in ogni sezione di un sito. 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.
Se il tuo sito ha già impostato le pagine, puoi saltare questa sezione, ma ecco come importare i dati del test dell'unità tema nel tuo sito.
xml file a cui è collegato.Per impostazione predefinita, WordPress assegnerà un menu di navigazione contenente tutte le categorie del blog al menu principale e imposterà la pagina del blog come pagina iniziale. Poiché stiamo lavorando con pagine statiche, devi modificarlo nell'amministratore di WordPress.
WordPress usa il body_class () tag modello per generare classi in base al tipo di pagina visualizzata. Aggiungi questo tag ai tuoi temi header.php file: aggiunge classi al file corpo elemento in base al tipo di pagina visualizzata.
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 del tuo sito in un browser e utilizzi strumenti di sviluppo per ispezionare l'output HTML, vedrai che il file body_class () il tag del modello ha aggiunto un sacco di classi alla tua pagina. Qui ho una pagina figlio aperta:
Il corpo l'elemento viene generato con un numero di classi:
Questi dicono al browser che siamo su una pagina statica, l'ID della pagina, il fatto che sia un bambino e di che cosa sia figlio, e il suo modello di pagina, tra le altre cose.
Utilizzeremo due di queste classi per indirizzare le pagine in diverse parti del sito: quelle relative all'ID della pagina e alla pagina principale.
Per indirizzare le pagine in una sezione di un sito gerarchico, vengono utilizzate due classi: l'ID pagina per la pagina di livello superiore e l'ID padre pagina per le pagine figlio.
Per prima cosa devi identificare gli ID delle tue pagine di primo livello. A tale scopo, aprirli a turno nelle schermate di amministrazione e controllare l'URL per la loro schermata di modifica. L'URL conterrà il testo "post = X", dove X è l'ID univoco della pagina. Ignora il fatto che dice 'post' non 'pagina' (le pagine sono in realtà un tipo di post) e usa quell'ID per il targeting del tuo stile.
Nel mio sito gli ID delle pagine di livello superiore con figli sono 5 e 17 e le pagine senza figli hanno ID 146, 701, 703, 733 e 735. Verrà utilizzato un colore per ciascuna delle due sezioni gerarchiche e un altro per le pagine senza figli. Se le tue pagine sono tutte in sezioni, potresti usare un colore diverso per ogni sezione.
Apri il foglio di stile del tema e aggiungi il seguente CSS:
.page-id-5 h1, .parent-pageid-5 h1 color: # 6cd2c8; .page-id-17 h1, .parent-pageid-17 h1 color: # e5572f; .page-id-146 h1, .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 color: # 933bbe;
Nota: dovrai modificare l'ID del post e del genitore in linea con il tuo sito e potresti voler cambiare i colori in modo che corrispondano al tuo design.
Ora salva il tuo foglio di stile e dai un'occhiata al tuo sito. Il mio sito utilizza i colori in ogni sezione. Ecco una pagina senza una gerarchia:
E una pagina di livello superiore:
Ecco un figlio di quella pagina di primo livello:
Tuttavia, ci sono un paio di problemi con questo approccio. Il primo è che ho dovuto aggiungere manualmente le classi per ciascuna delle pagine di livello superiore, il che significa che se qualcuno aggiunge altre sezioni o pagine di primo livello al mio sito in futuro, o sposta una delle mie pagine di livello superiore in un altro posto nel gerarchia, non ci sarà alcuno stile per loro. Il secondo è che funziona solo per i bambini diretti delle mie pagine di primo livello. Nessuno dei miei stili è applicato ai nipoti delle pagine.
Ciò significa che se il tuo sito ha una gerarchia multilivello, questo approccio sarà molto difficile da implementare, in quanto dovresti indirizzare i bambini di ciascuno dei bambini delle tue pagine di primo livello. Impossibile se nuove pagine vengono aggiunte regolarmente!
Quindi ho bisogno di un metodo alternativo, che è quello di utilizzare le categorie.
Per impostazione predefinita, WordPress non assegna categorie alle pagine, ma è possibile aggiungere facilmente categorie alle pagine con una funzione. Per fare ciò usi il register_taxonomy_for_object_type () funzione, che è esplorata in questo tutorial sull'assegnazione di categorie agli allegati.
Apri i tuoi temi functions.php file, o se non ne ha già uno, crearne uno. Aggiungi il seguente:
function tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('category', 'page'); add_action ('init', 'tutsplus_add_categories_to_pages');Questo aggiungerà il 'categoria' tassonomia al 'pagina' tipo di oggetto, ovvero puoi assegnare categorie alle pagine.
Tuttavia questo non significa che il body_class () tag genererà la categoria come una delle classi in una pagina con categorie, perché le pagine non hanno categorie per impostazione predefinita.
Puoi cambiarlo scrivendo una funzione e allegandola al body_class gancio del filtro. Di nuovo nel tuo file delle funzioni, aggiungi questo:
function tutsplus_add_categories_to_body_class ($ classes) if (is_page ()) $ categories = get_the_category ($ post-> ID); foreach ($ categorie come $ categoria) $ classes [] = 'categoria-'. $ Categoria-> slug; restituisce $ classes; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Questo crea una funzione chiamata tutsplus_add_categories_to_body_class () con la variabile classi $ come il suo oggetto. Controlla se siamo su una pagina e, in tal caso, crea una variabile chiamata $ categorie che contiene tutte le categorie in cui si trova la pagina. Quindi per ogni categoria aggiunge la categoria slug (preceduta da 'categoria-' per coerenza) al classi $ array e restituisce quelli. Finalmente agganciando la funzione al body_class filtro, aggiunge l'array di output di lumache alle classi emesse dal body_class () tag modello.
Ora prova ad aggiungere alcune categorie alle pagine del tuo sito per dargli delle sezioni. Sto aggiungendo una sezione 1, sezione 2 e sezione 3. Assicurati che ogni pagina sia in una sola sezione.
Ecco come appaiono le mie pagine nelle schermate di amministrazione con le categorie aggiunte:
Il prossimo passo è aggiungere uno stile alle pagine di destinazione in ciascuna sezione. Non cambierò il colore dell'intestazione come ho già fatto usando la gerarchia di pagine. Invece aggiungerò un bordo.
Nel foglio di stile del tema, aggiungi il seguente (o qualcosa di simile usando le lumache per le tue categorie e i colori che stai usando):
.page.category-section-1 h1 border-bottom: 2px solid # 933bbe; imbottitura: 0,5em; .page.category-section-2 h1 border-bottom: 2px solid # 6cd2c8; imbottitura: 0,5em; .page.category-section-3 h1 border-bottom: 2px solid # e5572f; imbottitura: 0,5em;
Ora salva il tuo foglio di stile e controlla le tue pagine.
Ecco una pagina nella Sezione 1:
Se controlli il tuo sito, scoprirai che ogni pagina a cui hai assegnato una delle categorie con uno stile mirato avrà lo stile corretto, indipendentemente da dove si trova nella gerarchia di pagine. Questo ti dà un controllo più preciso sullo stile e la possibilità di assegnare uno stile alle sezioni di un sito con una gerarchia multilivello.
L'altro vantaggio di questo approccio basato su categorie è che puoi utilizzarlo per pagine e post nel tuo sito: quindi se hai già utilizzato lo stile basato su categorie per i post del tuo blog, puoi applicarlo facilmente anche alle pagine statiche.
Se il tuo sito è basato su una struttura gerarchica di pagine, probabilmente avrà sezioni che potresti voler dare qualche identità distinta a.
In questo tutorial hai imparato due modi per indirizzare lo styling alle pagine in diverse sezioni del tuo sito.
Per prima cosa hai usato la gerarchia delle pagine, che ha il vantaggio di lavorare con le impostazioni di WordPress predefinite ma lo svantaggio di non lavorare con una gerarchia più profonda di due livelli.
Finalmente hai imparato come applicare le categorie alle pagine, aggiungere categorie al body_class () tag per le pagine, quindi scrivi CSS per il targeting delle classi che vengono generate da WordPress.
