Quando il Web è iniziato per la prima volta, i siti Web erano piuttosto stupidi. Cioè, non erano altro che testo e codice HTML statico, senza effetti fantasiosi e pochissima interattività.

Vent’anni dopo, i siti Web si basano su una programmazione complessa e possono richiedere settimane e settimane per essere costruiti. Sono ricchi di funzionalità, altamente interattivi, più reattivi, più belli e così via.

Oggi, invece di scrivere il codice da soli, puoi utilizzare i sistemi di gestione dei contenuti che gestiscono da soli il codice dietro il tuo sito web. Tutto quello che devi fare è scegliere un tema e iniziare a postare.

WordPress è uno di questi CMS, ora utilizzato da milioni di persone in tutto il mondo. La parte migliore di WordPress è che è una piattaforma molto flessibile. Non richiede alcuna conoscenza di programmazione per usarlo e puoi creare i siti Web più reattivi e sorprendenti con esso.

Se possiedi un sito Web che non ha visto un aggiornamento dagli anni ’90, questo articolo creato dal nostro team di wpDataTables ti aiuterà a convertire l’HTML in WordPress in modo che anche tu possa sfruttare i vantaggi della moderna tecnologia web.

Continua a leggere per scoprire di più.

Perché dovresti convertire HTML in WordPress?

I motivi per cui una persona dovrebbe convertire HTML in WordPress sono piuttosto diversi. Ecco una selezione dei più importanti:

La conversione in WordPress ti dà il pieno controllo su ogni dettaglio del tuo sito web. Ogni volta che non ti piace una parte del tuo sito, puoi facilmente modificarla a tuo piacimento.
I siti WordPress sono molto più facili da accedere, gestire e mantenere rispetto ai siti HTML statici. Questo è un motivo molto importante per eseguire una migrazione da HTML a WordPress.
Convertendo lo stile del tuo modello HTML in WordPress, ti ritroverai con un tema unico che nessun’altra persona che utilizza il CMS possiederà.
WordPress aiuta con l’ottimizzazione per i motori di ricerca e ti assicurerà che il tuo sito web venga scoperto da più persone.
Come sviluppatore di siti Web, il tuo lavoro sarà ridotto della metà perché WordPress gestirà la maggior parte delle attività che prima richiedevano tempo inutilmente.

Passare dall’HTML statico a WordPress: i metodi

Ora che hai tutti i motivi per convertire HTML in WordPress, puoi procedere per imparare come farlo.

Esistono due metodi tra cui scegliere: il metodo manuale, che prevede di fare tutto da soli, da zero; e il metodo del tema figlio, che prevede l’utilizzo di un tema WordPress di base e la modifica in base alle proprie esigenze.

La scelta di un metodo dipende dalla tua esperienza con la programmazione, da quanto tempo vuoi investire in questa attività e dalle tue preferenze. Ognuno di questi metodi sarà presentato nelle sezioni seguenti, dove imparerai come convertire HTML in WordPress.

Il metodo manuale

1 Creare una nuova cartella del tema

Crea una nuova cartella sul desktop in cui verranno archiviati i file del tema. Assegna un nome a questa cartella come preferisci (rappresenterà il nome del tema). Crea questi file nel tuo editor di codice preferito e lasciali aperti:

style.css
index.php
header.php
sidebar.php
footer.php

2 Copia il codice CSS esistente nel tuo nuovo foglio di stile

Dopo aver creato i file, puoi passare alla copia del codice CSS. Chi desidera duplicare i propri siti e riposizionarli su WordPress dovrà esportare e importare il codice CSS del sito precedente. CSS è responsabile dell’aspetto del sito, quindi modifica il file style.css aggiungendo le seguenti righe di codice:


/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Sostituisci le informazioni richieste con le tue, aggiungi le restanti righe CSS e il gioco è fatto. Non dimenticare di salvare il file. Ora sei libero di chiudere style.css.

3 Ottieni il tuo codice HTML attuale

Vai al file index.html del tuo sito ed evidenzia tutto il contenuto dall’inizio del documento al tag div class="main". Questa sezione deve essere incollata nel file header.php che hai creato nel passaggio 1.

Torna al file index.html ed evidenzia tutto all’interno dell’elemento class="barra laterale". Copia il contenuto e incollalo nel file sidebar.php che hai creato. Fai lo stesso per quello a piè di pagina, con tutto il contenuto dopo l’elemento della barra laterale.

Per il file index.php, seleziona tutto il contenuto rimasto dopo averlo evidenziato e incollalo nel nuovo file, salva e lascialo aperto per il passaggio successivo.

4 Modificare il file index.php

Per finalizzare il tuo file index.php, copia queste righe di codice e incollale nella parte superiore del documento:

Quindi, nella parte inferiore del tuo file index.php, posiziona queste righe di PHP.

Il file non è ancora finito perché devi creare un ciclo di post, che rappresenta del codice PHP di cui WordPress ha bisogno per visualizzare correttamente i post o gli articoli del tuo sito web. Aggiungi le seguenti righe di codice nella sezione del contenuto del file:

Una volta terminato, salva il file, chiudilo e vai al passaggio successivo.

5 Carica il tuo nuovo tema

Una volta che la cartella del tema è pronta, devi caricarla sul tuo sito e completare la conversione da HTML a WordPress. Per farlo, vai alla cartella in cui hai installato WordPress e posiziona la cartella che hai appena creato in /wp-content/themes/.

Vai alla pagina di amministrazione del tuo WP, Aspetto e poi Temi per vedere se il nome del tema viene visualizzato nell’elenco o meno. Se lo fa, hai fatto tutto correttamente e puoi attivarlo. In caso contrario, leggi attentamente tutti i passaggi su come convertire nuovamente HTML in WordPress.

C’è anche questa utile guida video di Traversy Media che dovresti controllare:

Utilizzo di un tema figlio di WordPress

Se i passaggi menzionati nel passaggio precedente sembrano troppo complicati per il tuo livello, questo è un metodo che richiede meno conoscenze nel campo della codifica. È più facile da gestire e richiederà anche meno tempo.

Per convertire più velocemente HTML in WordPress, puoi utilizzare un tema figlio di un tema esistente. I temi figlio sono denominati in questo modo perché sono costruiti su un secondo tema, che è quello principale.

1 Scegli il tema

Prima di tutto, scegli un tema adatto al tuo design HTML. Cerca un tema figlio simile al tuo sito web esistente. Cerca la struttura che ha, quindi non dovrai scavare troppo nella codifica.

Dovresti optare per un tema iniziale perché si basano su righe di codice molto semplici.

2 Creare una nuova cartella del tema

Proprio come nel caso precedente, dovrai creare una nuova cartella del tema. L’unica differenza è che assegnerai alla cartella il nome stesso del tema principale su cui si basa il tuo tema figlio e aggiungerai il suffisso "-child".

Ad esempio, se il tuo tema si chiama Twenty Nine, chiamerai la cartella "twentynine-child". Assicurati di non aggiungere spazi all’interno del nome.

3 Imposta un nuovo foglio di stile

Quindi, crea il file style.css all’interno della cartella e aggiungi queste righe di codice:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

Tieni presente che questo è un esempio. Dovrai sostituire le informazioni con le tue. Salva il file al termine.

4 Creare il file functions.php

Una volta che hai il file style.css, puoi attivare il tema così com’è. Tuttavia, per migliorare l’aspetto e il funzionamento del sito Web, dovrai utilizzare le funzioni e gli stili del tema principale. Per questo, è necessario creare il file functions.php.

Usa queste righe di codice e salva il file:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Attiva il tema figlio

Infine, è necessario attivare il tema. Comprimi la cartella e aggiungila a WordPress navigando nel menu Aspetto, Temi e quindi fai clic su "Aggiungi nuovo". Carica lì il file zippato. Un’altra opzione sarebbe quella di trascinare la cartella in wp-content/themes.

In chiusura

Avrai bisogno di un po’ di pazienza per convertire HTML in WordPress, ma ne vale sicuramente la pena. Anche se il processo richiede un po’ della tua attenzione, ti ritroverai con un sito davvero unico che è molto più comodo da gestire da tutti i punti di vista.

Se segui attentamente i passaggi presentati in questo articolo, nulla può andare storto, quindi non preoccuparti! Se, tuttavia, riscontri problemi, non esitare a consultare i forum di supporto della community di WordPress. Ci sono molti utenti che sarebbero felici di aiutarti.

Se ti è piaciuto leggere questo articolo sulla conversione di HTML in WordPress, dovresti dare un’occhiata a questo sullo stipendio degli sviluppatori di WordPress.

Abbiamo anche scritto di alcuni argomenti correlati come il miglior editor di codice, la formazione su WordPress, le librerie JavaScript e le estensioni di Brackets.

Fonte di registrazione: wpdatatables.com