Crea il tuo tema WordPress

Negli articoli precedenti, abbiamo esaminato come personalizzare un sito Web WordPress, creare temi o modelli figlio personalizzati.

Oggi vedremo come creare il tuo tema WordPress. Muoviamoci!

Perché creare il tuo tema WordPress?

WordPress offre diversi modi per personalizzare il tuo sito web. Quindi, perché dovresti sentire il bisogno di creare il tuo tema? In alcuni casi, i temi standard potrebbero non adattarsi al design del tuo marchio o avere le funzioni di cui hai bisogno. Un tema personalizzato potrebbe risolvere questo problema e darti esattamente lo stile del sito che desideri con tutte le funzioni di cui hai bisogno senza dover fare affidamento su un tema di terze parti.

Requisiti prima di creare un tema

Per essere in grado di replicare i seguenti passaggi nell'esempio seguente, è necessario disporre di un'installazione di WordPress configurata e pronta per l'uso, in locale o in uno spazio server da te amministrato. Non provarlo su un sito live. Crea invece un ambiente di test.

Sono inoltre richieste una conoscenza pratica e comprensione di CSS, PHP e HTML.

Crea il tema

Chiameremo il nostro tema "Il mio primo tema". Il primo passo è creare i file necessari affinché il tema sia visibile nell'area di amministrazione. Per fare ciò creeremo un file style.css e index.php.

Creiamo una sottocartella per il nostro tema, nella cartella wp-content/themes/ che chiamiamo "il mio primo tema" e aggiungiamo questi 2 file a quella cartella.

A questo punto il tema dovrebbe essere visibile come scelta nell'area di amministrazione.

Se uno di questi file manca, riceverai un messaggio di avviso che il tema è rotto. Ad esempio, se manca index.php vedrai qualcosa del genere:

All'interno del file style.css aggiungeremo alcuni commenti che raccontano a WordPress il nostro tema. L'informazione più importante è il nome sotto cui sarà elencata. Oltre a questo, puoi dire chi è l'autore o fornire un URI dell'autore in modo che gli utenti possano visitare un sito Web per saperne di più sul tuo tema. Fornisci una descrizione da visualizzare nel popup modale del tema di amministrazione e nella versione dell'installazione.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

NOTA: puoi anche definire la tua licenza. Se vuoi che il tuo tema sia distribuito su WordPress, il tuo tema deve essere compatibile con GPL.

Se devi visualizzare un'immagine del logo, inserisci un file screenshot.png nello stesso spazio in cui si trovano i file style.css e index.php.

Ora se attivi il tuo tema nella schermata di amministrazione dei temi dovresti vedere qualcosa del genere:

E se fai clic su "Dettagli tema" dovresti vedere questo:

File di temi

Ora è il momento di scrivere del codice nel file index.php. A titolo di prova, apri il file con il tuo editor preferito e inserisci qualsiasi tipo di elemento HTML, ad esempio

 <h1>My First Theme's Content</h1>

Salva il file e visita il front-end. Dovresti vedere solo l'intestazione "Contenuti del mio primo tema"

A questo punto, devi decidere quale layout avrà il tuo tema.

Disposizione del tema

I percorsi da seguire da qui sono illimitati. Ti consigliamo vivamente di prenderti il ​​tuo tempo e studiare come funzionano i temi di WordPress. Ancora più importante, assicurati di comprendere appieno la gerarchia dei modelli prima di procedere con la strutturazione del tuo tema.

Ospita il tuo sito web con Pressidium

GARANZIA DI RIMBORSO DI 60 GIORNI

GUARDA I NOSTRI PIANI

In poche parole, ciò che fa WordPress è fornire un modo per chiamare diversi file php in base al tipo di contenuto. Questo si ottiene con le query. Una query controlla se la pagina attualmente visualizzata contiene post o è una pagina dei risultati di ricerca o qualsiasi altro tipo di contenuto e restituisce il codice corrispondente.

Un classico esempio è separare l'intestazione e il piè di pagina creando singoli file per ciascuno di essi. Per vedere un esempio molto semplificato di come puoi farlo tu stesso, inserisci questo pezzo di codice nel file index.php.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Questo codice, utilizzando le funzioni WordPress costruite con wp_head() e wp_footer(), fornisce un layout di contenuto predefinito che include un'intestazione con logo, titolo e menu, il corpo principale in cui le query mostreranno il contenuto corretto e un piè di pagina contenente le informazioni del sito.

Se desideriamo dividere questo codice e utilizzare file header.php e footer.php separati, allora dovresti creare i file nella cartella del tema.

E dividi il codice in questo modo:

Indice.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Piè di pagina.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

E questo è tutto! Hai creato il tuo primo tema!

Temi iniziali

Abbiamo visto sopra come creare un tema manualmente... quali file dovrebbero essere creati e quale codice puoi includere. Se hai già familiarità con questo, puoi risparmiare tempo scaricando un tema di base per WordPress in pochi secondi. Prova ad esempio Underscore, dove puoi semplicemente dare un nome e scaricare subito il file zip del tema.

Fantastico, vero?

Conclusione

Un tema WordPress personalizzato è un'ottima soluzione quando hai bisogno di maggiore flessibilità come sviluppatore. La creazione di un tema può sembrare un processo scoraggiante. Si spera che, come ha dimostrato questo articolo, in realtà sia abbastanza facile da fare. La chiave è non avere fretta prima di iniziare a programmare. Fai un passo indietro, studia la struttura del tema che soddisfa le tue esigenze e poi fallo.