Tutti i possibili elementi HTML dovrebbero avere uno stile in base al tuo tema (a meno che non sia un tema figlio), sia nel contenuto del post / pagina che in co mmenta il contenuto.
- Tabelle, didascalie, immagini, elenchi, citazioni in blocco e così via.
Si consiglia vivamente di aggiungere stili compatibili con la stampa.
- Puoi includere un foglio di stile di stampa con media = “print” o aggiungere un blocco di supporti di stampa nel tuo foglio di stile principale.
File di funzioni
Un tema può opzionalmente usare un file functions, che risiede nella sottodirectory del tema ed è chiamato functions.php. Questo file si comporta fondamentalmente come un plugin e, se è presente nel tema che stai utilizzando, viene caricato automaticamente durante l’inizializzazione di WordPress (sia per le pagine di amministrazione che per le pagine esterne). Usi suggeriti per questo file:
- Accoda fogli di stile e script del tema. Vedere wp_enqueue_scripts.
- Abilita le funzionalità del tema come barre laterali, menu di navigazione, miniature dei post, formati dei post, intestazioni personalizzate, sfondi personalizzati e altri.
- Definisci le funzioni utilizzate in diversi file modello del tuo tema.
- Imposta un menu di opzioni, fornendo ai proprietari del sito opzioni per colori, stili e altri aspetti del tuo tema.
Il tema WordPress predefinito contiene funzioni. php che definisce molte di queste funzionalità, quindi potresti volerlo utilizzare come modello. Poiché functions.php funziona fondamentalmente come un plugin, l’elenco Function_Reference è il posto migliore dove andare per ulteriori informazioni su cosa puoi fare con questo file.
Nota per decidere quando aggiungere funzioni a functions.php o a un plug-in specifico: potresti scoprire che hai bisogno della stessa funzione per essere disponibile per più di un tema principale. In tal caso, la funzione dovrebbe essere creata in un plugin invece che in functions.php per il tema specifico. Ciò può includere tag modello e altre funzioni specifiche. Le funzioni contenute nei plugin verranno visualizzate da tutti i temi.
File modello
I modelli sono file sorgente PHP utilizzati per generare le pagine richieste dai visitatori e vengono visualizzati come HTML. I file modello sono costituiti da tag modello HTML, PHP e WordPress.
Esaminiamo i vari modelli che possono essere definiti come parte di un tema.
WordPress ti consente di definire modelli separati per i vari aspetti del tuo sito. Non è essenziale, tuttavia, avere tutti questi diversi file modello per il pieno funzionamento del tuo sito. I modelli vengono scelti e generati in base alla Gerarchia dei modelli, a seconda dei modelli disponibili in un particolare tema.
Come tema sviluppatore, puoi scegliere la quantità di personalizzazione che desideri implementare utilizzando i modelli. Ad esempio, in casi estremi, puoi utilizzare un solo file modello, chiamato index.php come modello per tutte le pagine generate e visualizzate dal sito. A l’uso più comune è fare in modo che diversi file modello generino risultati diversi, per consentire la massima personalizzazione.
Elenco file modello
Di seguito è riportato l’elenco dei file del tema riconosciuti da WordPress. Ovviamente, il tuo tema può contenere qualsiasi altro foglio di stile, immagine o file. Tieni presente che il file i seguenti hanno un significato speciale per WordPress – vedi Gerarchia dei modelli per maggiori informazioni.
style.css Il foglio di stile principale. Deve essere incluso con il tuo tema e deve contenere l’intestazione delle informazioni per il tuo tema. rtl.css Il foglio di stile rtl. Questo sarà incluso automaticamente se la direzione del testo del sito web è da destra a sinistra. Questo può essere generato usando il plugin RTLer. Index.php Il modello principale. Se il tuo tema fornisce i propri modelli, index.php deve essere presente. comments.php Il template dei commenti front-page.php Il template della prima pagina home.php Il template della home page, che di default è la prima pagina.Se utilizzi una prima pagina statica, questo è il modello per la pagina con gli ultimi post. single.php Il modello di post singolo. Utilizzato quando viene richiesto un singolo post. Per questo e tutti gli altri modelli di query, viene utilizzato index.php se il modello di query non è presente. single- {post-type} .php Il modello di post singolo utilizzato quando viene richiesto un singolo post da un tipo di post personalizzato. Ad esempio, single-book.php verrebbe utilizzato per visualizzare singoli post dal tipo di post personalizzato denominato “book”. index.php viene utilizzato se il modello di query per il tipo di post personalizzato non è presente. page.php Il modello di pagina. Utilizzato quando viene eseguita una query su una singola pagina. category.php Il modello di categoria. Utilizzato quando viene richiesta una categoria. tag.php Il modello di tag. Utilizzato quando viene richiesto un tag. taxonomy.php Il termine modello. Utilizzato quando viene richiesto un termine in una tassonomia personalizzata. author.php Il modello dell’autore. Utilizzato quando viene richiesto un autore. date.php Il modello di data / ora. Utilizzato quando viene richiesta una data o un’ora. Anno, mese, giorno, ora, minuto, secondo. archive.php Il modello di archivio. Utilizzato quando viene richiesta una categoria, un autore o una data. Nota che questo modello verrà sovrascritto da category.php, author.php e date.php per i rispettivi tipi di query. search.php Il modello dei risultati di ricerca. Utilizzato quando viene eseguita una ricerca. allegato.php Modello di allegato. Utilizzato durante la visualizzazione di un singolo allegato. image.php Modello di allegato immagine. Utilizzato durante la visualizzazione di una singola immagine allegata. Se non presente, verrà utilizzato attachment.php. 404.php Il modello 404 Not Found. Utilizzato quando WordPress non riesce a trovare un post o una pagina che corrisponde alla query.
Questi file hanno un significato speciale per quanto riguarda WordPress perché vengono utilizzati in sostituzione di index.php, quando disponibili, secondo la gerarchia dei modelli e quando il tag condizionale corrispondente restituisce true. Ad esempio, se viene visualizzato un solo post, la funzione is_single () restituisce “true” e, se c’è un singolo file.php nel tema attivo, quel modello viene utilizzato per generare la pagina.
Modelli di base
Come minimo, un tema WordPress è costituito da due file:
Entrambi questi file vanno nella directory Theme. Il file template index.php è molto flessibile. Può essere utilizzato per includere tutti i riferimenti a intestazione, barra laterale, piè di pagina, contenuto, categorie, archivi, ricerca, errore e qualsiasi altra pagina creata in WordPress.
Oppure può essere suddiviso in un modello modulare file, ognuno dei quali assume parte del carico di lavoro. Se non fornisci altri file modello, WordPress potrebbe avere file o funzioni predefinite per eseguire il loro lavoro. Ad esempio, se non fornisci un file modello searchform.php, WordPress ha una funzione predefinita per visualizzare il modulo di ricerca.
I file modello tipici includono:
- commenti. php
- comments-popup.php
- footer.php
- header.php
- sidebar.php
Usando questi file modello puoi inserire i tag modello nel file principale index.php per includere questi altri file dove vuoi che appaiano nella pagina generata finale.
Ecco un esempio del includi l’utilizzo:
<?php get_sidebar(); ?><?php get_footer(); ?>
I file predefiniti per alcune funzioni del modello potrebbero essere deprecati o non presenti e dovresti fornire questi file nel tuo tema. A partire dalla versione 3.0, i file predefiniti obsoleti si trovano in wp-includes/theme-compat. Ad esempio, dovresti fornire header.php affinché la funzione get_header () funzioni in modo sicuro e comments.php per la funzione comments_template ().
Per ulteriori informazioni su come funzionano questi vari modelli e su come generarne informazioni al loro interno, leggi la documentazione dei modelli.
Modelli di pagina personalizzati
I file che definiscono ogni modello di pagina si trovano nella directory dei temi. Per creare un nuovo modello di pagina personalizzato per una pagina è necessario creare un file. Chiamiamo il nostro primo modello di pagina per la nostra pagina snarfer.php. Nella parte superiore del file snarfer.php, inserisci quanto segue:
<?php/*Template Name: Snarfer*/?>
Quanto sopra code definisce questo file snarfer.php come il modello “Snarfer”. Naturalmente, “Snarfer” può essere sostituito con quasi qualsiasi testo per cambiare il nome del modello di pagina. Questo nome di modello apparirà nell’Editor del tema come collegamento per modificarlo file.
Il file può essere chiamato quasi qualsiasi cosa con estensione .php (vedi Nomi di file di temi riservati per i nomi di file che non dovresti usare; questi sono nomi di file speciali che WordPress riserva per scopi specifici).
Ciò che segue le cinque righe di codice precedenti dipende da te. Il resto del codice che scrivi controllerà come verranno visualizzate le pagine che utilizzano il modello di pagina Snarfer. Vedi Tag del modello per una descrizione delle varie funzioni del modello WordPress puoi usare per questo scopo. Potresti trovare più conveniente copiare qualche altro template (magari page.php o index.php) in snarfer.php e poi aggiungere le cinque righe di codice sopra all’inizio del file.In questo modo, dovrai solo modificare il codice HTML e PHP, invece di crearlo tutto da zero. Di seguito sono riportati degli esempi. Dopo aver creato un modello di pagina e averlo inserito nella directory del tema, sarà disponibile come scelta quando crei o modifichi una pagina. (Nota: quando crei o modifichi una pagina, l’opzione Modello di pagina non appare a meno che esiste almeno un modello definito nel modo sopra).
File modello basati su query
WordPress può caricare diversi modelli per diversi tipi di query. Ci sono due modi per farlo: come parte della gerarchia di modelli incorporata e tramite l’uso di tag condizionali all’interno di The Loop di un file modello.
Per utilizzare la gerarchia di modelli, è necessario fornire fondamentalmente file di modello per scopi speciali, che verrà automaticamente utilizzato per sovrascrivere index.php. Ad esempio, se il tuo tema fornisce un modello chiamato category.php e viene richiesta una categoria, verrà caricato category.php invece di index.php. Se category.php non è presente, index.php è usato come al solito.
Puoi essere ancora più specifico nella Gerarchia dei modelli fornendo af ile chiamato, ad esempio, category-6.php: questo file verrà utilizzato al posto di category.php durante la generazione della pagina per la categoria il cui numero ID è 6. (Puoi trovare i numeri ID della categoria in Manage > Categorie se hai effettuato l’accesso come amministratore del sito in WordPress versione 2.3 e precedenti. In WordPress 2.5 la colonna ID è stata rimossa dai pannelli di amministrazione. È possibile individuare l’ID della categoria facendo clic su “Modifica categoria” e cercando nella barra degli indirizzi dell’URL il valore cat_ID. Apparirà “… categories.php? Action = edit & cat_ID = 3” dove “3” è l’id della categoria). Per uno sguardo più dettagliato su come funziona questo processo, consulta Modelli di categoria.
Se il tuo tema deve avere un controllo ancora maggiore su quali file di modello vengono utilizzati rispetto a quanto fornito nella gerarchia dei modelli, puoi usare Condizionale Tag. Il tag condizionale controlla fondamentalmente per vedere se una particolare condizione è vera, all’interno del ciclo di WordPress, quindi puoi caricare un modello particolare o inserire del testo particolare sullo schermo, in base a quella condizione.
Per Ad esempio, per generare un foglio di stile distintivo in un post che si trova solo all’interno di una categoria specifica, il codice potrebbe essere simile a questo:
Oppure, utilizzando una query, potrebbe essere simile a questo:
<?php$post = $wp_query->post;if ( in_category( "9" ) ) { get_template_part( "single2" );} else { get_template_part( "single1" );}?>
In entrambi i casi, questo codice di esempio farà sì che vengano utilizzati modelli diversi a seconda della categoria del particolare post visualizzato. Le condizioni di query non sono limitate alle categorie, tuttavia, consulta l’articolo Tag condizionali per esaminare tutte le opzioni.
Definizione di modelli personalizzati
È possibile utilizzare il sistema di plugin di WordPress per definire modelli aggiuntivi che vengono visualizzati in base ai tuoi criteri personalizzati. Questa funzionalità avanzata può essere realizzata utilizzando il gancio di azione “template_include”. Ulteriori informazioni sulla creazione di plug-in sono disponibili nel riferimento all’API del plug-in.
Inclusione di file di modello
Per caricare un altro modello (diverso da intestazione, barra laterale, piè di pagina, che ha comandi inclusi predefiniti come get_header ()) in un modello, puoi usare get_template_part (). Ciò semplifica il riutilizzo di sezioni di codice da parte di un tema.
Riferimento a file da un modello
Quando si fa riferimento ad altri file all’interno dello stesso tema, evitare URI e percorsi di file hard-coded. Fai invece riferimento agli URI e ai percorsi dei file con bloginfo (): vedi Riferimento a file da un modello.
Nota che gli URI utilizzati nel foglio di stile sono relativi al foglio di stile, non alla pagina che fa riferimento al foglio di stile. Ad esempio, se includi una directory images / nel tuo tema, devi solo specificare questa directory relativa nel CSS, in questo modo:
h1 { background-image: url(images/my-background.jpg);}
Hook API del plugin
Quando si sviluppano temi, è bene tenere presente che il proprio tema deve essere impostato in modo che possa funzionare bene con qualsiasi plugin di WordPress che gli utenti potrebbero decidere di installare. I plugin aggiungono funzionalità a WordPress tramite “Azione Hooks “(vedi Plugin API per maggiori informazioni).
La maggior parte degli Action Hooks si trova all’interno del codice PHP di base di WordPress, quindi il tuo tema non deve avere tag speciali perché funzioni. Gli hook devono essere presenti nel tuo tema, affinché i plugin possano visualizzare le informazioni direttamente nell’intestazione, nel piè di pagina, nella barra laterale o nel corpo della pagina. Di seguito è riportato un elenco dei tag speciali del modello di hook di azione che devi includere:
wp_enqueue_scripts Utilizzato nel file delle funzioni del tema. Utilizzato per caricare script e fogli di stile esterni. wp_head () Va nella < head > elemento di un tema, in header.php. Esempio di utilizzo del plugin: aggiungi codice JavaScript. wp_footer () Va in footer.php, subito prima del tag di chiusura < / body >. Esempio di utilizzo del plugin: inserisci il codice PHP che deve essere eseguito dopo tutto il resto, in fondo al piè di pagina.Molto comunemente utilizzato per inserire codice di statistiche web, come Google Analytics. wp_meta () Di solito va nel < li > Meta < / li > sezione del menu di un tema o del modello sidebar; sidebar.php. Esempio di utilizzo del plug-in: include un annuncio pubblicitario rotante o una nuvola di tag. Comment_form () Va in comments.php direttamente prima del file ” s tag di chiusura (< / div >). Esempio di utilizzo del plugin: visualizza un’anteprima del commento.
Per un esempio di utilizzo nel mondo reale, troverai questi plugin hook inclusi nei modelli predefiniti del tema.
API di personalizzazione del tema
A partire da WordPress 3.4, una nuova La funzione di personalizzazione del tema è disponibile per impostazione predefinita per quasi tutti i temi di WordPress. La pagina di amministrazione della personalizzazione del tema viene automaticamente popolata con opzioni per le quali un tema dichiara il supporto con add_theme_support () o utilizzando l’API delle impostazioni e consente agli amministratori di visualizzare anteprime non permanenti delle modifiche apportate in tempo reale.
Gli sviluppatori di temi e plugin interessati ad aggiungere nuove opzioni alla pagina di personalizzazione del tema di un tema dovrebbero consultare la documentazione sull’API di personalizzazione del tema. Ulteriori tutorial sull’API di personalizzazione del tema sono disponibili sul sito Web di Ottopress.com.
Dati non attendibili
Dovresti eseguire l’escape del contenuto generato dinamicamente nel tuo tema, in particolare il contenuto che viene emesso in attributi HTML. Come notato in WordPress Coding Standards, il testo che va negli attributi dovrebbe essere eseguito tramite esc_attr () in modo che o le virgolette doppie non terminano il valore dell’attributo e invalidano l’XHTML e causano un problema di sicurezza. I luoghi comuni da controllare sono gli attributi title, alt e value.
Ci sono alcuni tag template speciali per casi comuni dove È necessaria un’uscita sicura. Uno di questi casi implica l’output del titolo di un post a un attributo title utilizzando the_title_attribute () invece di_title () per evitare una vulnerabilità di sicurezza. Ecco un esempio di escape corretto per l’attributo title di un link al titolo di un post quando si utilizza testo traducibile:
<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( "Permanent Link to %s", "theme-name" ), the_title_attribute( "echo=0" ) ); ?>"><?php the_title(); ?></a>
Translation Support / I18n
Per garantire una transizione fluida per la localizzazione della lingua, utilizzare le funzioni i18n basate su gettext di WordPress per racchiudere tutto il testo traducibile all’interno dei file del modello. Ciò rende più facile per i file di traduzione agganciarsi e tradurre le etichette, i titoli e altro testo del modello in la lingua corrente del sito. Ulteriori informazioni su Localizzazione di WordPress e I18n per sviluppatori WordPress.
Classi di temi
Implementa i seguenti tag del modello per aggiungere attributi di classe generati da WordPress agli elementi del corpo, del post e dei commenti. Per le classi di post, applica solo agli elementi all’interno di The Loop.
- body_class ()
- post_class ()
- comment_class ()
Elenco di controllo file modello
Quando si sviluppa un tema, controllare i file modello rispetto ai seguenti standard di file modello.
Testata documento (header.php)
- Utilizza il DOCTYPE corretto.
- Il tag di apertura < html > deve includere language_attributes ( ).
- L’elemento charset < meta > deve essere posizionato prima di tutto il resto, compreso < title > elemento.
- Utilizza bloginfo () per impostare il meta < > set di caratteri ed elementi di descrizione.
- Utilizza wp_title () per impostare il < titolo . Scopri perché.
- Utilizza i link ai feed automatici per aggiungere link ai feed.
- Aggiungi una chiamata a wp_head () prima della chiusura < / head tag >. I plugin utilizzano questo action hook per aggiungere i propri script, fogli di stile e altre funzionalità.
- Non collegare i fogli di stile del tema nel modello di intestazione. Utilizza invece l’action hook wp_enqueue_scripts in una funzione del tema.
Ecco un esempio di area della testa conforme a HTML5 correttamente formattata:
Menu di navigazione (header.php )
- La navigazione principale del tema dovrebbe supportare un menu personalizzato con wp_nav_menu ().
- I menu dovrebbero supportare titoli di collegamento lunghi e una grande quantità di voci di elenco. Questi elementi non dovrebbero rompere il design o il layout.
- Gli elementi del sottomenu dovrebbero essere visualizzati correttamente. Se possibile, supporta gli stili di menu a discesa per le voci di sottomenu. Menu a discesa che consentono di mostrare la profondità del menu invece di mostrare solo il livello superiore.
- Il tema dovrebbe essere widgetizzato nel modo più completo possibile. Qualsiasi area del layout che funzioni come un widget (tag cloud, blogroll, elenco di categorie) o che possa accettare widget (barra laterale) dovrebbe consentire i widget.
- Il contenuto che appare nelle aree widgetizzate per impostazione predefinita (hard-coded nella barra laterale, ad esempio) dovrebbe scomparire quando i widget sono abilitati da Aspetto > Widget.
Piè di pagina (footer.php)
- Usa la chiamata wp_footer (), per apparire subito prima di chiudere il tag body.
<?php wp_footer();
read more