Informazioni sull’autore

Nick Schäferhoff è un imprenditore, marketer online e blogger professionista tedesco. Quando non costruisce siti web, crea contenuti o aiuta i suoi clienti … Ulteriori informazioni su Nick↬

Mi piace pensare a WordPress come alla droga di accesso dello sviluppo web. Molte persone che iniziano a utilizzare la piattaforma stanno inizialmente semplicemente cercando un modo comodo (e gratuito) per creare un semplice sito web, spesso con l’aiuto di una pagina WordPress plug-in builder. Un po ‘come “Lo proverò solo una volta.”

Tuttavia, una buona fetta di utenti non si ferma qui. Invece, vengono agganciati. Trova altre idee. Sperimentare. Prova nuovi plugin. Scopri Firebug. Boom. Presto non si torna indietro. Sembra la tua storia? Come utente di WordPress è naturale desiderare un controllo sempre maggiore sul tuo sito web. Per desiderare un design personalizzato, funzionalità personalizzate, personalizzare tutto.

Ulteriori letture su SmashingMag:

• Come creare e personalizzare un tema figlio di WordPress
• Costruire Una pagina di archivio personalizzata per WordPress
• Personalizzazione di archivi WordPress

Fortunatamente, WordPress è stato creato proprio per questo. La sua struttura flessibile e l’architettura a compartimenti consentono a chiunque di modificare praticamente qualsiasi cosa sul proprio sito.

Tra gli strumenti più importanti nella ricerca del controllo completo del sito web ci sono i modelli di pagina. Consentono agli utenti di alterare notevolmente il design e la funzionalità del loro sito web. Vuoi un’intestazione personalizzata per la tua prima pagina? Fatto. Una barra laterale aggiuntiva solo per la tua pagina blog? Nessun problema. Una pagina di errore 404 unica? Essere. Mio. Ospite.

Se vuoi sapere come i modelli di pagina di WordPress possono aiutarti a raggiungere questo obiettivo, continua a leggere. Ma prima, alcune informazioni di base.

File di modello in WordPress

Di cosa stiamo parlando quando parliamo di modelli nel contesto di WordPress? La versione breve è che i modelli sono file che dicono a WordPress come visualizzare diversi tipi di contenuto.

La versione leggermente più lunga: ogni volta che qualcuno invia una richiesta per visualizzare parte del tuo sito web, la piattaforma WordPress capirà quale contenuto vogliono vedere e come dovrebbe essere visualizzata quella parte specifica del tuo sito web.

Per quest’ultimo, WordPress tenterà di utilizzare il file modello più appropriato trovato all’interno del tuo tema. Quale viene deciso sulla base di un ordine stabilito, la gerarchia dei modelli di WordPress. Puoi vedere come appare nello screenshot qui sotto o in questa versione interattiva.

La gerarchia dei modelli è un elenco di file modello con cui WordPress ha familiarità che vengono classificati per determinare quali ha la precedenza su un altro.

Puoi pensarlo come un albero decisionale. Quando WordPress cerca di decidere come visualizzare una determinata pagina, scorre lungo la gerarchia del modello fino a quando non trova il primo file modello che si adatta alla pagina richiesta. Ad esempio, se qualcuno ha tentato di accedere all’indirizzo http://yoursite.com/category/news, WordPress cercherebbe il file modello corretto in questo ordine:

In fondo alla gerarchia c’è index .php. Verrà utilizzato per visualizzare qualsiasi contenuto che non abbia un file modello più specifico allegato al suo nome. Se un file modello si trova più in alto nella gerarchia, WordPress utilizzerà automaticamente quel file per visualizzare il contenuto in questione.

Modelli di pagina e loro utilizzo

Per le pagine, il modello standard di solito è il nome appropriato page.php. A meno che non sia disponibile un file modello più specifico (come archive.php per una pagina di archivio), WordPress utilizzerà page.php per rendere il contenuto di tutte le pagine del tuo sito web.

Tuttavia, in molti casi potrebbe essere necessario modificare il design, l’aspetto o la funzionalità di singole parti del tuo sito web. È qui che entrano in gioco i modelli di pagina.I modelli di pagina personalizzati ti consentono di personalizzare qualsiasi parte del tuo sito WordPress senza influire sul resto.

Potresti averlo già visto al lavoro. Ad esempio, molti temi WordPress oggi hanno un’opzione per cambiare la tua pagina a larghezza intera, aggiungere una seconda barra laterale o cambiare la posizione della barra laterale. Se questo è il tuo caso, probabilmente è stato fatto tramite file modello. Ci sono diversi modi per farlo e li esamineremo in seguito.

Prima, tuttavia, una parola di cautela: poiché lavorare con i modelli implica la modifica e la modifica dei file nel tema attivo, è sempre una buona idea di andare con un tema figlio quando si effettuano questi tipi di personalizzazioni. In questo modo non corri il pericolo che le tue modifiche vengano sovrascritte quando il tema principale viene aggiornato.

Come personalizzare qualsiasi pagina in WordPress

Ci sono tre modi di base per utilizzare personalizzato modelli di pagina in WordPress: aggiunta di istruzioni condizionali a un modello esistente; creazione di modelli di pagina specifici che si collocano più in alto nella gerarchia; e assegnando direttamente modelli a pagine specifiche. Daremo uno sguardo a ciascuno di questi a turno.

Utilizzo di tag condizionali nei modelli predefiniti

Un modo semplice per apportare modifiche specifiche alla pagina è aggiungere i numerosi tag condizionali di WordPress a un modello già in uso. Come suggerisce il nome, questi tag vengono utilizzati per creare funzioni che vengono eseguite solo se viene soddisfatta una determinata condizione. Nel contesto dei modelli di pagina, questo sarebbe qualcosa sulla linea di “Esegui solo l’azione X sulla pagina Y”.

In genere, dovresti aggiungere tag condizionali al file page.php del tuo tema (a meno che, di ovviamente, desideri personalizzare una parte diversa del tuo sito web). Ti consentono di apportare modifiche limitatamente alla home page, alla prima pagina, alla pagina del blog o a qualsiasi altra pagina del tuo sito.

Eccone alcune utilizzate di frequente tag condizionali:

Ad esempio, quando aggiunto al tuo page.php al posto del tag get_header();, il codice seguente caricherà un file di intestazione personalizzato denominato header -shop.php durante la visualizzazione della pagina http://yoursite.com/products.

Un buon caso d’uso per questo sarebbe se tu hai un negozio sul tuo sito e devi visualizzare un’immagine di intestazione diversa o un menu personalizzato sulla pagina del negozio. Potresti quindi aggiungere queste personalizzazioni in header-shop.php e verrà visualizzato nella posizione appropriata.

Tuttavia, i tag condizionali non sono li puntato su una pagina. Puoi fare diverse affermazioni di seguito in questo modo:

In questo secondo esempio, due condizioni cambieranno il comportamento di diverse pagine del tuo sito. Oltre a caricare il suddetto file di intestazione specifico del negozio, ora carica anche un header-about.php su una pagina con ID 42. Per tutte le altre pagine si applica il file di intestazione standard.

Per saperne di più sull’uso dei tag condizionali, le seguenti risorse sono altamente consigliate:

• WordPress Codex: tag condizionali
• ThemeLab: la guida definitiva ai tag condizionali di WordPress

Creazione di file specifici per pagina nella gerarchia di WordPress

I tag condizionali sono un ottimo modo per introdurre modifiche minori ai modelli di pagina. Naturalmente, puoi anche creare personalizzazioni più ampie utilizzando molte istruzioni condizionali una dopo l’altra. Tuttavia, trovo che questa sia una soluzione molto complicata e opterei invece per file modello designati.

Un modo per farlo è sfruttare la gerarchia dei modelli di WordPress. Come abbiamo visto, la gerarchia attraverserà un elenco di possibili file modello e sceglierà il primo che trova che si adatta. Per le pagine, la gerarchia è simile a questa:

• Modello di pagina personalizzato
• page- {slug} .php
• page- {id} .php
• page.php
• index.php

In primo luogo ci sono modelli di pagina personalizzati che sono stati assegnati direttamente a una determinata pagina. Se uno di questi esiste, WordPress lo utilizzerà indipendentemente dagli altri file modello presenti. Parleremo di più sui modelli di pagina personalizzati tra un po ‘.

Dopodiché, WordPress cercherà un modello di pagina che includa lo slug della pagina in questione. Ad esempio, se includi un file denominato page-about.php nei file del tema, WordPress utilizzerà questo file per visualizzare la tua pagina “Informazioni” o qualsiasi pagina si trovi in http://www.yoursite.com/about .

In alternativa, puoi ottenere lo stesso risultato scegliendo come target l’ID della tua pagina. Quindi, se quella stessa pagina ha un ID di 5, WordPress utilizzerà il file modello page-5.php prima di page.php se esiste; cioè, solo se non è disponibile un modello di pagina di livello più alto.

(A proposito, puoi scoprire l’ID di ogni pagina passando con il mouse sopra il suo titolo sotto “Tutte le pagine” nella parte posteriore di WordPress -end. L’ID verrà visualizzato nel link visualizzato dal tuo browser.)

Assegnazione di modelli di pagina personalizzati

Oltre a fornire modelli in una forma che WordPress utilizzerà automaticamente, è anche possibile assegnare manualmente modelli personalizzati a pagine specifiche.Come puoi vedere dalla gerarchia dei modelli, questi trionferanno su qualsiasi altro file modello presente nella cartella del tema.

Proprio come la creazione di modelli specifici di pagina per la gerarchia di WordPress, ciò richiede di fornire un file modello e quindi collegalo alla pagina per cui desideri utilizzarlo. Quest’ultimo può essere fatto in due modi diversi che potresti già conoscere. Nel caso in cui non lo siate, ecco come farlo.

1. Assegnazione di modelli di pagina personalizzati dall’editor di WordPress

Nell’editor di WordPress, troverai un campo di opzioni chiamato “Attributi di pagina” con un menu a discesa sotto “Modello”.

Facendo clic su di esso otterrai un elenco di modelli di pagina disponibili sul tuo sito Web WordPress. Scegli quello che desideri, salva o aggiorna la tua pagina e il gioco è fatto.

2. Impostazione di un modello personalizzato tramite Modifica rapida

Lo stesso può essere ottenuto senza entrare nell’editor di WordPress. Vai a “Tutte le pagine” e passa il mouse su qualsiasi elemento nell’elenco. Verrà visualizzato un menu che include l’elemento “Modifica rapida”.

Fare clic su di esso per modificare le impostazioni della pagina direttamente dall’elenco. Vedrai lo stesso menu a discesa per scegliere un modello di pagina diverso. Scegline uno, aggiorna la pagina e il gioco è fatto.

Non è poi così difficile, vero? Ma cosa succede se non hai ancora un modello di pagina personalizzato? Come lo crei in modo che il tuo sito web appaia esattamente come lo desideri? Non preoccuparti, è di questo che tratta la parte successiva.

Una guida passo passo alla creazione di modelli di pagina personalizzati

Mettere insieme file modello personalizzati per le tue pagine non è così difficile, ma qui ci sono alcuni dettagli a cui devi prestare attenzione. Pertanto, esaminiamo il processo bit per bit.

1. Trova il modello predefinito

Un buon modo è iniziare copiando il modello attualmente utilizzato dalla pagina che desideri modificare. È più facile modificare il codice esistente che scrivere un’intera pagina da zero. Nella maggior parte dei casi questo sarà il file page.php.

(Se non sai come scoprire quale file modello è utilizzato nella pagina che desideri modificare, il plugin What The File lo farà si rivelerà utile.)

Userò il tema Twenty Twelve per dimostrazione. Ecco come appare il suo modello di pagina standard:

Come puoi vedere, niente di speciale qui: le solite chiamate per l’intestazione e il piè di pagina e il ciclo nel mezzo. La pagina in questione ha questo aspetto:

2. Copia e rinomina il file modello

Dopo aver identificato il file modello predefinito, è il momento di crearne una copia. Utilizzeremo il file duplicato per apportare le modifiche desiderate alla nostra pagina. Per questo dovremo anche rinominarlo. Non è possibile avere due file con lo stesso nome, è solo una confusione per tutti.

Sei libero di dare al file il nome che preferisci purché non inizi con nessuno dei nomi di file del tema riservati . Quindi non chiamarlo page-something.php o qualsiasi altra cosa che possa far pensare a WordPress che sia un file modello dedicato.

Ha senso usare un nome che identifichi facilmente ciò che viene utilizzato questo file modello per, come my-custom-template.php. Nel mio caso utilizzerò custom-full-width.php.

3. Personalizza l’intestazione del file del modello

Quindi dobbiamo dire a WordPress che questo nuovo file è un modello di pagina personalizzato. Per questo, dovremo regolare l’intestazione del file nel modo seguente:

Il nome sotto “Nome modello” è quello che verrà visualizzato sotto “Pagina Attributi ‘nell’editor di WordPress. Assicurati di adattarlo al nome del tuo modello.

4. Personalizza il codice

Ora è il momento di passare alla carne e alle patate del modello di pagina: il codice. Nel mio esempio, desidero semplicemente rimuovere la barra laterale dalla mia pagina demo.

Questo è relativamente facile, poiché tutto ciò che devo fare è rimuovere <?php get_sidebar(); ?> dal mio modello di pagina poiché questo è ciò che chiama la barra laterale. Di conseguenza, il mio modello personalizzato finisce per avere questo aspetto:

5. Carica il modello di pagina

Dopo aver salvato il mio file personalizzato, è ora il momento di caricarlo sul mio sito web. I modelli di pagina personalizzati possono essere salvati in diversi punti per essere riconosciuti da WordPress:

• La cartella del tema (figlio) attivo
• La cartella del tema principale principale
• Una sottocartella all’interno di una di queste

Personalmente mi piace creare una cartella denominata page_templates nel mio child theme e inserire lì eventuali modelli personalizzati.Trovo più facile mantenere una panoramica dei miei file e delle mie personalizzazioni.

6. Attiva il modello

Come ultimo passaggio, devi attivare il modello di pagina. Come accennato in precedenza, ciò viene eseguito in Attributi di pagina → Modelli nell’editor di WordPress. Salva, guarda la pagina e voilà! Ecco la mia pagina personalizzata senza barra laterale:

Non è così difficile, vero? Non ti preoccupare, capirai presto. Per darti un’idea migliore di cosa utilizzare per questi modelli di pagina, illustrerò altri casi d’uso (incluso il codice) per il resto dell’articolo.

Cinque modi diversi per utilizzare i modelli di pagina

Come già accennato, i modelli di pagina possono essere utilizzati per molti scopi diversi. Puoi personalizzare praticamente qualsiasi cosa su qualsiasi pagina con il loro aiuto. Solo la tua immaginazione (e le capacità di programmazione) ti ostacolano.

1. Modello di pagina a larghezza intera

Il primo caso che esamineremo è una versione avanzata del modello demo che abbiamo creato sopra. Lassù, abbiamo già rimosso la barra laterale eliminando <?php get_sidebar(); ?> dal codice. Tuttavia, come hai visto dallo screenshot, ciò non si traduce effettivamente in un layout a larghezza intera poiché la sezione del contenuto rimane a sinistra.

Per risolvere questo problema, dobbiamo occuparci del CSS, in particolare questa parte:

L’attributo width limita l’elemento che contiene i nostri contenuti al 65,1042% dello spazio disponibile . Vogliamo aumentarlo.

Se lo cambiamo al 100%, tuttavia, ciò influirà su tutte le altre pagine del nostro sito, il che è lontano da ciò che vogliamo. Pertanto, il primo ordine qui è cambiare la classe principale div nel nostro modello personalizzato in qualcos’altro, come class="site-content-fullwidth”. Il risultato:

Ora possiamo regolare il CSS per la nostra nuova classe personalizzata:

Di conseguenza, il contenuto ora estende tutto lungo lo schermo.

2. Pagina di errore 404 dinamica con aree widget

La pagina di errore 404 è la pagina in cui ogni persona che tenta di accedere a una pagina del tuo sito Web che non esiste, sia per un errore di battitura, un collegamento errato o perché il il permalink della pagina è cambiato.

Nonostante il fatto che ottenere un 404 non sia gradito a tutti su Internet, se stai gestendo un sito web la pagina di errore 404 non ha poca importanza. Il suo contenuto può essere il fattore decisivo per determinare se qualcuno abbandona immediatamente il tuo sito o resta in giro e controlla gli altri tuoi contenuti.

Codificare una pagina di errore personalizzata da zero è complicato, soprattutto se non sei sicuro delle tue capacità . Un modo migliore è costruire aree widget nel tuo modello in modo da poter modificare in modo flessibile ciò che viene visualizzato lì trascinandolo.

Per questo prenderemo e modificheremo il file 404.php fornito con Twenty Twelve ( gerarchia dei modelli, ricordi?). Tuttavia, prima di cambiare qualcosa, creeremo prima un nuovo widget inserendo il seguente codice nel nostro file functions.php:

Questo dovrebbe visualizzare il widget appena creato nel tuo back-end di WordPress. Per assicurarti che appaia effettivamente sul sito, devi aggiungere la seguente riga di codice alla tua pagina 404 nella posizione appropriata:

Dopo caricando il modello sul mio sito, è ora di popolare la mia nuova area widget:

Se ora guardo la pagina di errore 404, i miei widget appena creati vengono visualizzati lì:

3. Modello di pagina per la visualizzazione di tipi di post personalizzati

I tipi di post personalizzati sono un ottimo modo per introdurre contenuti che hanno il proprio set di punti dati, design e altre personalizzazioni. Un caso d’uso preferito per questi tipi di post sono gli elementi di revisione come libri e film. Nel nostro caso vogliamo creare un modello di pagina che mostri gli elementi del portfolio.

Per prima cosa dobbiamo creare il nostro tipo di articolo personalizzato (CPT). Questo può essere fatto manualmente o tramite plugin. Un’opzione di plugin che posso consigliare vivamente è Tipi. Ti consente di creare facilmente tipi di post personalizzati e campi personalizzati.

Installa e attiva i tipi, aggiungi un post personalizzato, assicurati che il suo slug sia “portfolio”, personalizza i campi di cui hai bisogno (come l’aggiunta di un’immagine in primo piano ), modifica qualsiasi altra opzione e salva.

Ora che abbiamo il nostro tipo di post portfolio, vogliamo che venga visualizzato sul nostro sito. La prima cosa che faremo è creare la pagina in questione.Tieni presente che se scegli “portfolio” come slug del tuo CPT, la pagina non può avere lo stesso slug. Sono andato con il mio clients-portfolio e ho anche aggiunto del testo di esempio.

Dopo aver aggiunto alcuni elementi nella sezione del tipo di articolo “portfolio”, vogliamo che vengano visualizzati sulla nostra pagina sotto il contenuto della pagina.

Per ottenere ciò useremo di nuovo un derivato del file page.php. Copialo, chiamalo portfolio-template.php e cambia l’intestazione in questo:

Tuttavia, in questo caso dovremo apportare alcune modifiche al modello originale. Quando dai un’occhiata al codice di page.php, vedrai che chiama un altro file modello nel mezzo, chiamato content-page.php (dove dice <?php get_template_part( ‘content’, ‘page’ ); ?>). In quel file troviamo il seguente codice:

Come puoi vedere, è qui che vengono chiamati il titolo e il contenuto della pagina. Dal momento che vogliamo assolutamente quelli sul nostro sito portfolio, avremo bisogno di copiare le parti necessarie di questo modello nel nostro file page.php. Il risultato è simile a questo:

Per inserire gli elementi del portfolio sulla nostra pagina, aggiungeremo il seguente codice subito sotto la chiamata the_content().

Questo farà apparire il CPT sulla pagina:

Sono sicuro che siamo tutti d’accordo sul fatto che sembra meno che stellare, quindi un po ‘di stile è in ordine.

Molto meglio, non credi?

Ed ecco l’intero codice per il template della pagina portfolio:

4. Pagina del collaboratore con immagini avatar

Il prossimo caso di utilizzo del modello di pagina è una pagina del collaboratore. Vogliamo creare un elenco di autori sul nostro sito Web, comprese le loro immagini e il numero di post che hanno pubblicato sotto il loro nome. Il risultato finale sarà simile a questo:

Ricominceremo di nuovo con il nostro file ibrido da prima e aggiungeremo il codice per l’elenco dei contributori. Ma cosa succede se non sai come creare una cosa del genere? Nessun problema, puoi cavartela con il furto intelligente.

Vedi, il tema predefinito Twenty Fourteen viene fornito con una pagina del collaboratore per impostazione predefinita. Puoi trovare il suo modello nella cartella page-templates con il nome contributors.php.

Quando guardi nel file, tuttavia, troverai solo la seguente chiamata: twentyfourteen_list_authors();. Fortunatamente, come utente appassionato di WordPress ora concludi che questo probabilmente si riferisce a una funzione nel file function.php di Twenty Fourteen e avresti ragione.

Da quello che troviamo lì, la parte che ci interessa è questo:

lo aggiungeremo di nuovo sotto la chiamata per the_content() con il seguente risultato:

Ora per un po ‘di stile:

E dovrebbe essere così. Grazie Twenty Fourteen!

5. Pagina di archivio personalizzata

Twenty Twelve viene fornito con il proprio modello per le pagine di archivio. Entrerà in azione, ad esempio, quando tenterai di visualizzare tutti i post precedenti di una determinata categoria.

Tuttavia, voglio qualcosa di più simile a quello che ha fatto Problogger: una pagina che consenta alle persone di scoprire ulteriori contenuto sul mio sito in molti modi diversi. Anche in questo caso, con un modello di pagina.

Rimanendo con il nostro modello misto di prima, aggiungeremo quanto segue sotto la chiamata the_content():

Inoltre, un po ‘di stile per la barra di ricerca:

E il risultato dovrebbe essere un po’ come questo:

Per amor di completamento, ecco l’intero file:

Non dimenticare di assegnarlo a un pagina!

Modelli di pagina WordPress in poche parole

Nel tuo percorso per padroneggiare WordPress, imparare a usare i modelli di pagina è un passo importante. Possono rendere la personalizzazione del tuo sito web molto, molto semplice e ti consentono di assegnare funzionalità e design unici a tutte le pagine che desideri. Dall’aggiunta di aree widget alla visualizzazione di tipi di post personalizzati alla visualizzazione di un elenco di collaboratori del tuo sito web, le possibilità sono praticamente infinite.

Che tu utilizzi tag condizionali, sfrutti la gerarchia dei modelli di WordPress o crei file modello specifici della pagina dipende interamente da te e da ciò che stai cercando di ottenere. Inizia in piccolo e fatti strada fino a cose più complicate. Non passerà molto tempo prima che ogni parte del tuo sito Web WordPress risponda a ogni tua chiamata.