Come creare un tema WordPress personalizzato in 5 passaggi senza codice

Vuoi creare un tema WordPress personalizzato per il tuo sito web?

La creazione del tuo tema WordPress da zero implicava la scrittura di codice complesso o l'assunzione di sviluppatori di temi per creare un tema per te. Ma grazie ai generatori di temi WordPress nuovi e facili da usare, chiunque può creare un tema WordPress personalizzato senza scrivere codice.

Questo articolo ti mostrerà come creare un tema personalizzato in WordPress passo dopo passo.

Che cos'è un tema WordPress?

I temi WordPress sono file modello scritti in PHP, HTML, CSS e JavaScript. Ogni file lavora insieme per creare il design e la funzionalità del tuo sito WordPress.

Un tipico tema WordPress includerà alcuni, se non tutti, i seguenti file di temi:

• footer.php
• header.php
• index.php
• pagina.php
• sidebar.php
• archivio.php

I temi WordPress includono anche un file functions.php e un file style.css.

In genere, avresti bisogno di una solida conoscenza di diversi linguaggi di web design o di uno sviluppatore web per creare un tema WordPress personalizzato.

Creazione di temi WordPress personalizzati per principianti

Se assumi uno sviluppatore o un'agenzia di sviluppo web, il costo della creazione di un tema personalizzato da zero può essere di migliaia di dollari. Poiché molte piccole imprese non possono permettersi il costo, si accontentano dei temi WordPress predefiniti forniti con la piattaforma.

Tuttavia, se sei il proprietario di un sito Web che non vuole accontentarsi delle impostazioni predefinite, puoi utilizzare un framework per temi, come ad esempio Genesis di StudioPress, o un plug-in per la creazione di pagine di WordPress per creare un tema personalizzato per il tuo sito WordPress.

I framework dei temi WordPress semplificano la creazione di un tema WordPress gestendo automaticamente gran parte del design e delle funzionalità. Tuttavia, sono ancora una soluzione alquanto complicata, ad esempio richiedono temi figlio, quindi sono migliori per gli sviluppatori piuttosto che per il proprietario medio di un sito web.

D'altro canto, i page builder di WordPress semplificano la creazione di layout di pagina personalizzati utilizzando un'interfaccia di trascinamento della selezione, ma hanno anche i loro limiti. I page builder ti consentono solo di creare layout e in genere non puoi usarli per creare temi personalizzati.

Fino a quando SeedProd, il miglior costruttore di siti Web WordPress per temi personalizzati, ha deciso di risolvere questo problema con il suo generatore di temi WordPress.

Che cos'è il generatore di temi SeedProd?

SeedProd è già un potente generatore di pagine drag-and-drop utilizzato da oltre 1 milione di proprietari di siti Web. Ma con il suo generatore di temi, qualsiasi utente non tecnico può creare un tema WordPress completamente personalizzato senza codice.

Invece di manipolare file di contenuto wp, puoi creare temi da zero con pochi clic. SeedProd creerà anche automaticamente il tuo foglio di stile.

SeedProd viene fornito con:

• Interfaccia visiva drag-and-drop
• Oltre 150+ modelli Pro
• 2 milioni di foto d'archivio
• Supporto WooCommerce
• Dashboard di gestione degli abbonati
• Integrazioni di email marketing

E tante funzionalità e widget aggiuntivi necessari per creare rapidamente un sito Web personalizzato utilizzando WordPress.

Con questo in mente, diamo un'occhiata a come creare un tema WordPress personalizzato senza scrivere una singola riga di codice usando SeedProd.

Come creare un tema WordPress personalizzato senza codice

Per creare un tema WordPress personalizzato con SeedProd, avrai prima bisogno di un sito Web WordPress per installare il plug-in SeedProd. Se non disponi già di un'installazione di WordPress, puoi seguire questi passaggi per imparare a creare un sito Web WordPress.

Il tuo sito web dovrebbe anche avere un semplice tema WordPress installato. Puoi trovare molte soluzioni gratuite nella directory dei temi di WordPress. Non dovrai preoccuparti dell'aspetto del tema perché SeedProd lo sovrascriverà quando pubblicherai le tue personalizzazioni.

È anche una buona idea utilizzare un ambiente di sviluppo quando cambi il tema di WordPress per evitare di rompere accidentalmente il tuo sito web. Le società di hosting WordPress popolari come BlueHost offrono ambienti di test per impostazione predefinita.

Dovresti anche eseguire il backup del tuo sito Web prima di apportare modifiche importanti. Ecco un elenco dei migliori plugin di backup di WordPress che puoi utilizzare.

Una volta che il tuo sito WordPress è pronto, segui i passaggi seguenti per creare un tema WordPress personalizzato senza codice.

Passaggio 1. Installa e attiva SeedProd

Il primo passo è installare e attivare il plug-in per la creazione di siti Web SeedProd. Per accedere alla funzione di creazione temi, avrai bisogno di una licenza SeedProd Pro o Elite.

Dopo aver scaricato il file zip del plug-in SeedProd sul tuo computer, caricalo, installalo e attivalo sulla dashboard di WordPress. Se hai bisogno di aiuto con questo passaggio, segui questa guida sull'installazione di un plugin per WordPress.

Dopo aver installato SeedProd, vai a SeedProd ≫ Impostazioni dall'area di amministrazione di WordPress e inserisci la tua chiave di licenza SeedProd.

Puoi trovare la tua chiave di licenza visitando l'area del tuo account SeedProd e copiandola dalla scheda Download.

Ora puoi andare su SeedProd ≫ Theme Builder e vedere la panoramica di Theme Builder. Qui è dove puoi creare una gerarchia di modelli per il tuo tema WordPress.

In altre parole, è qui che puoi creare tutte le singole parti che compongono il tuo tema, come le seguenti:

• Intestazione
• Piè di pagina
• Posto unico
• Pagina singola
• Archivio (Pagina blog)
• Pagina iniziale
• Barra laterale

Puoi creare ciascuna di queste parti del tema individualmente facendo clic sul pulsante Aggiungi nuovo modello di tema .

Ma se sembra troppo opprimente per il tuo primo tentativo, c'è un altro modo per creare il tuo tema.

Puoi utilizzare i modelli di temi predefiniti di SeedProd per creare rapidamente la struttura di base per il tuo tema e personalizzarli in base alle tue esigenze di progettazione, senza codice. Poiché questa soluzione è semplicissima per i principianti, è su questo che ci concentreremo in questo tutorial.

Nota: SeedProd offre anche centinaia di modelli di pagine di destinazione reattivi per aiutarti a creare pagine di destinazione personalizzate.

Passaggio 2. Scegli un modello di tema

Il generatore di temi di SeedProd ha già diversi temi creati per te. Per trovarli, fai clic sul pulsante Temi .

Al momento della stesura di questa guida, sono disponibili 9 modelli di temi, tra cui:

1. Tema iniziale
2. Affari moderni
3. Agenzia di marketing
4. Tema di progettazione del prodotto
5. Azienda per la cura degli animali domestici
6. Tema della strategia digitale
7. Tema di musica dal vivo
8. Tema del broker ipotecario
9. Tema del ristorante

Per scegliere un modello di tema per il tuo sito web, passa il mouse sulla miniatura e fai clic sull'icona del segno di spunta. Per questa guida, utilizzeremo il tema iniziale SeedProd.

Dopo aver scelto il tuo modello, SeedProd crea automaticamente tutte le parti che compongono il tuo tema.

Se c'è una caratteristica specifica che non desideri mostrare sul tuo sito web, puoi fare clic sull'interruttore sotto l'intestazione Pubblica e disattivare quella parte del tema.

Se fai clic sul collegamento delle condizioni per ciascuna parte del modello, puoi cambiarne il nome, il tipo, la priorità e scegliere quando e dove appare sul tuo sito web.

Passaggio 3. Personalizza le parti del tuo tema WordPress

Con gli elementi costitutivi di base del tuo tema in atto, ora è il momento di iniziare a modificare ogni sezione del tema per creare un tema WordPress davvero personalizzato per il tuo sito.

Per modificare qualsiasi sezione del tema, passaci sopra con il mouse e fai clic sul collegamento Modifica design .

Inizieremo modificando l'intestazione.

Intestazione e piè di pagina

Quando modifichi una sezione del tema in SeedProd, ti dirigerai al suo generatore di trascinamento della selezione visivo. Puoi personalizzare l'intestazione del tuo tema su questa schermata semplicemente puntando e facendo clic.

Come puoi vedere, il tema iniziale viene fornito con un'intestazione di 2 colonne con un logo e un menu di navigazione. Puoi personalizzarlo per mostrare il tuo logo personalizzato facendo clic sul logo nell'anteprima dal vivo.

Da lì, puoi eliminare il logo segnaposto nel pannello di sinistra e caricarne uno nuovo dal tuo computer o dalla libreria multimediale di WordPress.

Puoi regolare le dimensioni e l'allineamento del tuo logo nello stesso pannello e aggiungere un link personalizzato, come l'URL del tuo sito web principale.

Se desideri modificare il colore di sfondo dell'intestazione, passa con il mouse sulla sezione dell'intestazione finché non presenta un contorno viola, quindi fai clic su di essa per visualizzare le impostazioni della sezione nel pannello di sinistra. Da lì, puoi dare alla tua intestazione un colore di sfondo personalizzato, un'immagine e scegliere la larghezza dell'intestazione.

E nella scheda Avanzate , puoi personalizzare l'ombreggiatura, la spaziatura, il bordo e altro dell'intestazione.

Quando sei soddisfatto della tua intestazione WordPress personalizzata, fai clic sul pulsante Salva nell'angolo in alto a destra e torna al generatore di temi.

Ora ripeti questi passaggi per modificare il piè di pagina di WordPress. Fare clic su Modifica design per aprirlo nell'editor visivo e fare clic su qualsiasi elemento per personalizzare il contenuto, i colori, i collegamenti e altro ancora.

Pagina iniziale

Successivamente, personalizzeremo la home page del tuo sito WordPress, che spesso è la prima pagina che gli utenti vedono quando visitano il tuo sito web. Quindi apri la sezione Homepage nell'editor visivo.

Poiché abbiamo già personalizzato il design dell'intestazione e del piè di pagina, vedrai i tuoi nuovi design nella parte superiore e inferiore della tua home page. Ma non preoccuparti, le modifiche che apporti in questa schermata non influiranno sull'intestazione o sul piè di pagina; sono semplicemente lì come guida visiva.

Il modello di tema iniziale di SeedProd ha tutte le funzionalità di cui la maggior parte dei siti Web aziendali ha bisogno, tra cui:

• Zona Eroe
• Loghi dei clienti
• Caratteristiche
• Testimonianze
• Sezione FAQ

Proprio come l'intestazione, puoi personalizzare ogni centimetro per renderlo unico. Iniziamo cambiando l'area dell'eroe.

L'area degli eroi ha le seguenti caratteristiche:

• Sezione
• Disposizione a 2 colonne
• Immagine
• Intestazione
• Testo
• Pulsante

Per modificare l'immagine predefinita, fai semplicemente clic su di essa e carica una nuova immagine, come hai fatto con il tuo logo.

Puoi anche modificare il titolo e la descrizione facendo clic su ciascun blocco e sostituendo il contenuto con il tuo testo personalizzato.

Se fai clic sul blocco pulsanti, puoi modificare il testo del pulsante, il collegamento, l'allineamento e altro.

Puoi trovare tutti questi elementi nel pannello dei blocchi di sinistra. In questo modo, puoi trascinare un blocco da sinistra e rilasciarlo sul tuo design per aggiungere più contenuti al tuo tema.

Segui questo processo per personalizzare il resto della tua home page finché non riflette la tua attività. Ad esempio, puoi aggiungere informazioni sui servizi della tua azienda o evidenziare le caratteristiche del tuo prodotto nella sezione delle caratteristiche.

Quindi puoi utilizzare il blocco Testimonianze integrato di SeedProd per aggiungere prove sociali positive dai tuoi clienti e clienti esistenti.

Abbiamo anche cambiato il colore di sfondo di questa sezione in modo che corrisponda all'intestazione del tema aprendo le impostazioni della sezione e scegliendo un colore diverso.

Dopo aver personalizzato la tua home page, puoi fare clic sull'icona di anteprima mobile per vedere come appare il tuo design sui dispositivi mobili.

Se qualcosa non funziona, puoi spostare le cose finché lo schermo del tuo cellulare non offre una buona esperienza utente.

Quando sei soddisfatto dell'aspetto della tua home page, fai clic sul pulsante Salva e torna al generatore di temi.

Pagina del blog, post singoli e pagine

È probabile che tu voglia includere una pagina personalizzata per i post del blog nel tuo nuovo tema WordPress. La buona notizia è che SeedProd ha una parte tematica che puoi personalizzare specificamente per quello scopo.

Quella sezione è chiamata Indice blog, Archivi, Cerca nel generatore di temi. Ti consente di personalizzare la pagina dei post del tuo blog, gli archivi dei post e la pagina dei risultati di ricerca in modo che corrispondano al resto del marchio del tuo sito web.

Quindi fai clic sul collegamento Modifica design per aprire questa parte del tema nel generatore di trascinamento della selezione.

In questa pagina, il tema iniziale utilizza i tag modello per estrarre informazioni dinamiche da WordPress, inclusi il titolo dell'archivio e i post. Quando fai clic su uno di questi blocchi, vedrai le loro impostazioni nel pannello di sinistra.

Ad esempio, quando fai clic sul tag del modello Post, puoi visualizzare i post per impostazione predefinita, personalizzati (post, media o post personalizzati) o manualmente digitando parametri di query specifici.

Puoi anche scegliere il numero di colonne, post per pagina, mostrare o nascondere l'immagine in primo piano, mostrare un estratto e molto altro.

Dopo aver personalizzato l'archivio o la pagina del blog, torna al generatore di temi e modifica la sezione Post singoli .

Questa parte del tema utilizza i seguenti tag modello per estrarre informazioni sui singoli post di WordPress:

• Titolo del post
• Informazioni sul post
• Contenuti del post
• Casella dell'autore
• Pubblica commenti
• Posta navigazione

Puoi modificare ciascuno di questi blocchi come faresti con qualsiasi altro blocco SeedProd. Basta fare clic su qualsiasi elemento e personalizzarlo nel pannello delle impostazioni.

Ad esempio, se fai clic sul blocco Post Info , puoi aggiungere più metainformazioni, modificare l'allineamento e regolare i colori delle icone.

Barra laterale

Molti siti Web WordPress utilizzano ancora le barre laterali per visualizzare informazioni importanti ai visitatori come i loro profili sui social media, gli ultimi post e la casella di iscrizione alla newsletter. Ma a differenza di molti temi WordPress predefiniti, puoi utilizzare SeedProd per creare una barra laterale WordPress personalizzata con i suoi blocchi visivi.

Per fare ciò, fai clic su Modifica design nella parte del modello della barra laterale. Da lì, puoi trascinare e rilasciare qualsiasi contenuto che ti piace sul design della barra laterale.

Il tema iniziale include una casella di ricerca, icone di social media e categorie di post per impostazione predefinita. Ma puoi aggiungere tutto ciò che ti piace qui. Ad esempio, potresti voler visualizzare un elenco di post recenti del blog o un'immagine che collega a un partner affiliato.

Puoi anche utilizzare il blocco del modulo di attivazione di SeedProd e raccogliere indirizzi e-mail per ampliare la tua lista, direttamente nella barra laterale. La cosa migliore è che non avrai bisogno di alcuna conoscenza tecnica per farlo accadere.

CSS globale

A questo punto, hai creato la maggior parte del tuo tema WordPress personalizzato senza codice. Ma c'è un'altra parte che dovresti considerare per assicurarti che tutto sia coerente nel tuo tema.

Questo è il tuo CSS globale , che controlla lo stile, la tipografia, i colori e il layout globali del tuo tema. Quindi fai clic su Modifica design su quella parte del tema per aprirla nell'editor di pagina.

Come puoi vedere, questa pagina ti dà il controllo su gran parte dello stile del tuo tema. Nel pannello di sinistra ci sono sezioni per:

• Colori
• Caratteri
• Sfondo
• Bottoni
• Le forme
• Disposizione
• CSS personalizzato

Ad esempio, puoi aprire la sezione Pulsanti e scegliere un colore personalizzato. Quindi quel colore apparirà su ogni pulsante del tuo tema.

Puoi fare lo stesso nell'intestazione Caratteri e assegnare un colore personalizzato per ogni collegamento nel tuo tema.

Quindi vai avanti e modifica queste impostazioni finché il tuo tema non appare esattamente come desideri, quindi fai clic sul pulsante Salva per memorizzare le modifiche.

Passaggio 4. Collega il tuo servizio di email marketing

Se uno dei tuoi obiettivi aziendali è far crescere la tua lista e-mail, è probabile che tu abbia aggiunto un modulo di iscrizione da qualche parte nel design del tuo tema WordPress. Ma per aggiungere automaticamente nuovi contatti alla tua lista, dovrai collegare il tuo modulo al tuo servizio di email marketing.

SeedProd si integra direttamente con molti popolari servizi di email marketing, come Constant Contact, Mailchimp, Drip, ecc. Ed è un gioco da ragazzi collegarsi al tuo account.

Basta modificare qualsiasi parte del tema e fare clic sulla scheda Connetti nella parte superiore dello schermo.

Quindi, fai clic su qualsiasi integrazione dall'elenco e segui le istruzioni sullo schermo. Di conseguenza, chiunque compili il tuo modulo di attivazione verrà automaticamente aggiunto alla tua lista e-mail.

Passaggio 5. Abilita il tuo tema WordPress personalizzato

Il passaggio finale nella creazione di un tema WordPress personalizzato con SeedProd è rendere il tema attivo sul tuo sito web. Per fare ciò, trova l' intestazione Abilita tema SeedProd nell'angolo in alto a destra e sposta l'interruttore sulla posizione "on".

Il tuo nuovo tema sostituirà il tuo tema predefinito, permettendoti di vedere le tue personalizzazioni sul front-end del tuo sito web.

Questo è tutto! Il tuo nuovo tema WordPress personalizzato è attivo sul tuo sito web. Vediamo come appare.

Ecco la home page con la tua nuova intestazione e piè di pagina:

Ecco la pagina del blog con la barra laterale personalizzata di WordPress:

Congratulazioni!

Ora sai come creare un tema WordPress personalizzato senza codice.

Con il generatore di temi WordPress facile e potente di SeedProd, non avrai bisogno di alcuna esperienza tecnica, sviluppatori WordPress o un budget enorme per creare un tema WordPress personalizzato.

La potenza e la funzionalità sono nelle tue mani nel momento in cui installi il plugin.

Allora, cosa stai aspettando?

Grazie per aver letto. Seguici su YouTube, Twitter e Facebook per ulteriori contenuti utili per far crescere la tua attività.