Lingue: বাংলা • Inglese • Español • 日本語 한국어 • Português do Brasil • Русский • 中文 (简体) •中文 (繁體) • (Aggiungi la tua lingua)

Questo articolo riguarda lo sviluppo di temi WordPress. Se desideri saperne di più su come installare e utilizzare i temi, consulta Utilizzo dei temi. Questo argomento differisce da Utilizzo dei temi perché discute gli aspetti tecnici della scrittura di codice per creare i propri temi piuttosto che come attivarli o dove ottenere nuovi temi.

Perché i temi WordPress

I temi WordPress sono file che funzionano insieme per creare il design e le funzionalità di un sito WordPress. Ogni tema può essere diverso, offrendo molte scelte ai proprietari del sito per cambiare immediatamente l’aspetto del loro sito web.

Potresti voler sviluppare temi WordPress per il tuo uso personale, per un progetto cliente o da inviare alla directory dei temi di WordPress. Perché altrimenti dovresti creare un tema WordPress?

• Per creare un aspetto unico per il tuo sito WordPress.
• Per sfruttare i modelli, i tag dei modelli e il ciclo di WordPress per generare diversi risultati e look del sito web.
• Per fornire modelli alternativi per funzionalità del sito specifiche, come come pagine di categoria e pagine dei risultati di ricerca.
• Per passare rapidamente da un layout di sito all’altro o per sfruttare un tema o un selettore di stile per consentire ai proprietari del sito di modificare l’aspetto del tuo sito.

Un tema WordPress ha anche molti vantaggi.

• Separa gli stili di presentazione e i file modello dai file di sistema in modo che il sito venga aggiornato senza drastiche modifiche alla presentazione visiva di il sito.
• Consente la personalizzazione delle funzionalità del sito uniche per quel tema.
• Consente modifiche rapide del design visivo e del layout di un sito WordPress.
• Elimina la necessità per un tipico proprietario di un sito WordPress di dover imparare CSS, HTML e PHP per avere un sito Web di bell’aspetto.

Perché dovresti creare il tuo tema WordPress? Questa è la vera domanda.

• È un’opportunità per saperne di più su CSS, HTML e PHP.
• È un’opportunità per mettere a frutto la tua esperienza CSS, HTML e PHP al lavoro.
• È creativo.
• È divertente (la maggior parte delle volte).
• Se lo rilasci al pubblico, puoi star bene di aver condiviso e restituito qualcosa alla community di WordPress (ok, vantandoti)

Standard di sviluppo dei temi

I temi di WordPress dovrebbero essere codificato utilizzando i seguenti standard:

• Utilizza PHP ben strutturato e privo di errori e HTML valido. Consulta gli standard di codifica di WordPress.
• Utilizza CSS pulito e valido. Consulta Codifica CSS Standard.
• Segui le linee guida di progettazione in Progettazione e layout del sito.

Anatomia di un tema

I temi di WordPress risiedono nelle sottodirectory della directory dei temi di WordPress (wp-content / themes / per impostazione predefinita) che non possono essere spostati direttamente utilizzando il file wp-config.php. La sottodirectory del tema contiene tutti gli stili del tema eet file, file modello e file funzioni opzionali (functions.php), file JavaScript e immagini. Ad esempio, un tema denominato “test” risiederebbe nella directory wp-content / themes / test /. Evita di utilizzare numeri per il nome del tema, poiché ciò impedisce che venga visualizzato nell’elenco dei temi disponibili.

WordPress include un tema predefinito in ogni nuova installazione. Esamina attentamente i file nel tema predefinito per avere un’idea migliore di come creare i tuoi file del tema.

Per una guida visiva, guarda questa infografica su WordPress Theme Anatomy.

WordPress I temi sono in genere costituiti da tre tipi principali di file, oltre a immagini e file JavaScript.

1. Il foglio di stile chiamato style.css, che controlla la presentazione (design visivo e layout) delle pagine del sito web.
2. File modello WordPress che controllano il modo in cui le pagine del sito generano le informazioni dal tuo database WordPress da visualizzare sul sito.
3. Il file delle funzioni opzionali (functions.php) come parte dei file del tema di WordPress.

Esaminiamoli individualmente.

Temi per bambini

Il tema più semplice possibile è un tema figlio che include solo uno stile.css file, più eventuali immagini. Ciò è possibile perché è un figlio di un altro tema che funge da genitore.

Per una guida dettagliata ai temi figlio, vedere Temi figlio.

Tema Foglio di stile

Oltre alle informazioni sullo stile CSS per il tuo tema, style.css fornisce dettagli sul tema sotto forma di commenti. Il foglio di stile deve fornire dettagli sul tema sotto forma di commenti. Non ci sono due temi ha permesso di avere gli stessi dettagli elencati nelle intestazioni dei commenti, in quanto ciò causerà problemi nella finestra di dialogo di selezione del tema Se crei il tuo tema copiandone uno esistente, assicurati di modificare prima queste informazioni.

Quello che segue è un esempio delle prime righe del foglio di stile, chiamate intestazione del foglio di stile, per il tema “Twenty Thirteen”:

NB: il nome usato per l’autore è suggerito essere lo stesso del nome utente wordpress.org dell’autore del tema, sebbene possa essere anche il vero nome dell’autore. La scelta è l’autore del tema.

Nota l’elenco dei tag utilizzati per descrivere il tema. Questi consentono all’utente di trovare il tuo tema utilizzando il filtro dei tag. Puoi trovare un elenco completo nel Manuale di revisione del tema .

Le righe di intestazione del commento in style.css sono necessarie affinché WordPress possa identificare il tema e visualizzarlo nel pannello di amministrazione sotto Design > Temi come un’opzione Tema disponibile insieme a qualsiasi altro tema installato.

Linee guida per i fogli di stile

• Segui gli standard di codifica CSS durante la creazione del tuo CSS.
• Usa CSS valido quando possibile. Come eccezione, utilizza prefissi specifici del fornitore per sfruttare le funzionalità CSS3.
• Riduci al minimo gli hack CSS. L’ovvia eccezione è il supporto specifico del browser, di solito le versioni di IE. Se possibile, separa gli hack CSS in sezioni separate o file separati.
• 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:

• style.css
• index.php

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(); ?></body></html>

Index (index.php)

• Visualizza un elenco di post in formato estratto o integrale. Scegli uno o l’altro in base alle tue esigenze.
• Includi wp_link_pages () per supportare i collegamenti di navigazione all’interno dei post.

Archive (archive.php)

• Visualizza il titolo dell’archivio (tag, categoria, archivio basato sulla data o autore).
• Visualizza un elenco di post in formato estratto o intero. Scegli uno o l’altro in base alle esigenze.
• Includi wp_link_pages () per supportare i link di navigazione all’interno dei post.

Pages (page.php)

• Visualizza il titolo e il contenuto della pagina.
• Visualizza l’elenco dei commenti e il modulo dei commenti (a meno che i commenti non siano disattivati).
• Includi wp_link_pages () per supportare i collegamenti di navigazione all’interno di una pagina.
• I metadati come tag, categorie, data e autore non devono essere visualizzati.
• Visualizza un link “Modifica” per gli utenti che hanno eseguito l’accesso con autorizzazioni di modifica.

Post singolo (single.php)

• Includi wp_link_pages () per supportare i collegamenti di navigazione all’interno di un post.
• Visualizza il titolo e il contenuto del post.
  • Il titolo deve essere un testo semplice anziché un collegamento che punta a se stesso.
• Visualizza la data di pubblicazione.
  • Rispetta le impostazioni del formato di data e ora a meno che non sia importante per la progettazione. (Le impostazioni utente per il formato della data e dell’ora si trovano nei pannelli di amministrazione > Impostazioni Generale).
  • Per l’output basato sull’impostazione dell’utente, utilizza the_time (get_option (“date_format”)).
• Visualizza il nome dell’autore (se appropriato).
• Visualizza le categorie e i tag dei post.
• Visualizza un link “Modifica” per gli utenti che hanno effettuato l’accesso con autorizzazioni di modifica.
• Visualizza l’elenco dei commenti e il modulo dei commenti.
• Mostra i link di navigazione al post successivo e precedente utilizzando previous_post_link () e next_post_link ().

• Il commento dell’autore deve essere evidenziato in modo diverso.
• Visualizza i gravatar (avatar degli utenti) se appropriato.
• Supporta i commenti in thread.
• Visualizza trackback / pingback.
• Questo file non dovrebbe contenere definizioni di funzioni a meno che nel controllo function_exist () per evitare errori di ridichiarazione. Idealmente tutte le funzioni dovrebbero essere in functions.php.

Risultati della ricerca (search.php)

JavaScript

• Il codice JavaScript dovrebbe essere inserito in file esterni quando possibile.
• Usa wp_enqueue_script () per caricare i tuoi script.
• JavaScript caricato direttamente nei documenti HTML (file modello) dovrebbe essere codificato CDATA per evitare errori nei browser meno recenti .

<script type="text/javascript">/* <!]> */</script>

Screenshot

Crea uno screenshot per il tuo tema. Lo screenshot dovrebbe essere denominato screenshot.png e dovrebbe essere posizionato nella directory di primo livello. Lo screenshot dovrebbe mostrare accuratamente il design del tema e salvato in formato PNG. Sebbene .jpg, .jpeg e .gif siano anche estensioni e formati di file validi per lo screenshot, non sono consigliati.

Le dimensioni consigliate per l’immagine sono 1200 px di larghezza per 900 px di altezza. Lo screenshot di solito viene mostrato più piccolo ma l’immagine sovradimensionata consente la visualizzazione ad alta risoluzione su display HiDPI. Tieni presente che poiché la schermata Gestisci temi è reattiva, la parte superiore e inferiore dell’immagine dello screenshot potrebbe non essere visualizzabile, quindi mantieni la grafica vicino al centro.

Opzioni del tema

I temi possono facoltativamente supportare Schermo di personalizzazione del tema. Per un codice di esempio, vedere A Sample WordPress Theme Options Page.

Quando si abilita la disponibilità della schermata di personalizzazione del tema per un ruolo utente, utilizzare la funzionalità utente “edit_theme_options” invece della funzionalità “switch_themes” a meno che il anche il ruolo dell’utente dovrebbe essere in grado di cambiare i temi. Ulteriori informazioni su Ruoli e funzionalità e aggiunta di menu di amministrazione.

Se stai utilizzando la funzionalità “edit_themes” ovunque nel tuo tema per ottenere l’accesso con il ruolo di amministratore alla schermata di personalizzazione del tema (o forse ad alcune schermate personalizzate), essere consapevoli del fatto che dalla versione 3.0, questa capacità non è stata assegnata al ruolo di amministratore per impostazione predefinita nel caso di installazione di WordPress Multisite. Vedi la spiegazione. In tal caso, utilizza invece la funzionalità “edit_theme_options” se desideri che l’amministratore visualizzi il menu “Opzioni tema”. Visualizza le funzionalità aggiuntive del ruolo di amministratore quando utilizzi WordPress Multisite.

Processo di test del tema

1. Correggi gli errori PHP e WordPress. Aggiungi la seguente impostazione di debug al tuo file wp-config.php per vedere le chiamate di funzioni deprecate e altri errori relativi a WordPress: define (“WP_DEBUG”, true) ;. Per ulteriori informazioni, vedere Hook delle funzioni deprecate.
2. Confronta i file modello con l’elenco di controllo dei file modello (vedi sopra).
3. Esegui un run-through utilizzando il Theme Unit Test.
4. Convalida HTML e CSS. Vedere Convalida di un sito Web.
5. Verifica la presenza di errori JavaScript.
6. Esegui il test in tutti i browser di destinazione. Ad esempio, IE9, Safari, Chrome, Opera, Firefox e Microsoft Edge.
7. Pulisci eventuali commenti estranei, impostazioni di debug o elementi TODO.
8. Consulta Revisione del tema se sei pubblicamente rilasciare il tema inviandolo alla directory dei temi.

Risorse e riferimenti

Standard del codice

• Conosci le tue fonti
• Standard di codifica WordPress
• Standard di codifica CSS

Design del tema

• Design e layout del sito

CSS

• CSS
• Abbreviazione CSS
• Classi generate da WordPress

Modelli

• Entrare nei modelli
• Modelli
• Gerarchia dei modelli
• Tag dei modelli
• Il ciclo
• Tag condizionali
• Riferimento alle funzioni
• I18n per sviluppatori WordPress
• Convalida dei dati

Elenco delle funzioni

• Riferimento alle funzioni

Test e QA

• Unità tematica Te st
• Convalida di un sito web
• Correzione di bug del browser CSS
• Risoluzione dei problemi CSS
• modern.IE: per testare IE su piattaforme diverse con -source tools

Rilascio & Promozione

• Processo di revisione del tema