Come creare un template di pagina personalizzata WordPress: ottenendo il controllo finale

Il potere è sempre attraente. Indipendentemente da ciò che dice un essere umano, gli piacerebbe avere un controllo completo su ciò che lo circonda. Anche un piccolo pezzo di potere e controllo ti fanno sentire in cima al mondo. Siamo sinceri, chi non sceglierebbe di prendere l'Anello se dovesse scegliere?

La stessa situazione è con la costruzione del sito web. Il veleno ti porta lentamente. Si inizia  creando il primo sito web WordPress e si utilizza un template semplice e gratuito già pronto. Quindi acquisti un tema a pagamento, creato da professionisti.  Ancora non soddisfa  tutte le tue esigenze, quindi inizi a pensare a ulteriori personalizzazioni. Questo è un momento in cui sei appassionato. La sensazione di controllo sulla tua creazione è troppo dolce per abbandonarla, così farai sempre più personalizzazioni. Potrai a perfezionare il tuo sito web alla perfezione.

È davvero fantastico rifare il tuo sito web  con le tue mani, ed è per questo che molti principianti vanno oltre e imparano a creare una pagina  davvero unica. Se stai leggendo questo - tu sei uno di loro. Quindi, basta chattare, iniziamo il tuo cammino verso il controllo finale del tuo sito web con la creazione di un modello personalizzato di una pagina WordPress.

Qual è il template  di pagina WordPress?

All'inizio c'era una parola, quindi partendo dall’inizio, definiamo la terminologia. L'aspetto del tuo sito Web WordPress è definito dai template. Quale colore usare per i pulsanti, da quale lato mettere una barra laterale, quale font usare per i testi, dove posizionare il modulo di ricerca - tutte quelle istruzioni sono raccolte nei template.

Il template  di pagina è un php. file che descrive come sarà la tua pagina. Tutti i template di WordPress php. i file sono memorizzati nella cartella "themes" della directory "wp-content". È possibile applicare i template di pagina a delle  specifiche pagine, sezioni di pagina o classi di pagine. Alcune pagine dovrebbero sempre apparire diverse dall'altra, ad esempio una pagina "a proposito". Di solito, un tema ha una serie di pagine già pronte, che vengono applicate automaticamente.

Ma come fa WordPress a capire cosa php. template di pagina deve  utilizzare in ogni situazione? Questo è quando la gerarchia dei template arriva sulla scena.

Importanza della gerarchia dei template

Quando un utente naviga su una delle pagine del tuo sito web, WordPress cerca un file .php che gli spiegherà cosa mostrare. Il CMS cerca sempre un file necessario in uno specifico ordine stabile. Questo ordine è chiamato gerarchia dei template. Lascia che ti mostri come funziona in  un esempio.

Un visitatore desidera leggere uno dei post del tuo blog e cliccare su un link  http://iamawesome.com/blog/category- best / free-post. La prima cosa che WordPress controllerà è se hai assegnato o meno un template di pagina personalizzato specifico a questa particolare pagina. Sei completamente libero di creare  qualsiasi numero  di template di pagina personalizzati di WordPress e rendere unica ogni parte del tuo sito web.

Se non è stato assegnato alcun file, WP cerca un template di pagina di categoria. Sembrerà così: category-best.php. Questo template di pagina .php definisce l'aspetto dell'intera categoria di pagine e può definire un determinato aspetto per un gruppo di post che descrivono lo stesso argomento.

Se non ti interessa scegliere un aspetto diverso per ogni categoria e non c'è un file category1.php, WordPress controllerà qual è l'ID di quella categoria, supponiamo che sia 15. WP cercherà un file di categoria 15.php .

Non ci sarà nulla di simile se non ti importa delle categorie (non ti sto incolpando, è solo un'ipotesi). Ora WordPress cercherà un file page.php di base. È così che tutte le pagine dovrebbero apparire se non vengono modificate in qualche modo.

Non ci potrebbe essere alcun file page.php. Questa è una situazione molto rara e probabilmente non la incontrerai se lavori con un template già pronto, ma se si verifica un problema simile, WordPress troverà un file index.php e lo mostrerà all’utente, beh, almeno qualcosa. Quello è un template di sito Web predefinito che definirà un aspetto di base di una pagina.

Come creare un template di pagina WP personalizzato o "Il Re Lich mi ha dato il vero potere!"

Finalmente, iniziamo un pò di pratica. Prima di tutto, devi creare un file .php nell'editor di codice di tua scelta. Preferisco il semplice Blocco note di Windows, ma puoi anche usare Notepad ++, Sublime o qualsiasi altro che ti piace.

Due cose su cui ogni pagina del web ha bisogno sono l'intestazione e il piè di pagina. Per visualizzarli sul template di pagina aggiungi il seguente codice che hai creato al file .php.

<!--?php /** * Template Name: Custom Page Template */ get_header(); ?-->
 
<!--?php get_footer(); ?-->

Sembrerà così:

Ora salva le modifiche e apri FTP o cPanel file manager del tuo sito web.

Carica il file che hai creato per wp-content-> themes-> current theme folder del tuo sito web.

Da questa cartella, sarà disponibile per scegliere per progettare la pagina. Vai a Pages> Aggiungi il nuovo, riempi la pagina con il contenuto e guarda a destra. C'è una scheda denominata "Attributi della pagina". Fai clic sulla barra "Template" e scegli il template di pagina personalizzato creato dal menu a discesa.

Dopo aver premuto il pulsante "Pubblica" e andando al sito web, vedrai una struttura di pagina molto semplice. Avrà un'intestazione e un piè di pagina, ma questo è tutto. Ti stai annoiando, eh?

Sono sicuro che non ti piacerà molto, quindi rendiamolo più interessante. È facile: devi solo copiare e incollare un pò. Quasi tutti i temi WordPress hanno pagine aggiuntive già pronte. Ad esempio, il mio tema (io uso FreeBook da TemplateMonster) ha un template personalizzato Landing Page e Page Without footer and Header. Il tema Twenty Twelve (uno dei temi WP predefiniti gratuiti) include 404 e pagine predefinite di archiviazione. Il tema Twenty Fourteen (un altro tema gratuito) può darti una pagina dei Contributors. Inoltre, ogni tema ha parti di pagina già codificate che sono memorizzate nella cartella wp-content / themes / your_theme. È possibile scaricare tale file di parti sul computer, aprirlo e copiarlo sul nuovo template di pagina personalizzato di WordPress. Ecco come appare il mio tema del template di barra laterale:

Lo copio e lo incolo semplicemente nel mio  file .php. Guarda, c'è una barra laterale ora!

Template di pagina WordPress personalizzati per un uso diverso

Come probabilmente hai capito dalla gerarchia dei template di WordPress, puoi creare un template di pagina .php non solo per una singola pagina, ma anche per un gruppo di pagine. Questi gruppi potrebbero essere associati a una categoria o un tipo e creare template  di pagina WP, che verranno applicati automaticamente o scelti dall'utente nel processo di creazione della nuova pagina. Vieni più vicino, ti dirò un pò di più su come funziona questa magia.

WordPress tipo di pagina personalizzato per qualsiasi pagina

Supponiamo che tu abbia bisogno di un file .php template WordPress, che sarà disponibile per qualsiasi pagina che crei. Prima di tutto, fai attenzione al nome. Se il titolo del tuo tema .php inizia con "page-", WordPress lo interpreterà come un template specializzato, che dovrebbe essere usato per una pagina specifica. Inoltre, prova a scegliere un nome comprensibile, così sarai in grado di ricordare cosa c'è dentro dopo un pò di tempo.

Dopo aver creato un template di pagina personalizzato, dovresti scaricarlo nella cartella wp-content / themes / your_theme tramite FileZilla o cPanel. Ora, questa opzione è disponibile per te  nel menu a discesa "Attributi della pagina" del dashboard amministrativo, ogni volta che desideri creare o modificare una nuova pagina del sito web.

Template di pagina personalizzata WordPress per una sola pagina

Vuoi che una delle tue pagine statiche abbia un aspetto diverso dagli altri. La situazione in cui tutte le tue pagine statiche sono uniche è anche possibile (non esagerare, non sarà bello se il tuo sito web assomiglia ad un circo pazzo, con barre laterali che saltano su tutta la superficie dello schermo).

Crea un template di pagina .php e chiamalo pagina- {slug} .php o pagina- {numero ID della pagina} .phpand scaricalo nella cartella del tema corrente. In questo caso, WordPress utilizzerà automaticamente questo template solo per una pagina specifica, che corrisponde all'ID o ad un slug. Ad esempio, desideri creare una pagina Contatti e supponiamo che abbia un numero ID 9. Crea un template di pagina personalizzato WordPress denominato page-contacts.php o page-9.php e verrà applicato solo alla pagina Contatti.

Tipo di pagina personalizzato WordPress per i post

Ora hai creato un template di pagina personalizzato, ma desideri che i tuoi post abbiano lo stesso aspetto. In questo caso, la modifica del nome non sarà d'aiuto, dovrai aggiungere una linea aggiuntiva di codice a quel template. Digita "Tipo di template di post: post, pagina" proprio sotto la riga Nome del template.  Sembrerà così:

In questo modo puoi aggiungere anche gli eventi e altri tipi di contenuti, che hai sul tuo sito web. Devo ammettere, che questo metodo funzionerà solo se il tuo WordPress è della versione 4.7 e successive. Le versioni precedenti ignorano semplicemente la riga Tipo di template di post. Ci sono altri motivi per usare le ultime versioni di WordPress e puoi verificarle in questo articolo.

Perché i tag condizionali sono freddi?

In precedenza ho descritto come creare un template di pagina .pf completamente nuovo, ma cosa succede se si desidera apportare alcune modifiche a uno già esistente? Ci sono le situazioni in cui hai bisogno di qualcosa da mostrare solo se una condizione è soddisfatta, quindi non vuoi creare una pagina che sarà diversa dalle altre solo in qualche piccolo dettaglio o solo in una situazione particolare.

Ecco perché i tag condizionali sono così interessanti. Li usi in una riga di codice che controlla se alcune condizioni sono soddisfatte o meno. Se viene soddisfatta, la prima parte del codice continua ad essere in esecuzione e in caso contrario, viene eseguita la parte successiva a "else". Ad esempio, vuoi mostrare un tipo specifico di barra laterale agli utenti, che sono andati sull’archivio. Il tuo codice per questo sarà simile a quello:

Ecco un elenco dei tag condizionali più frequentemente utilizzati:

• is_home () ha una condizione "true" quando viene visualizzata la pagina principale (quelle definite come homepage)
• is_front_page () ha una condizione "true" quando viene visualizzata la prima pagina di un sito web (quella impostata come prima pagina)
• is_single () ha una condizione "true" quando viene visualizzato un post e sarà "false" quando l'utente si trova su una pagina. Questo tag condizionale potrebbe essere più specifico se digiti il titolo o l'ID di un post concreto tra parentesi. Traccerà sia il post in particolare (is_single (`21`) o is_single (` batman`)) o un gruppo di post (is_single (`3, 15, 47`) o is_single (` batman, superman, ironman`)
• is_page () ha una condizione "true" quando viene visualizzata una pagina. Questo tag condizionale ha tutte le stesse opzioni di has_single (). Puoi menzionare il nome o l'ID della pagina tra parentesi e questa parte del codice traccerà una singola pagina o un gruppo di pagine
• is_page_template () ha una condizione "true" quando un particolare template di pagina viene utilizzato su quella pagina. Devi digitare il nome di quel template di pagina personalizzato tra parentesi in un modulo "template_name.php"
• is_category () Ha una condizione "true" quando viene visualizzata una pagina di categoria dell’archivio. Questo condizionale può essere specificato proprio come is_single () e is_page () digitando il nome o l'ID della categoria dell’archivio concreto tra parentesi
• is_tag () ha una condizione "true" quando viene visualizzata una pagina dell’archivio tag. Puoi menzionare un tag concreto tra parentesi o tracciare tutte le pagine di tag. Se vuoi sapere se c'è qualche tag su quella pagina puoi usare has_tag () condizionale all'interno del Loop.
• is_archive () ha una condizione "true" quando un’utente accede a una qualsiasi pagina dell’archivio
• is_author () ha una condizione "true" quando viene visualizzata una pagina dell’autore. Potrebbe tracciare un’autore concreto (con il suo nome o ID) e un gruppo degli autori
• is_date () ha una condizione "true" quando viene visualizzata una pagina dell’archivio di una data specifica. Esistono anche condizioni più precise: is_year () (quando viene visualizzata una pagina dell’archivio dell'anno concreto), is_month () (tiene traccia di tutte le pagine mensili), is_day () (la stessa cosa con un giorno concreto) e is_time () (tu può farlo rintracciando una pagina che è stata pubblicata in un tempo preciso)
• is_search () ha una condizione "true" quando un utente ottiene una pagina come risultato della ricerca
• is_404 () ha una condizione "true" quando il tuo errore (o argutamente progettato) "Errore 404" viene mostrato al visitatore
• is_attachment () ha una condizione "true" quando un utente accede alla pagina "own" dell'allegato (gli allegati sono le immagini o i video aggiunti al post tramite la libreria multimediale o l'editor)
• comments_open () ha una condizione "true" se un autore della pagina corrisponde ai commenti autorizzati su quella pagina

Funzioni del template di pagina: più in profondità nella tana del coniglio

Copiare e incollare il codice dal template di pagina già pronto è un modo facile e veloce per creare un look unico, ma cosa significa tutto questo codice? Naturalmente, gli sviluppatori web studiano tutto ciò che riguarda PHP e sanno esattamente quali funzioni usare, come usarle e quando. Tuttavia, se stai ancora leggendo questo, non sei uno sviluppatore web, o, almeno, non molto esperto. Dal momento che stiamo parlando del massimo del potere, o altro, del controllo completo sul tuo sito web, non possiamo perdere i tag del template.

WordPress utilizza molte funzioni PHP diverse e quelle utilizzate solo per i temi sono chiamate Tag del template. Li hai già visti mentre hai creatoil tuo primo template di pagina .php, get_header () e get_footer () sono tag del template. Non parlerò di tutti i tag esistenti, ce ne sono troppi, ma passiamo a quelli che sicuramente incontrerai durante la progettazione del tuo sito web.

get_header(), get_footer(), get_sidebar()

Questi tre tag del template aggiungono un'intestazione, un piè di pagina o una barra laterale al template di pagina personalizzata di WordPress. Queste parti sono tratte dal tema, che usi attualmente. Se vuoi usare un'intestazione, un piè di pagina o una barra laterale specifici per quella pagina, digitarne il nome tra parentesi. Ad esempio, per utilizzare un file header-superstar.php è necessario un tag del template get_header (`superstar`).

get_template_part()

Questo aggiunge anche una certa parte di alcuni template già creati al tuo tema .php. La differenza è che se le parentesi rimangono vuote, nulla verrà aggiunto. Devi sfidare cosa aggiungere. Di solito, questo tag del template viene utilizzato per spostare una parte di codice dal tema principale a quello secondario.

get_search_form()

Questo template di ricerca hardcode sarà necessario nella barra laterale. Anche i widget di ricerca utilizzano solitamente questo tag del template. Individua search_form.php nella cartella del tema e quindi lo aggiunge al template di pagina personalizzato.

get_page_template()

Questa funzione recupera il passaggio al tmplate attualmente utilizzato in base alla gerarchia dei modelli.

wp_login_form()

Se le parentesi sono vuote, questa funzione aggiunge un semplice modulo di accesso WordPress al template di pagina personalizzato. Se desideri utilizzare un modulo particolare, è necessario digitare il suo nome tra parentesi nello stesso modo del tag del template get_header ().

get_calendar()

Visualizza un calendario sulla pagina. Sarà stilizzato secondo un tema attuale. È anche possibile aggiungere un calendario modificato in base ai propri gusti: è sufficiente digitare il nome tra parentesi nello stesso modo in cui lo si fa per la barra laterale o il piè di pagina originale.

Questo sarà abbastanza per te se non desideri studiare PHP. Esistono più di un centinaio di tag di template in WordPress, quindi penso che anche i guru dello sviluppo web utilizzino diversi trucchi. Se sei veramente interessato all'apprendimento, visita il Codice WordPress

Creare i temi di pagina utili per WordPress: con grande potere derivano grandi responsabilità

Hai il potere di personalizzare ogni singola parte del tuo sito web ora. È possibile creare i template di pagina WP per ogni pagina e renderla il più unica e complicata possibile. Tuttavia, dopo la prima ondata di euforia, si arriva a una semplice domanda: quali pagine saranno davvero utili per il mio sito web? Tutti i nuovi sono trascurati e molti creatori di siti web hanno risposto a questa stessa domanda, quindi lasciatemi fare alcuni esempi.

Pagina 404 cool

A nessuno piace questo fuori di pagina, perché ti fa sentire un idiota. Tuttavia, il suo design potrebbe far sparire un utente o tornare indietro per cercare di nuovo. La prima cosa è, ovviamente, una foto e abbiamo raccolto le pagine di "Errore 404" più spiritose in questo articolo. Mettere qualcosa di simile in background sarà una buona decisione, ma non è abbastanza. Una pagina "404" deve avere un link alla tua home page e un modulo di ricerca che incoraggi un utente a rimanere sul tuo sito web. Non è fantastico che tu ora sappia come farlo?

Pagina "Chi siamo" con un elenco di membri del team

La pagina "Chi siamo" è una delle più visitate sul tuo sito web. Le persone amano sapere con chi stanno comunicando. È una parte molto importante del tuo sito web e un template di pagina personalizzata  è un must. Sarà davvero fantastico se tutti i membri del team saranno elencati in una tabella accurata. Non sarà difficile creare una funzione del genere, è possibile copiarla dalla pagina predefinità dei collaboratori di Twenty Fourteen.

Pagina principale dell'archivio personalizzato

Il tuo obiettivo è far visitare a un utente il maggior numero possibile di pagine. Ecco perché il tipo di pagina WordPress dell'archivio deve contenere collegamenti ai post più recenti di diverse categorie e attirare l'attenzione dei visitatori. Non dovrebbe solo visualizzare le categorie e tag disponibili, è noioso. Una buona idea sarà quella di mostrare la top 5 dei tuoi post più popolari o di alcuni articoli casuali. Richiederà alcuni sforzi da parte tua, ma sicuramente influirà sulle traffico del tuo sito web.

Pagina di contatto con modulo di contatto

È ovvio che un utente che cerca i tuoi contatti desidera comunicare con te. Rendere facile  il soddisfacimento di tale desiderio  per un visitatore non è solo una buona idea, è un tuo dovere se vuoi ottenere un certo successo. Assicurati che la tua pagina dei contatti contenga non solo il tuo telefono e la tua e-mail, metti un modulo di contatto e aggiungi una mappa di Google al tuo puntatore di posizione. Non dovrebbe esserci alcuna possibilità che un potenziale cliente se ne vada senza parlare con te,  perché non riesce a trovare i tuoi contatti.

Mappa del sito in ordine alfabetico

Se ci sono molti articoli sul tuo blog, devi creare una sitemap. Questa è una pagina che elenca tutti i post che hai scritto e pubblicato. Sarebbe davvero comodo se tutti questi messaggi fossero organizzati in un certo ordine, alfabetico, per esempio. Ecco dove i temi gratuiti per WordPress ti aiuteranno ancora una volta. Twenty Fourteen ha un template di pagina personalizzata WordPress già pronto per i "post alfabetici", quindi puoi semplicemente replicarlo.

JetEngine: un modo semplice per ottenere la superpotenza

Nonostante molti eroi che ottengono il loro potere dopo lunghi anni di duro lavoro (come Batman, Flash o Black Widow), ce ne sono molti di più che riescono ad ottenerlo molto più velocemente e senza problemi. C'è un modo per creare pagine personalizzate senza immergersi nel codice, qualcosa come un morso di spider radioattivo, che ti dà energia senza sforzi – è Plugin JetEngine Elementor.

Nonostante il mio amore per l'approfondimento delle funzionalità di WordPress, mi piace Elementor. Si risparmia un sacco di tempo quando si tratta di creare un sito web. Se crei i  siti per vivere, la velocità del lavoro di routine ti dà il tempo di fare qualcosa per piacere, quindi uso Elementor molto spesso. Traccio i nuovi plugin per Elementor ed è così che ho trovato JetEngine. Ha alcune caratteristiche principali, ma stiamo parlando delle pagine personalizzate in questo articolo, quindi mi concentrerò su di esse.

Jet Engine ha due widget che ti aiutano a creare qualsiasi pagina che ti piace - Tipo di post personalizzato e Tassonomia personalizzata. Entrambi influenzano principalmente la dashboard di amministrazione, creando i nuovi strumenti per la personalizzazione del contenuto.

Normalmente, il contenuto in WordPress viene visualizzato come pagine o come post. In alcune varianti, un template già pronto aggiunge la scheda Galleria o Testimonianze, ma questo è tutto. La funzionalità di tipo Post personalizzato, ti consente di aggiungere qualsiasi scheda del tipo di post aggiuntiva alla tua dashboard. Il portfolio o negozio online, l’elenco di video o bacheca annunci - JetEngine ti offre l'opportunità di aggiungere tutto ciò di cui hai bisogno. Ecco un video dettagliato del lavoro di questa funzionalità:

La tassonomia è un insieme di etichette, che ti aiutano a sistemare le cose. Nel caso di JetEngine, la funzionalità di Tassonomia personalizzata ti dà l'opportunità di aggiungere alcuni strumenti nella finestra di creazione del contenuto. Questo widget aggiunge tessere opzionali aggiuntive nella barra laterale di personalizzazione e consente di contrassegnare il contenuto con etichette, che potrebbero essere ulteriormente utilizzate per l'ordinamento. Questo video ti mostrerà come funziona la tassonomia personalizzata e come usarla:

Hai un grande potere nelle tue mani adesso, giovane padawan. Usalo con saggezza, non esagerare e rendi il tuo sito web elegante, unico ed efficiente. Ti ho dato una serie di strumenti, che ti aiuteranno ad iniziare un viaggio senza fine attraverso un processo di raggiungimento dei massimi livelli della maestria di WordPress. Spero che il tuo template di pagina personalizzato sia fantastico e ti solleciti a continuare a scoprire qualcosa di nuovo. In bocca al lupo!

Hai delle  domande sui materiali dell'articolo? Forse conosci un argomento che sarà un'aggiunta perfetta a questo post? Per favore, sentiti libero di lasciare i commenti o i feedback. Non vedo l'ora di migliorare gli articoli e renderli più interessanti e utili per te.

***

Questo articolo è stato tradotto da inglese. L’originale puoi trovare qui: How to Create a WordPress Custom Page Template: Gaining Ultimate Control