Come creare un tema WordPress personalizzato da zero (2022)

Vuoi creare un tema WordPress personalizzato per dare al tuo sito un aspetto unico?

Costruire un tema WordPress era impossibile senza sviluppatori costosi o avere conoscenze di programmazione da soli. Ma oggi, alcuni plugin di WordPress ti danno la possibilità di creare il tuo tema personalizzato usando la semplice funzionalità di trascinamento della selezione.

In questo articolo, ti mostreremo come creare il tuo tema WordPress personalizzato senza scrivere codice.

Per passare a una sezione particolare del tutorial, puoi utilizzare i collegamenti rapidi prima di:

1. Installa il plugin SeedProd
2. Seleziona un modello di tema
3. Personalizza le parti del tuo tema WordPress
4. Connettiti con un servizio di posta
5. Pubblica il tuo tema WordPress personalizzato

Come puoi creare un tema WordPress da zero?

I temi di WordPress sono creati utilizzando una combinazione di PHP, CSS, JavaScript e HTML. Questi sono linguaggi di programmazione che richiedono molta formazione per essere appresi. Quindi, se non fossi tu stesso uno sviluppatore, la tua unica opzione era assumere agenzie di sviluppo per creare temi per te, il che può essere molto costoso.

Ma grazie a SeedProd, ora puoi creare il tuo tema WordPress personalizzato senza codifica. Viene fornito con una semplice interfaccia di trascinamento della selezione che chiunque può utilizzare e ti consente di personalizzare facilmente ogni aspetto del design del tuo tema.

Perché SeedProd?

SeedProd è il plug-in per la creazione di pagine di destinazione più intuitivo per WordPress.

Fornisce un alto livello di personalizzazione e viene fornito con un'ampia varietà di funzionalità extra tra cui:

• Costruttore di temi
• Più di 150 modelli di landing page
• Generatore di trascinamento della selezione
• Integrazioni di email marketing
• 2 milioni di foto d'archivio
• e altro ancora.

Con queste funzionalità, puoi creare rapidamente pagine di destinazione sul tuo sito Web all'interno di un tema WordPress esistente. Ma ora, SeedProd ha aggiunto una nuova funzionalità che ti consente di creare il tuo tema WordPress personalizzato utilizzando lo stesso design drag and drop per la massima facilità d'uso.

Vediamo come puoi creare un tema WordPress usando SeedProd.

Come creare un tema WordPress personalizzato utilizzando SeedProd

Assumiamo che tu abbia già un sito Web WordPress ospitato su un dominio per questo tutorial. In caso contrario, puoi consultare questa guida sulla creazione di un sito Web WordPress.

Se desideri sostituire il tuo tema WordPress esistente con quello che creerai, ti consigliamo di utilizzare un sito di sviluppo di test per questo. In questo modo, non corri il rischio di causare accidentalmente errori sul tuo sito principale. I migliori servizi di hosting WordPress come Bluehost offrono ambienti di sviluppo per WordPress.

Infine, assicurati di eseguire il backup del tuo sito prima di creare il tuo tema. Questo ti assicura di poter sempre ripristinare il tuo sito a uno stato stabile se qualcosa va storto. Puoi trovare varie opzioni in questo elenco di plugin di backup di WordPress.

Dopo aver fatto questi preparativi, è ora di iniziare a creare un tema WordPress personalizzato senza codice!

Passaggio 1. Installa il plug-in SeedProd

Prima di tutto, installa il plugin SeedProd sul tuo sito WordPress. Puoi vedere le istruzioni per l'installazione dei plugin di WordPress se non hai mai installato un plugin prima.

Avrai bisogno almeno della licenza SeedProd Pro per sbloccare la funzione di creazione di temi. Per attivare la licenza Pro, apri l'area del tuo account SeedProd e fai clic sulla scheda Download . Scorri verso il basso per trovare la tua chiave di licenza e copiarla.

Quindi, apri l'area di amministrazione di WordPress e vai su SeedProd »Impostazioni. Quindi inserisci la chiave che hai copiato nel campo Chiave di licenza e premi Verifica .

Ora vai su SeedProd »Costruttore di temi. Questa è la dashboard in cui vivranno tutti i tuoi diversi elementi del tema.

Ora ci sono due modi in cui puoi creare il tuo tema con SeedProd: crea tu stesso ogni singola parte del tuo tema o usa un modello predefinito e modifica le parti che non ti piacciono.

Ogni tema WordPress è composto da diverse parti, tra cui:

• Intestazione
• Piè di pagina
• Pagina iniziale
• Posto unico
• Pagina singola
• Archivio o Pagina del blog
• Barra laterale

Può essere un po' intimidatorio creare ciascuna di queste parti da zero se è la prima volta che crei un tema. In tal caso, c'è un modo più semplice per farlo.

SeedProd viene fornito con vari modelli di temi predefiniti che impostano la struttura generale per il tuo tema completo. In questo modo, tutte le diverse parti vengono automaticamente aggiunte alla struttura, ma puoi comunque personalizzare ciascuna parte in base alle tue preferenze.

Per il resto del tutorial, utilizzeremo uno dei temi di SeedProd per mostrarti i passaggi, poiché questo è il metodo più adatto ai principianti per creare un tema WordPress personalizzato.

Passaggio 2. Seleziona un modello di tema

La funzione di creazione di temi ha più temi predefiniti modellati su siti Web aziendali di diversi tipi. Per visualizzare i temi disponibili, fare clic sul pulsante Temi .

SeedProd viene fornito con modelli per diverse aziende e settori tra cui agenzie di marketing, ristoranti, aziende di cura degli animali domestici e altro ancora.

Utilizzeremo il tema Starter per questo esempio. Non appena selezioni un tema, SeedProd creerà automaticamente tutte le singole parti del tema.

Puoi anche disattivare diverse parti del tema se non ne hai bisogno per il tuo sito web. Per disabilitare qualsiasi sezione, puoi utilizzare i pulsanti di commutazione sotto l'intestazione Pubblicato.

Puoi modificare le impostazioni per ciascuna parte del tuo tema facendo clic sul pulsante Modifica condizioni .

Si aprirà una modale in cui puoi modificare il nome, il tipo, la priorità e configurare le condizioni per quando e dove questa parte dovrebbe apparire sul tuo sito web.

Nella maggior parte dei casi, puoi lasciare queste impostazioni predefinite e passare alla personalizzazione di ciascuna parte del tema.

Passaggio 3. Personalizza le parti del tuo tema WordPress

Ora che tutti i componenti essenziali del tuo tema sono stati definiti, possiamo personalizzare il design di ciascuno in modo che appaia esattamente come vogliamo.

Per iniziare a modificare, sposta il cursore su una parte del tema e fai clic su Modifica design .

Per questo tutorial, personalizzeremo l'intestazione, il piè di pagina, la home page e la pagina del blog. Gli stessi principi di personalizzazione si applicano a tutte le altre pagine.

Intestazione e piè di pagina

Per iniziare a modificare l'intestazione, fai clic sul pulsante Modifica design che appare quando passi il mouse sopra l'intestazione. Questo ti porterà all'interfaccia del generatore di temi drag and drop di SeedProd. Punta e fai clic sull'area dell'intestazione per aprire le opzioni di personalizzazione, che appariranno nel riquadro di sinistra.

Per impostazione predefinita, l'intestazione ha il logo di SeedProd. Puoi sostituirlo con il logo della tua attività molto facilmente. Clicca sull'immagine per eliminarla o sostituirla caricando il tuo logo.

SeedProd ti consente di modificare le dimensioni e l'allineamento del tuo logo. Puoi anche aggiungere un link personalizzato al logo. Ad esempio, potresti voler reindirizzare gli utenti alla home page quando fanno clic sul logo.

Puoi anche cambiare il colore di sfondo dell'intestazione. Sposta semplicemente il mouse sull'area dell'intestazione finché non vedi un contorno blu. Fare clic per trovare un nuovo menu di opzioni nel pannello di sinistra. Ora puoi cambiare il colore dell'intestazione e scegliere un colore solido o anche una sfumatura.

Ora, fai clic sulla scheda Avanzate per accedere a più impostazioni come ombra, spaziatura, bordo, posizione e altro.

Quando hai finito di apportare tutte le modifiche, fai clic sul pulsante Salva in alto a destra del builder e fai clic sul pulsante a croce per uscire dalla dashboard del generatore di temi principale.

Se desideri includere un'intestazione nel tuo sito, puoi ripetere questi stessi passaggi per modificare il design del tuo piè di pagina.

Successivamente, modificheremo la home page.

Pagina iniziale

La home page è la parte anteriore del tuo sito web. Normalmente, contiene elementi importanti che definiscono chi sei, cosa fai e forniscono prove sociali attraverso recensioni e testimonianze.

Il modello del tema iniziale che stiamo utilizzando ha tutte le sezioni chiave che normalmente troverai nella home page di un sito Web aziendale, tra cui:

• Zona Eroe
• Sezione caratteristiche
• Testimonianze
• Sezione FAQ

Puoi modificare ogni blocco di questa pagina, comprese le immagini, il testo, i pulsanti, i colori e il layout.

Nella gif qui sotto, ti mostreremo quanto sia facile modificare diverse parti della pagina usando semplici azioni di trascinamento della selezione.

Usa le impostazioni e i blocchi nel menu a sinistra per modificare il design finché non sei completamente soddisfatto. Dopo aver apportato tutte le modifiche, assicurati di controllare l'anteprima mobile.

Se qualsiasi elemento del sito sembra interrompersi nella visualizzazione mobile, puoi tornare alla modifica e apportare modifiche finché non appare perfetto.

Quando sei soddisfatto della tua home page, premi il pulsante Salva e torna alla dashboard del generatore di temi SeedProd.

Pagina del blog

Ora creiamo una pagina blog personalizzata per il tuo sito. Nella dashboard del generatore di temi, fai clic sul collegamento Modifica design nella sezione Indice blog, Archivi, Ricerca per iniziare a modificarlo.

Qui puoi aggiungere o rimuovere diversi elementi come il contenuto del post, l'estratto, la biografia dell'autore e molto altro usando l'interfaccia di trascinamento della selezione. Fare clic su uno dei post visualizzati in questa pagina per accedere a più impostazioni.

Queste impostazioni ti consentono di modificare il tipo di query dei post, il layout, l'impaginazione. Puoi anche modificare i dettagli aggiuntivi di controllo che dovrebbero apparire con ogni post come la data del post, l'autore, l'immagine in primo piano, l'estratto e altro.

Dopo aver personalizzato la pagina del blog, fai clic su Salva e torna nuovamente alla dashboard.

CSS globale

La sezione CSS globale configura le impostazioni globali per i colori, la tipografia, il layout e lo stile del tuo tema.

Dalla dashboard di Theme Builder, fai clic su Modifica design nella sezione CSS globale del tuo tema.

Ad esempio, puoi scegliere il colore e il carattere del pulsante che desideri vengano visualizzati nell'intero sito.

Allo stesso modo, puoi modificare i caratteri del testo, gli sfondi, il layout e persino aggiungere CSS personalizzati al tuo tema. Queste modifiche si applicheranno all'intero sito e garantiranno coerenza stilistica.

Quando hai finito di regolare le impostazioni a tuo piacimento, fai clic sul pulsante Salva .

Passaggio 4. Connettiti con un servizio di posta

SeedProd ti consente di connetterti con il tuo servizio di email marketing, che è un passaggio importante se desideri includere un modulo di iscrizione o iscrizione nel tuo tema.

Infatti, se hai WPForms installato sul tuo sito, si integra automaticamente con SeedProd. Quindi puoi incorporare qualsiasi modulo che hai creato con WPForms all'interno di qualsiasi parte del tuo tema usando SeedProd.

Dopo aver creato un modulo, devi assicurarti che il tuo servizio di email marketing sia collegato a SeedProd in modo da poter inviare e ricevere e-mail relative al modulo.

Per collegare il tuo servizio di email marketing con il tuo tema SeedProd, fai clic sulla scheda Connetti nella barra in alto della schermata del generatore di temi mentre stai modificando qualsiasi parte del tema.

Fai clic su qualsiasi mailer dall'elenco e segui le istruzioni sullo schermo per completare l'integrazione con il tuo tema SeedProd. Al termine, le voci del modulo di attivazione verranno automaticamente aggiunte alla tua mailing list.

Passaggio 5. Pubblica il tuo tema WordPress personalizzato

Il tuo tema è ora pronto per essere distribuito! Per portare il tuo tema in diretta, vai alla dashboard del generatore di temi e fai clic sul pulsante di attivazione/disattivazione del tema SeedProd nell'angolo in alto a destra dello schermo.

Ora, diamo un'occhiata al nostro tema WordPress personalizzato appena creato!

Questa è la homepage del tema con l'intestazione:

Ed ecco la pagina del blog.

E questo è tutto! Hai appena creato il tuo primo tema WordPress personalizzato senza codice!

Quindi, crea moduli di contatto per il tuo sito WordPress

Ora che hai un nuovo sito WordPress, dovresti considerare di aggiungere moduli di contatto per consentire ai visitatori di raggiungerti facilmente. WPForms è il generatore di moduli WordPress più intuitivo con oltre 5 milioni di installazioni attive.

Non solo puoi far crescere la tua mailing list con WPForms, ma anche svolgere una serie di altre attività come la raccolta di donazioni per il tuo no profit.

Crea il tuo modulo WordPress ora

Pronto a costruire il tuo modulo? Inizia oggi con il plug-in per la creazione di moduli di WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti ha aiutato, seguici su Facebook e Twitter per ulteriori tutorial e guide WordPress gratuiti.