Good Mood

Questo sta per essere un tutorial divertente dove controlliamo come creare il proprio tema WordPress da zero. In realtà, inizieremo con assolutamente zero file e zero righe di codice. L’unico modo per capire come funzionano i temi WordPress è davvero saltare a un livello basso e fare ogni singola cosa da soli. Sì, si è tentati di evitare questo perché si può fare WordPress fare tutto per voi senza alcuna comprensione del codice che lo alimenta., Questo potrebbe essere PHP, JavaScript, CSS o anche l’HTML di base. Entro la fine di questo tutorial a tema WordPress passo dopo passo, capirai come tutto si adatta e come piegare WordPress alla tua volontà con facilità.

Ci sono così tanti temi gratuiti a vostra disposizione quando si esegue un sito web WordPress. Al di là dei temi gratuiti, si potrebbe anche scegliere di pagare un premio per i temi WordPress realizzati professionalmente che sembrano grandi e hanno caratteristiche fantastiche. Allora, perché imparare a creare il proprio tema da zero?, La risposta è che non importa quale tema si sta utilizzando, ci sta per venire un momento in cui si desidera apportare semplici modifiche al tuo sito web. Alcuni di questi cambiamenti potrebbero essere in grado di essere ospitati da un semplice plugin o widget. Molte volte, tuttavia, ha più senso capire cosa vuoi cambiare, come cambiarlo ed evitare di trasformare il tuo sito web WordPress in un pasticcio di plugin e componenti aggiuntivi che diventano ingombranti. Con solo un po ‘ di conoscenza a livello di fondazione, sarete sicuri di modificare il tema, o semplicemente costruire il proprio da zero., Saprai quale file modificare e quale codice aggiungere o modificare per creare il risultato desiderato.

Passo 1: Creare una cartella per contenere i file del tema.

Se stiamo per costruire temi, abbiamo bisogno di sapere dove i file che compongono un tema WordPress vivono in un’installazione di WordPress. Questo è abbastanza facile. Sappiamo che un’installazione di WordPress ha in genere una directory radice denominatawordpress. Ecco come appare la nostra directory root in PHP Storm.,

Questa directory contiene i seguenti file e cartelle:

File

Cartelle

• wp-admin
• wp-content
• wp-includes

La cartella che ci interessa di più in questo momento è il wp-content cartella. All’interno della cartella wp-content è una cartella denominata temi. Sai a cosa serve questa cartella? Sì, esatto! È la cartella che contiene uno o più temi che desideri utilizzare con il tuo sito web WordPress., In questa cartella temi troviamo tre cartelle aggiuntive di twentyfifteen, twentysixteen e twentyseventeen. Queste cartelle contengono i tre temi che WordPress viene fornito con per impostazione predefinita. Si noti di seguito che c’è anche una cartella denominata customtheme. Vai avanti e crea quella cartella anche nella tua installazione in quanto è qui che creeremo il nostro tema WordPress da zero.

Passo 2: Crea stile.css e indice.php nella cartella tema personalizzato

Ora sappiamo dove i file tema WordPress sono nel file system., Abbiamo anche creato una nuova cartella denominata customtheme nella nostra cartella temi. Stiamo ora andando a creare due file vuoti in questa directory. Uno è chiamato indice.php e l’altro si chiama stile.CSS.

Cerchiamo ora di popolare questi file con il minimo indispensabile abbiamo bisogno di ottenere un nuovo tema in corso in WordPress.

stile.css

WordPress legge effettivamente i commenti che inserisci nello stile.file css. Questo è dove si specificano informazioni specifiche sul tema che si sta costruendo.

Lo stile.,css è un foglio di stile (CSS) file richiesto per ogni tema WordPress. Controlla la presentazione (visual design e layout) delle pagine del sito web.

Nel nostro snippet qui assegniamo semplicemente il nome di un tema, l’Autore, l’URI dell’autore e il numero di versione del nostro tema.,

index.,php

In questo file, vogliamo solo produrre qualcosa sullo schermo per dimostrare che il nostro tema personalizzato funziona.

Ottimo Lavoro! Che ci crediate o no, hai creato il tuo primo tema WordPress.,

Passo 3: Attiva il tuo tema dalla Dashboard di WordPress

A questo punto possiamo visitare la nostra Dashboard di WordPress e passare a Aspetto-> Temi ed ecco, vediamo il nuovo tema che abbiamo creato.

Possiamo cliccare su” Dettagli tema ” per approfondire il nostro tema personalizzato e scoprire che le informazioni che avevamo inserito nello stile.il file css ha funzionato. Possiamo vedere che il loro ha un nome di customtheme, con la versione 1.0, dall’autore Vegibit, e un link all’URI che avevamo fornito. Molto forte.,

E ora il momento della verità! Vai avanti e fai clic su “Attiva” sul nuovo customtheme e poi visita il sito. Non sta andando a vincere alcun Webby awards, ma abbiamo noi stessi un buon inizio su un nuovo tema personalizzato!

Passo 4: Aggiungi il codice per produrre il titolo del post e il testo del post

Ci siamo presi la libertà di popolare un paio di post di esempio nel database in modo da poter lavorare con quei dati durante questo tutorial. In questo momento, il nostro tema emette solo tema personalizzato!, alla pagina quando visitiamo il nostro sito, non importa quanti post sono nel database. Passiamo ora a recuperare alcuni dati dal database e inviarli alla pagina. In particolare, vogliamo recuperare il titolo del post e pubblicare il contenuto di tutti i post e visualizzarli sulla home page. Facciamo un tentativo. Per prima cosa vediamo cosa abbiamo per i post nella dashboard di WordPress.

Sfruttando il ciclo di WordPress

Ora possiamo parlare un po ‘ del ciclo di WordPress. Il ciclo di WordPress è davvero il motore che fa funzionare WordPress., È tramite questo ciclo che gli sviluppatori di temi controllano i post e li visualizzano sulla pagina secondo necessità. Se segue il formato come segue. Se il database ha post, facciamo un ciclo su di loro mentre ci sono ancora post, altrimenti faremo sapere all’utente che non ci sono post. Sembra questo nel codice PHP.,

Si noti che il Ciclo fa uso di due funzioni nella sua forma più semplice. Questi sono have_posts () e the_post (). La funzione have_posts () fa solo una cosa. Ti dice se ci sono post nel database da eseguire in loop., Questa funzione restituirà true o false e questo è tutto. Se restituisce true, allora ci sono post disponibili per il ciclo. Se restituiscefalse, non ci sono post da eseguire in loop. L’altra funzione, the_post () non restituisce nulla. Il suo lavoro è quello di ottenere WordPress pronto per i messaggi di uscita. In particolare, recupera il post successivo, imposta il post, imposta la proprietàin_the_loop su true., Finora, la nostra pagina non produrrà ancora alcuna informazione sui nostri post del blog, ma possiamo aggiornarlo ora nel nostro indice.file php.

Ok fresco. Ora abbiamo fatto uso di due funzioni aggiuntive di WordPress, the_title () e the_content (). Molto spesso, queste funzioni vengono utilizzate all’interno del ciclo e ciò che fanno è recuperare il titolo e il contenuto di ogni post mentre il ciclo scorre su ciascuno di essi nel database. Quindi, mentre il ciclo viene eseguito,si imbatterà nel primo post., In quel momento la funzione the_title() emetterà il titolo del post alla pagina e the_content() emetterà il corpo di quel post alla pagina. Nel ciclo successivo queste funzioni recupereranno nuovamente il titolo e il contenuto successivi e li invieranno alla pagina. Quindi, con questi in atto, ora dovremmo vedere alcune informazioni sui nostri post che vengono inviati allo schermo. Proviamo! Visitiamo http://wordpresstutorial.dev e vediamo che funziona!,

Passo 5: Aggiungi un link a ogni post

Che dire del collegamento a ogni singolo post in modo da poter visualizzare un post sul proprio piuttosto che come parte della sola home page. Possiamo farlo abbastanza facilmente, ancora una volta con funzioni speciali che WordPress fornisce. Per questa attività, possiamo utilizzare la funzione the_permalink (). Possiamo aggiornare il nostro codice in questo modo:

Ora, possiamo fare clic sul titolo di ogni singolo post e passare a una pagina che ha solo quel post. Molto cool!,

Passo 6: Aggiungi un’intestazione e un piè di pagina al tema personalizzato

Il titolo e il contenuto del post sono fondamentali per creare un buon tema. Quasi altrettanto importante è avere una sezione di intestazione e piè di pagina del tuo tema. Queste sezioni conterrebbero il contenuto che è sempre visibile su tutte le pagine del sito web. Queste sezioni sono sopra e sotto il contenuto del post. Per fare questo, avete indovinato, faremo uso di funzioni speciali fornite da WordPress per ottenere l’intestazione e per ottenere il piè di pagina. Vedi un modello che inizia a svilupparsi ancora?, Quasi tutto ciò che puoi fare come sviluppatore di temi in WordPress è già stato fatto per te tramite queste funzioni personalizzate. Così troverete che vale la pena di memorizzare queste funzioni comunemente utilizzate nello sviluppo di temi WordPress. Andiamo avanti e aggiungere le funzioni get_header () e get_footer () al nostro file tema ora.

Beh, lo guarderesti?! Possiamo vedere che il nostro tema personalizzato ora ha un’area di intestazione e un’area piè di pagina., Nell’intestazione è il nome e lo slogan del sito mentre nel piè di pagina vediamo il testo familiare, WordPress Tutorial è orgogliosamente alimentato da WordPress. Queste sono le opzioni di intestazione e piè di pagina predefinite quando si utilizzano queste funzioni. Che dire di quando vogliamo avere un’intestazione e un piè di pagina personalizzati? Arrivo subito!

Da 2 file tema a 4

Finora in questo tutorial, abbiamo due file che vivono nella nostra cartella customtheme (che si trova nella cartella temi). Quei file sono di stile.css e indice.PHP. A questo punto, ci accingiamo ad avere bisogno di aggiungere più file per ottenere più avanti., Vai avanti e crea due nuovi file nella cartella customtheme. Questi file saranno convenientemente chiamati intestazione.php e piè di pagina.PHP.

Ora ciò che questi file faranno è sovrascrivere i layout di intestazione e piè di pagina predefiniti forniti di default quando si chiamano le funzioni get_header() o get_footer (). Infatti, se aggiorniamo il nostro sito web, sembra che l’intestazione e il piè di pagina siano spariti. Questo perché non abbiamo ancora aggiunto alcun markup a quei file. Solo per i sorrisi, imposta i file in questo modo per testarlo.

intestazione.,php

footer.,php

Working with header.,php

Il nostro esempio sopra ha funzionato alla grande, e ci mostra come questo file funziona al suo livello più elementare. Intestazione.file php è in realtà molto importante tuttavia, quindi cerchiamo di non sorvolare i dettagli di esso troppo in fretta! È qui che includi il codice a cui tutte le pagine del tuo sito avranno bisogno di accedere in un modo o nell’altro. Per cominciare, tutte le pagine HTML avranno un doctype. Si dovrebbe specificare che in questo file. Inoltre, tutte le pagine avranno un tag html di apertura, una sezione head e un tag body di apertura. Tutto questo può andare nell’intestazione.file php., Aggiungiamo rapidamente alcune di queste cose che tutte le pagine web farebbero uso di. Faremo uso di alcune nuove funzioni di WordPress anche qui. Questi saranno language_attributes (), bloginfo () e body_class ().

intestazione.php

Se ricarichiamo la pagina e quindi visualizziamo l’origine della pagina nel nostro browser, possiamo avere un’idea di ciò che queste funzioni stanno facendo. Evidenziamo le linee che hanno output provenienti da quelle funzioni di seguito:

Ancora una volta, possiamo vedere l’uso molto liberale delle funzioni di WordPress quando si sviluppano i propri temi in WordPress., In realtà, non abbiamo ancora scritto alcun codice personalizzato. Stiamo semplicemente imparando ciò che le varie funzioni di WordPress ci possono offrire, e poi metterli a lavorare nel nostro tema personalizzato.

Incluso wp_head ()

wp_head() è una specie di funzione speciale quando si lavora con temi WordPress. Non è così semplice come tutti gli altri che abbiamo guardato finora. Lo scopo di questa funzione è finalizzare l’output nella sezione <head> dell’intestazione.file php., In realtà è pensato per andare appena prima della chiusura</head> tag. Questo diventa importante quando inizi ad aggiungere vari plugin al tuo sito. Stampa script o dati nel tag head sul front-end. È una buona pratica includere sempre wp_head () nei tuoi temi poiché molti altri plugin possono fare affidamento su questo hook per aggiungere stili, script o meta elementi nell’area <head> del sito. Lo aggiungeremo come tale qui:

intestazione.php

Completamento piè di pagina.,php

Abbiamo finito di aggiungere le basi di ciò di cui avremo bisogno nell’intestazione.file php. Andiamo avanti e completiamo il piè di pagina.file php. Ci sono alcune cose che dobbiamo fare. Ricordiamo che nella nostra intestazione.file php abbiamo tag html e body di apertura. Quelli devono essere chiusi ad un certo punto. Piè.file php è un posto perfetto per farlo. Quindi aggiungeremo i tag di chiusura </html>e</body> oltre a effettuare una chiamata alla funzione wp_footer ().
piè di pagina.,php

Modifica le Informazioni del Sito In WordPress Dashboard

Si potrebbe chiedere perché abbiamo dovuto fare uso di tutti questi fantasia funzioni per costruire il nostro tema. Ad esempio, quando volevamo elencare il nome e lo slogan del nostro sito, abbiamo fatto uso della funzione bloginfo() che passa i parametri di nome e descrizione., La ragione di questo è perché in generale, non si vuole mai codificare questi valori nel tuo sito. Questa è un’informazione che potrebbe cambiare. Inoltre, se rendi il tuo tema disponibile al pubblico, avranno il loro nome e slogan per il loro sito web. Dovrebbero essere in grado di visitare semplicemente la dashboard di amministrazione in WordPress e aggiornare le loro impostazioni generali per vedere questi dati che si popolano automaticamente.

Rendendo il link del titolo del sito alla Homepage

La maggior parte dei temi offrirà la possibilità di fare clic sul testo del titolo del sito web e indirizzare l’utente alla home page del sito., In questo modo, non importa dove l’utente può essere sul sito, possono sempre fare clic sul testo del titolo e tornare alla pagina principale del sito web. Aggiungiamo quel link ora nell’intestazione.PHP.

Passo 7: Aggiungere una funzione.file php al tema

A questo punto, abbiamo quattro file nel nostro tema personalizzato. Quelli sono indice.php, stile.css, intestazione.php, e piè di pagina.PHP. Probabilmente il prossimo file più importante che dobbiamo avere sono le funzioni.file php.

Le funzioni.file php in WordPress fa molte cose per il vostro tema. È il file in cui si inserisce il codice per modificare il comportamento predefinito di WordPress., Si può quasi pensare alle funzioni.php, come forma di plugin per WordPress con un paio di punti chiave da ricordare:

• non richiede l’unico testo di Intestazione
• Memorizzato nella cartella che contiene i file del tema
• viene Eseguito solo quando in attualmente attivato tema della directory
• si Applica solo per il tema corrente
• Possibile chiamare funzioni PHP, WordPress funzioni, o funzioni personalizzate

Una cosa che abbiamo bisogno di male nel nostro tema è un po ‘ meglio styling! Creiamo una funzione nelle nostre funzioni.file php per includere lo stile.file css nel nostro tema., Ecco come possiamo raggiungere questo obiettivo.

Questo pezzo di codice includerà, o renderà attivo, il foglio di stile del nostro tema personalizzato. Ora potresti chiederti perché stiamo usando una funzione personalizzata, quando sembra che potremmo facilmente collegarci manualmente al foglio di stile noi stessi nell’intestazione.file php. Bene, questo si riduce a fare un po ‘ più di lavoro in anticipo per un ritorno più grande sul tuo sforzo più tardi. Man mano che i temi diventano più complessi e vengono aggiunti più risorse, sarai felice di avere questa funzione in grado di gestire tutto il lavoro pesante per te.,

Ora è il momento di rendere le cose un po ‘ più belle. Per prima cosa, aggiungiamo un wrapping <div> con una classe di contenitore. L’apertura <div> sarà nell’intestazione.php, mentre la chiusura <div> sarà in piè di pagina.PHP. Faremo anche avvolgere l’output post in index.php con un<articolo> tag che ha una classe di post. Questo ci darà classi di destinazione nel nostro stile.,file css in modo che possiamo impostare la larghezza della pagina tra le altre cose. Aggiungeremo anche uno stile migliore allo stile.css in questo passaggio.

Passo 8: Aggiungi un po ‘ di stile al tuo tema

header.php
Aggiunta di un’apertura <div> all’intestazione.file php.

piè di pagina.php
Aggiunta di una chiusura </div> al piè di pagina.file php.

indice.php
Avvolgendo l’output del post con un<articolo> tag

stile.,css
Infine, aggiungiamo alcuni vari miglioramenti dello stile CSS per rendere il tema un po ‘ più bello.

Quando visitiamo il nostro sito web di test ora nel browser, possiamo vedere che il tema WordPress che abbiamo sviluppato passo dopo passo in questo tutorial sta cercando abbastanza bene!

WordPress Theme Development Tutorial Passo dopo passo Sommario

Esaminiamo tutto ciò che abbiamo imparato in questo passo di base per passo WordPress Tema tutorial per principianti., Abbiamo imparato come creare il nostro primo tema personalizzato in WordPress creando la nostra cartella sul lato della cartella temi della nostra installazione di WordPress. In questa cartella, abbiamo aggiunto diversi file che corrispondono a diverse sezioni del tuo sito web. Nel nostro tutorial, abbiamo iniziato con i minimi nudi si dovrebbe avere in un tema WordPress. In futuro, si dovrebbe aggiungere molti più file a questa cartella di quello che abbiamo coperto. Esaminiamo ogni file che abbiamo creato in questo tutorial, e quello che hanno fatto per noi.

• stile.,css Questo file è dove si aggiungono alcuni commenti css in modo che WordPress conosce alcune informazioni sul tema personalizzato. Contiene anche lo stile css personalizzato che applicherai al tuo tema.
• indice.php Questo file controlla l’html e l’output generale del tuo tema. È il file principale utilizzato per l’output dei dati sulla tua home page.
• intestazione.,php Permette di specificare un’area di possesso di importanti informazioni circa il vostro sito web nel <testa> area compresa l’apertura <html> <body> e ,<div class=”contenitore”> tag.
• piè di pagina.php Il piè di pagina chiuderà tutti i tag di apertura specificati nell’area dell’intestazione, oltre a darti un posto in cui chiamare la funzione wp_footer ().
• funzioni.,php Ti consente di chiamare funzioni, sia PHP che WordPress incorporato, e di definire le tue funzioni per modificare i comportamenti predefiniti di WordPress

Quindi eccolo! Siamo stati in grado di creare un tema WordPress personalizzato completamente funzionante con solo 5 file. Questo ci dà la conoscenza del livello di base per costruire temi e funzioni WordPress più avanzati. Ottimo lavoro!