Articles

Come creare WordPress Theme from Scratch : Beginners Guide (2020)

Creazione di WordPress theme può essere molto semplice se si conosce HTML di base, CSS, e JavaScrip. Tuttavia, se siete nuovi a WordPress, tutto quello che dovete fare è seguire i passaggi menzionati in questo tutorial per principianti. Ho elencato i passaggi richiesti e discusso gli aspetti importanti della creazione di tema WordPress. Quindi, leggiamo questa guida tutorial e imparare a creare tema WordPress da zero.,

WordPress è un sistema di gestione dei contenuti open source (CMS) ampiamente utilizzato in tutto il mondo. Un totale di 34.7% dei siti web utilizza WordPress. Puoi anche scegliere questa piattaforma per creare una forte presenza online e stabilire la tua attività online senza sforzo con l’aiuto del potente software WordPress website builder. WordPress è una scelta ovvia e la più semplice per cominciare. E questo è il motivo principale per cui ogni sviluppatore suggerisce di sceglierlo come base del tuo sito web., Tuttavia, se non siete ancora sicuri di ciò che è WordPress o ciò che è open-source CMS, quindi la lettura di questa guida sarà sicuramente far luce della conoscenza.

Quindi, senza molto rumore, cominciamo con la creazione di WordPress tema passo dopo passo processo.

Come creare un tema WordPress? Tutorial per principianti

I progettisti e gli sviluppatori sono stati inconsciamente parziali verso temi basati su WordPress non solo per uno ma diversi motivi. A volte, alcuni clienti chiedono specificamente un sito web WordPress. E la ragione principale dietro l’enorme popolarità di WordPress sta nella sua semplicità., In realtà, è un CMS altamente flessibile e potente. Quindi, coloro che stanno lavorando con qualsiasi altro CMS come Joomla, Drupal,ecc. a volte potrebbe voler migrare, ad esempio da Joomla a WordPress o così via. Quindi, ora capiamo perché le persone amano così tanto questa piattaforma.

Quali sono i requisiti per creare tema WordPress?

1. Installazione di WordPress localmente

Per prima cosa, è necessario installare WordPress. Non ti preoccupare non è scienza missilistica per imparare come installare WordPress. Puoi farlo facilmente da solo.

2. Procedura per creare un tema WordPress da zero.,

  • Manuale – creazione di WordPress theme via coding
  • Automated – creazione di WordPress theme utilizzando un WordPress Theme Builder

Per WordPress theme, tutto sarà fatto nella directory wp_content solo. Basta creare una nuova sottocartella tema nella cartella wp_content → Themes. Supponiamo che tu lo chiami “mytheme”.

La seconda cosa è decidere il layout del tema. Qui, il tutorial mostra il layout di base composto da Intestazione, Area principale, piè di pagina, barra laterale.

Fondamentalmente, WordPress ha bisogno solo di 2 file cioè stile.css e indice.PHP., Ma per questo layout, hai bisogno di 5 file, come segue;

  • intestazione.php-contiene il codice per la sezione di intestazione del tema.
  • indice.php-contiene il codice per l’area principale e specificherà dove verranno inclusi gli altri file. Questo è il file principale del tema.
  • barra laterale.php-contiene le informazioni sulla barra laterale.
  • piè di pagina.php-gestisce la sezione piè di pagina.
  • stile.css-responsabile per lo stile del tuo tema.
  • bootstrap.css-non è richiesto alcun codice CSS separato; altamente reattivo.
  • bootstrap.,js-fornisce il proprio js per la barra di navigazione, o le schede, ecc.

È necessario scaricare il pacchetto Bootstrap. Bootstrap.js & Bootstrap.il file cs deve essere copiato nella cartella del tema.

Come creare un tema WordPress personalizzato passo dopo passo?

  1. Crea tema WordPress da zero codificando (manualmente)

  2. Crea tema WordPress con TemplateToaster (automatizzato)

È possibile creare questi file localmente con un editor di testo come Blocco note. Di seguito sono riportati i file, è necessario creare per iniziare.,

Passi per la creazione di tema WordPress da zero codificando

Passo 1: intestazione.File php

È necessario inserire questo codice nell’intestazione.file php.

Questa intestazione del file.php contiene il codice per la parte di intestazione in cui è collegato il file js e style. Visualizza l’intestazione della pagina.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Questa riga aggiunta dopo il titolo dice a WordPress di caricare uno stile.file css che gestirà lo stile del sito web.

Qui,

<?php bloginfo('stylesheet_url'); ?>

è una funzione WordPress che carica effettivamente il foglio di stile.,

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Qui, usiamo Bootstrap. È uno dei ben noti framework di web design reattivo. Fornisce file CSS incorporati per modellare il tuo sito web. Puoi tenere il bootstrap.file css nella cartella tema / css.

Successivamente, viene aggiunto un ” div ” con classe ttr_header e questo sarà il contenitore principale del sito web. Ora, imposta una classe per esso in modo che tu possa modificarla tramite lo stile.file css.

Successivamente, aggiungi una semplice INTESTAZIONE label in un ” div id “con la classe” ttr_header “che verrà successivamente specificata nella classe”jumbotron”.

Passo 2: indice.,file php

L’indice principale del file.php conterrà il seguente codice;

La prima riga di codice in questo file

<?php get_header(); ?>

includerà l’intestazione.il file php e il codice in esso contenuti sono nella pagina principale.

Il codice precedente visualizza il contenuto principale del post che hai creato attraverso l’area amministrativa di WordPress.
Quindi, aggiungere la barra laterale.file php come mostrato di seguito

<?php get_sidebar(); ?>

In questo file, puoi visualizzare i tuoi post recenti, archivi, informazioni di contatto, ecc.,

Dopo questa riga, viene inserito un “div” vuoto che separerà l’Area principale e la barra laterale dal piè di pagina.

Infine, aggiunta un’ultima riga

<?php get_footer(); ?>

che includerà il piè di pagina.file php.

Passo 3: Barra laterale.file php

Nella barra laterale.php, aggiungere il seguente codice

In questo file, le funzioni interne di WordPress sono chiamati a visualizzare le diverse categorie, Archivi di messaggi., La funzione WordPress li restituisce come elementi di elenco, pertanto, è necessario avvolgere le funzioni effettive in elenchi non ordinati (i tag<ul>).

Passo 4: piè di pagina.File php

Aggiungi le seguenti righe di codice al piè di pagina.file php:

<div id= "ttr_footer"><h1>FOOTER</h1></div></div></body></html>

Questo aggiungerà una semplice etichetta PIÈ di PAGINA. Tuttavia, puoi anche aggiungere link, testo aggiuntivo,le informazioni sul copyright per il tuo tema al posto del testo a piè di pagina.

Passo 5: stile.File css

Aggiungi le seguenti righe allo stile.,file css

Questo file CSS imposta l’aspetto di base del tema. Questo imposterà lo sfondo della pagina e aggiungerà i bordi secondo le tue esigenze.

La tua pagina sarà simile a questa:

Ora puoi modificare ulteriormente il file CSS aggiungendo immagini, animazioni e altri contenuti al tuo tema e farlo sembrare bello come vuoi.

Ma, ciò richiederà la conoscenza delle funzioni HTML, PHP e WordPress. Quindi, un’alternativa migliore è usare un forte generatore di temi WordPress che non include nemmeno una singola riga di codice. Sì! Senza codifica!, Un software che consente di creare il proprio tema WordPress da zero senza alcuna conoscenza di codifica.

Desideroso di conoscere questa soluzione, beh, sto parlando del tuo software di creazione di temi TemplateToaster. Esso fornisce una serie di caratteristiche fantastiche con un facile da usare drag & interfaccia goccia. Quindi, senza perdere un minuto, iniziamo a sviluppare il tema WordPress da zero con TemplateToaster.

Come creare un tema WordPress con TemplateToaster?

TemplateToaster è abbastanza facile da installare e non comporta alcuna codifica., Basta visitare il sito web e scaricare il programma di installazione TemplateToaster. Tuttavia, la versione di prova è gratuita. Ora, tutto quello che dovete fare è seguire questi semplici passi per rendere il proprio tema WordPress. La prima schermata che apparirà dopo l’installazione appare come

Segui questi passaggi per creare il tema WordPress & Avvia lo sviluppo del tuo tema WordPress

Passo 1: Scegli una piattaforma

Qui, puoi effettuare la selezione CMS. Dal momento che stiamo creando tema WordPress quindi la scelta più ovvia per me qui è WordPress.,

Ora puoi vedere una schermata con due opzioni, ovvero Andare con modelli di esempio e iniziare da zero. Puoi facilmente trovare un modello adatto per il tuo sito web dalla pletora di temi WordPress gratuiti. Dal momento che siamo coinvolti nello sviluppo di template WordPress così, sceglierò “Start from Scratch”.

Ora, vedrete il primo pop-up cioè per selezionare il colore e la tipografia dalle opzioni date. E fare clic sul pulsante OK.,

Passo 2: Progettare un’intestazione

Qui è necessario selezionare la larghezza e l’altezza dell’intestazione. È possibile mantenere la larghezza a tutta larghezza, uguale alla larghezza del contenitore e anche la larghezza personalizzata può essere impostata.

Selezionare il colore di sfondo per esso. È possibile impostare un colore, gradiente o sfogliare un’immagine dalla galleria stock in-built o utilizzare la propria immagine personalizzata.

Ora, è possibile aggiungere “Area di testo” e “Icone sociali” per l’intestazione e renderlo interattivo come si desidera.

L’intestazione è tutto fatto.,

Passo 3: Progettare il Menu

Ora, è il momento di progettare Menu. Vai alla scheda menu e seleziona la larghezza e l’altezza che desideri impostare per il tuo menu dalle rispettive opzioni.

È anche possibile impostare il colore di sfondo, gradiente o immagine nel menu da Sfondo opzione.

Ora, metti un logo sul menu dalle opzioni date. Tuttavia, puoi anche il tuo logo personalizzato.,

Ora, selezionare il “Menu Pulsante Proprietà” e quindi allineare il pulsante come Allineamento → Orizzontale → Destra a sinistra e questo come i pulsanti del menu saranno allineati a destra della pagina.

Puoi anche scegliere di impostare la tipografia per le tue voci di menu.

Il menu è pronto ora.

Passo 4: Creare e stilizzare una presentazione

  • Ora selezionare la scheda Presentazione dalla barra degli strumenti di cui sopra e qui si può scegliere tra le opzioni per impostare le sue funzionalità.,

  • È possibile selezionare il colore di sfondo desiderato per la presentazione, l’immagine di sfondo, ecc. Inoltre, applicare proprietà come la posizione della presentazione, effetti di transizione, larghezza, altezza, e un’area di testo per renderlo bello come si desidera. E componenti come Slideshow possono migliorare il tuo coinvolgimento sul web. E ci sono alcuni componenti migliori sviluppatori di WordPress includono nei loro temi per renderli lucido e coinvolgente.

Passo 5: Modifica il contenuto (Area principale)

Ora arriva l’area principale, ovvero l’area del contenuto., Prima di tutto, imposta il numero di colonne che desideri in una singola riga.

Semplicemente cliccando sul testo, si sarà in grado di aggiungere il contenuto al tuo sito web. Tuttavia, è possibile utilizzare varie opzioni come è possibile impostare la tipografia, il colore del carattere, l’allineamento del testo, la dimensione del carattere, ecc. e prepara il tuo testo.

Se si desidera aggiungere un’immagine, è sufficiente eliminare il contenuto dalla prima colonna utilizzando la scheda Editor.,

Scheda editor → Immagine → Sfoglia immagine →Apri→OK

Allo stesso modo, puoi facilmente progettare il resto delle colonne come mostrato di seguito.

Passo 6: Progetta / Personalizza il piè di pagina

  • Ora vai alla scheda Piè di pagina. Mostrerà molte opzioni per progettare un piè di pagina. In primo luogo, impostare uno sfondo per il piè di pagina. È inoltre possibile impostare un’immagine in background dalle immagini stock o sfogliare la propria immagine personalizzata.
  • Quindi, dall’opzione Cella Piè di pagina, impostare il numero di righe, colonne& larghezza del piè di pagina., Come qui, vengono selezionate 4 colonne nella prima riga e in totale 2 righe. Posiziona le icone dei social media ovunque tu le trovi adatte.

  • Metti il contenuto e lo stile attraverso le opzioni tipografiche. È inoltre possibile impostare diversi colori dei caratteri in diversi stati dei collegamenti come Attivo, Hover, Normale.
  • Allo stesso modo, è possibile stile Progettato dal testo& Link nella seconda riga. Tuttavia, è anche possibile scegliere di mostrare / nascondere questo dalla casella di controllo data in qualsiasi momento.
  • L’aspetto finale del piè di pagina sarà un po ‘ come questo., Quindi, per progettarlo magnificamente, in pratica hai bisogno solo di pochi clic del mouse.

Quindi, la home page è stata creata magnificamente. Allo stesso modo, puoi creare altre pagine del tuo sito web. Tutto quello che dovete fare è cliccare sull’icona ‘+’ sul lato sinistro e aggiungere tutte le pagine che vuoi.

Tuttavia, se vuoi aggiungere una pagina figlio per una particolare pagina, puoi farlo anche tu., E tutto quello che dovete fare è cliccare sulle ellissi (tre punti) corrispondenti al nome della pagina t devono fare clic destro essere presenti sulla pagina desiderata e scegliere il ‘Aggiungi pagina figlio’. Qualcosa come mostrare una gerarchia virtuale.

Nome pagina → → → Aggiungi pagina figlio

Qui puoi vedere anche altre opzioni, ad esempio Rimuovere, modificare e Clonare. Puoi usarli per intraprendere azioni adeguate.

Evviva!! Hai completato il processo di creazione del tema WordPress form scratch. E puoi guadagnare profitto con lo sviluppo di temi WordPress e mantenere la tua piccola arma segreta al sicuro.,

Il software TemplateToaster web design offre molte opzioni più avanzate come mettere uno sfondo video, presentazioni, nuovi stili di menu, ecc. Puoi saperne di più su come creare un sito web WordPress, creare un sito di e-commerce con WooCommerce, come creare temi e modelli professionali e come utilizzare il plugin di controllo del tema WordPress così via.

Quale metodo si utilizza per la creazione di tema WordPress?

Quindi, questo ci porta alla fine di questo tutorial completo., Sono sicuro che vi aiuterà a costruire il proprio tema WordPress, anche spiegare gli aspetti principali della creazione di tema WordPress da zero. Creazione di tema WordPress è abbastanza semplice e la scelta di CMS dipende dal vostro scopo di creazione del sito web. Come se stai per avviare lo sviluppo di siti web di e-commerce o desideri creare un tema figlio in WordPress o potresti anche voler sapere quale tema WordPress è quello, l’altro sito Web sta usando, o vuoi iniziare lo sviluppo di temi WordPress usando Bootstrap, ecc., Ci sono alcune cose da tenere a mente prima di scegliere il tema WordPress perché scegliere il miglior tema WordPress non è un gioco da ragazzi. Scopri i migliori temi WordPress e temi WordPress gratuiti.

Conclusione di come creare tema WordPress

Quindi, tenere tutto nella vostra mente chiara prima di entrare nell’arena di sviluppo tema WordPress. Tuttavia, puoi scegliere di lavorare con WordPress theme builder come senza scrivere una singola riga di codice. Quindi, la creazione di tema WordPress da zero non è un compito più difficile ora., Ma il metodo per creare tema WordPress da zero è interamente nelle vostre mani. Qualunque cosa tu scelga, fammi sapere come ha funzionato per te nei commenti qui sotto.