In questo articolo impareremo come creare un tema wordpress. Innanzitutto, creeremo un modello HTML + CSS che inseriremo nella struttura del nostro tema wordpress. Dopo aver finito di leggere questo articolo, puoi creare il tuo modello per wordpress, o meglio, lo creerai mentre leggi e completi gli esercizi pratici. Saprai come funziona il tema e sarai in grado di implementare in modo indipendente il nucleo del tema wordpress da altri modelli HTML / CSS. Iniziamo?
Introduzione - struttura del tema wordpress
La struttura di un tema wordpress è estremamente semplice. Nell'oggetto abbiamo un file indice.php,è responsabile dell'assemblaggio dei pezzi della sagoma. Altri sono collegati a questo file: intestazione.php,piè di pagina.php... Questi file (pezzi del modello) vengono utilizzati in qualsiasi pagina del sito. Sappiamo che non tutte le pagine sono costruite secondo lo stesso modello, quindi il tema wordpress ha altri file, come archivi.php o separare.php... Puoi anche creare il tuo tipo di pagine se vuoi che sia completamente diverso dalle altre sul sito. È molto comodo.
Se esamini attentamente la struttura del tema e leggi il contenuto dei file, capirai intuitivamente di cosa si tratta. Ma ci sono ancora alcuni punti che prenderemo in considerazione. Puoi sempre tornare a questa pagina e leggere come è fatto tutto.
Ora diamo un'occhiata alla creazione di un modello in più fasi:
Passaggio 1 - style.css
Un file CSS è un file di parametri e soluzioni di progettazione per gli elementi del modello HTML. Devi rinominare il file css principale (se ne hai più di uno) in stile.css... Successivamente, è necessario aggiungere le seguenti informazioni commentate all'inizio di questo file:
/ * Nome del tema: Typography Paramount Theme URI: http: // site / Descrizione: un modello senza immagini incentrato sulla tipografia..0. Commenti generali / Dichiarazione di licenza se presente. ... * /
Questo codice mostrerà le informazioni sull'argomento per gli amministratori. Assicurati che sia all'inizio del file e che non ci siano spazi bianchi davanti!
Successivamente, ho creato un altro file chiamato 1. css, e mettilo nella cartella tipografia-principale che ho creato nella cartella wordpress del tema. È necessario attenersi rigorosamente a questa struttura in modo che wordpress possa vedere questo file.
Passaggio 2: intestazione e piè di pagina
In questo passaggio creeremo due file: intestazione.php e piè di pagina.php menzionato prima. Sebbene non siano di base e siano opzionali nel tema, vengono utilizzati nella maggior parte dei modelli, quindi li creeremo.
Header.php
Cominciamo con questo file. Crea un file e dagli un nome intestazione.php, quindi incollaci il codice fornito e salva. Questo file verrà visualizzato su tutte le pagine del nostro modello.
Un modello senza immagini incentrato sulla tipografia.
La tipografia fondamentale
Fino ad ora, non c'era niente di speciale in un semplice tema html/css. Ma ora sostituiremo alcuni degli elementi con i tag wordpress.
>
/">
Questi sono solo alcuni dei tag che conosco. Troverai molto di più sul sito ufficiale: codex.wordpress.org.
attributi_lingua ()- Emette il tipo di lingua per il tag .
informazioni sul blog ()- Utilizzato per visualizzare informazioni sul sito, tutti i parametri possono essere trovati nel codice WordPress.
wp_title ()- Restituisce il titolo della pagina.
wp_head()- include javascript e altri elementi necessari.
get_option()- ottiene le opzioni necessarie per lavorare con il database.
Piè di pagina.php
Ora creiamo il cosiddetto "piè di pagina del sito". Crea un file piè di pagina.php e inserisci il seguente codice al suo interno. Questo piè di pagina mostrerà l'anno, il nome del sito e i collegamenti RSS.
phpil_volta ("Y ");?>- visualizza l'anno in corso.
- il nome del blog.
- aggiunta di un link al feed rss del blog.
wp_footer ()- questo è necessario per il nucleo di wordpress stesso, che aggiunge gli elementi di cui ha bisogno lì.
Passaggio 3: file modello wordpress principale
È il momento di creare un file modello wordpress di base che includa la parte superiore e inferiore del sito. Crea un file indice.php... Questo è uno dei due file di temi wordpress richiesti (l'altro è style.css). Incolla il file appena creato con il seguente codice:
Questo codice aiuta wordpress a ottenere informazioni su dove connettersi intestazione.php e piè di pagina.php... Aggiungiamo qualche riga in più tra questi tag:
">
in | |
Ops...
Spiacenti, nessun post che abbiamo "ritrovato.
Questo frammento di codice ottiene informazioni sui post del blog disponibili e, se presenti, li visualizza. Se non vengono trovati, la parte del codice viene visualizzata dopo che ci fa sapere che il blog è ancora vuoto.
Aggiunto anche il tag che visualizza i collegamenti di navigazione in modo che gli utenti possano leggere i post aggiunti in precedenza.
Un esempio di come funziona un tema wordpress
Ora che abbiamo una parvenza di tema, vediamo un esempio di come funziona il tema wordpress creato.
Abbiamo quattro file nel nostro tema, questo è abbastanza per cominciare. Nel prossimo articolo, aggiungeremo il file separare.php che verrà mostrato durante la visualizzazione di un post specifico. Questo file includerà, a differenza del file indice.php.
Se hai ancora domande o malintesi sulla creazione di un modello wordpress (tema), esprimi le tue preoccupazioni nei commenti qui sotto!Se vuoi che il tuo sito wordpress sembri promettente, prima dovresti pensare a creare un tema unico per esso. Questo processo è piuttosto laborioso, perché è direttamente correlato a varie codifiche e script. Smontiamolo da zero.
Quasi tutti i temi wordpress sono installati nella directory wp-content/temi e sono composti da 3 categorie di file:
- file di fogli di stile;
- file di funzionalità aggiuntive;
- file modello.
I file del foglio di stile sono style.css. Sono responsabili del colore, delle dimensioni, del carattere e di altri parametri degli elementi del sito. Ogni sito ha solo 1 file style.css. Se apri questo file, nella parte superiore puoi vedere le informazioni sul titolo, l'autore e una breve descrizione dell'argomento. Quando crei il tuo tema, puoi inserire informazioni su di te in style.css.
La categoria successiva è file di funzionalità aggiuntive. Questi includono functions.php, il cui principio lo fa sembrare un plugin. Grazie a questo file, puoi personalizzare visivamente il tema direttamente nel pannello di amministrazione. Solitamente l'elenco delle impostazioni non è molto ampio (nome del sito, colore di navigazione e pannelli laterali del sito, e così via). Se il tema è multifunzionale, l'elenco delle impostazioni sarà molto più ampio.
Passiamo ora ai file modello. La loro funzione principale è quella di generare pagine richieste dai visitatori del sito. I file modello hanno l'estensione ".php". La maggior parte dei temi di base può contenere solo un file modello chiamato index.php. In questo caso, tutte le pagine del sito saranno identiche. Questo design viene spesso utilizzato per creare risorse Internet con database, quando il design non svolge un ruolo chiave.
Se non hai mai realizzato un design prima, dovresti provare a creare prima un tema semplice. Per il suo normale funzionamento sono necessari almeno 2 dei seguenti file: style.css e index.php.
I file di funzionalità aggiuntive in questo caso non possono essere utilizzati, come capisci. Tra i file modello, index.php è uno dei più flessibili. Può generare in modo indipendente intestazioni, vari blocchi, piè di pagina (piè di pagina), contenuto e altri elementi del sito.
Vale la pena notare che quei parametri che non sono generati dal file index.php verranno generati da file standard. Ad esempio, se il tuo tema è composto solo da 2 dei file di cui sopra, ma l'utente ha bisogno di generare un modulo per l'aggiunta di commenti, questa funzione verrà eseguita dallo standard comments.php. Pertanto, se vuoi che il tuo tema sia più unico, vale la pena creare file modello aggiuntivi. Consideriamo i principali.
- Per aggiungere commenti, hai indovinato, viene utilizzato il modello comments.php.
- Se vuoi creare un popup con commenti, per tali scopi hai bisogno di comments-popup.php.
- Per generare la home page, viene utilizzato home.php.
- Il file single.php è responsabile della visualizzazione degli articoli del sito. Se non hai un file di questo tipo, index.php eseguirà la sua funzione.
- Il file page.php genera le singole pagine del sito.
- Per visualizzare le informazioni sull'autore, è necessario author.php.
- Category.php è responsabile delle categorie.
- La visualizzazione di archivi, data e ricerca è effettuata rispettivamente dai file archive.php, date.php e search.php.
- Affinché il tuo sito visualizzi una pagina di errore 404 univoca, dovrai aggiungere il tuo 404.php.
- Il piè di pagina e il piè di pagina del sito sono generati rispettivamente dai file header.php e footer.php.
Creare un tema unico manualmente da zero
Per prima cosa è necessario installare un modello adatto. Può essere trovato sia sul sito web ufficiale wordpress.org che altrove. Si consiglia di utilizzare il sito ufficiale, poiché qualsiasi terza parte potrebbe contenere file dannosi e collegamenti interrotti.
Una volta effettuata la tua scelta, puoi iniziare a scaricare l'archivio. Alla fine del processo, sarà necessario scompattarlo e caricare i file in cartelle specifiche del sito (l'archivio di solito contiene una piccola istruzione). Il download può essere effettuato utilizzando il programma FileZilla o direttamente dall'hosting, se supporta questa opzione. Ora non ti resta che andare nella sezione "Temi", selezionare quello che hai scaricato e cliccare sul pulsante "Attiva".
Puoi anche selezionarlo direttamente nel pannello di amministrazione di wordpress. In questo caso, non è necessario scaricarlo. Devi solo fare clic sul pulsante "Installa" e quindi su "Attiva". Prima dell'installazione, si consiglia di eseguire un'anteprima.
Ora che il tema è attivato, puoi procedere all'unicità. Il primo passo è pensare alla parte superiore del sito (intestazione). Questa è la prima cosa che attira l'attenzione dei tuoi visitatori, quindi dovresti prenderla in modo responsabile. In genere, l'intestazione è costituita dal nome del sito, dal logo e da brevi informazioni sul contenuto. L'intestazione può essere creata in qualsiasi editor di grafica. Anche in vernice standard. I designer più avanzati utilizzano Adobe Photoshop.
Il nome del sito dovrebbe essere breve e facile da ricordare. Esistono molti stili diversi tra cui scegliere in Adobe Photoshop. Quando crei un logo, potresti aver bisogno di forme diverse. Possono essere scaricati dal sito Web ufficiale di Adobe Photoshop.
Dopo aver disegnato l'intestazione in un editor grafico, dovrai caricarla sul tuo sito web. Al termine del download, verrà visualizzato un URL a destra dell'immagine e dovrà essere copiato. Quindi devi andare alla sezione "Editor" e selezionare il file responsabile della generazione dell'intestazione (header.php). In esso, dovrai trovare l'URL dell'immagine corrente e sostituirlo con quello che hai ricevuto durante il caricamento dell'immagine di intestazione. Successivamente, dovrai aggiornare il file. Ora puoi procedere alla verifica della visualizzazione dell'intestazione.
Se la tua intestazione ha parametri diversi da quello standard, allora possono essere regolati in header.php. La larghezza è controllata dall'attributo larghezza e l'altezza è controllata dall'altezza. Le regolazioni possono essere effettuate in pixel e percentuali. Quindi, se vuoi solo allungare il limite, impostalo al 100%.
Se lo desideri, puoi aggiungere collegamenti attivi alle pagine del sito wordpress nell'intestazione. Questo può essere fatto utilizzando vari servizi. Ce ne sono molti su Internet. La maggior parte di loro funziona secondo lo stesso principio. Delinei l'area desiderata dell'intestazione, che sarà riservata al collegamento, e il servizio ti fornirà il codice di cui hai bisogno. Quindi dovrai aggiungere questo codice al tuo file header.php. Fai attenzione quando lo aggiungi. Ogni punto conta. Se aggiungi il codice nel posto sbagliato, i link attivi non appariranno nell'intestazione.
Dopo aver sostituito l'intestazione standard, puoi iniziare a sostituire lo sfondo del sito wordpress predefinito, i widget, la navigazione, il piè di pagina e altri componenti del sito wordpress. Possono anche essere disegnati in qualsiasi editor grafico e caricati sul sito sotto forma di immagine.
Con te vale la pena considerare che non dovrebbe essere luminoso. La maggior parte dei webmaster preferisce utilizzare uno sfondo bianco. Non fa male agli occhi né distrae dal contenuto principale.
Per creare una navigazione di qualità da zero, hai bisogno di un po' di conoscenza di tag come