Da HTML a WordPress: Una Guida Dettagliata per Caricare e Convertire file HTML

Possono esserci diversi motivi per caricare e convertire file HTML in WordPress. Potreste voler convertire un vecchio sito HTML statico e farlo funzionare su WordPress. Oppure potreste semplicemente aver bisogno di un posto per memorizzare o condividere un file HTML. WordPress offre una soluzione valida in entrambi i casi.

Passare da HTML a WordPress può sembrare spesso scoraggiante o improduttivo. Siamo qui per mostrarvi gli strumenti necessari per convertire i file HTML in completa autonomia.

L’HTML è un linguaggio di markup semplice e WordPress, anche se potente e pieno di funzionalità, è abbastanza semplice e intuitivo. Pertanto, la conversione tra HTML a WordPress non dovrebbe costituire un grosso lavoro.

Continuate a leggere la guida per saperne di più sulla conversione di file HTML di base a WordPress e sulle situazioni concrete in cui potreste prendere in considerazione la conversione.

Motivi Principali per cui Caricare o Convertire HTML in WordPress

Se vi state chiedendo perché convertire o caricare file HTML su WordPress, date un’occhiata ai seguenti esempi.

• Convertire un vecchio sito HTML per farlo funzionare sul sistema WordPress. Forse il vecchio design è uno dei vostri preferiti o semplicemente non volete passare per il lavoro di riprogettazione. Questo è importante anche per mantenere la coerenza dell’immagine del vostro marchio.
• Convertire una singola pagina web HTML o un post di blog e pubblicarlo sul vostro attuale sito WordPress. Questo è particolarmente utile se il vostro tema attuale non ha un layout di pagina personalizzato che vi piace.
• Cambiare un modello di sito web HTML in un formato di tema che può essere installato su WordPress.
• Caricare un file di verifica HTML, dimostrando la proprietà del vostro sito web a un motore di ricerca o ad altri servizi.
• Memorizzare un file HTML sul vostro sito web per usarlo in seguito.
• Generare un link a quel file in modo da poterlo condividere o far scaricare agli utenti il file sul loro computer.
• Generare un componente di design HTML su una pagina o un post di WordPress, come un box autore personalizzato o un modulo di sottoscrizione email.
• Abbinare il vostro tema WordPress con un design di sito web HTML che avete trovato online ma a cui non avete accesso.

Come potete vedere, le ragioni per aggiungere un file HTML a WordPress variano in base ai vostri obiettivi. A volte il processo è piuttosto semplice, come caricare un file HTML su un post o una pagina del blog WordPress. Altre volte c’è un lungo processo di conversione di un intero sito web HTML con dozzine di file e lavori collaterali che devono essere completati, come trasferire il contenuto del sito web insieme all’HTML.

Per questa guida sulla conversione e il caricamento di HTML su WordPress, inizieremo con le basi (come caricare un file HTML su WordPress), poi ci sposteremo nei requisiti più approfonditi per duplicare o convertire siti web HTML completi da far funzionare sul sistema WordPress.

Infine, parleremo dei pro e dei contro dei convertitori HTML automatici e quali strumenti sono disponibili sul mercato.

Continuate a leggere per iniziare il vostro primo caricamento o conversione da HTML a WordPress!

Come Caricare un file HTML su WordPress

Il primo passo per imparare a trasformare un file HTML in una pagina WordPress o in un sito web completo è vedere come funziona il processo di caricamento dei file HTML.

Date un’occhiata a questa guida per uno sguardo approfondito su come caricare un file HTML su WordPress.

Qui sotto vi daremo un rapido riassunto di questo processo per assicurarvi che siete sulla strada giusta mentre vedremo altri passi nel corso di questo articolo.

Ci sono tre metodi per caricare un file HTML su WordPress:

1. Attraverso la bacheca di WordPress.
2. Con un client FTP.
3. Utilizzando cPanel.

Il caricamento di un file HTML nella bacheca di WordPress avviene nella Libreria media. Vedremo alcuni dei percorsi da seguire nei tutorial qui sotto, ma tenete presente che il caricamento di un file attraverso la bacheca di WordPress può essere fatto su una pagina, un post, o direttamente attraverso la Libreria media.

Un client FTP (come FileZilla) si collega ai file live del vostro sito WordPress, insieme ai file sul vostro computer. Questo vi permette di trasferire i file locali ai file del sito ospitato, purché accediate al client FTP con le vostre credenziali di hosting SFTP.

Infine, un cPanel di hosting offre l’accesso a un file manager online. Funziona più o meno come un client FTP, dandovi il controllo di tutti gli stessi file. La differenza principale è che il cPanel è una web app online, che richiede di caricare i vostri file sul cPanel invece di trasferirli istantaneamente da un ambiente locale a un sito live in un client FTP.

Ogni metodo ha i suoi pro e contro. Kinsta Hosting non offre un cPanel, quindi è meglio caricare i file HTML più piccoli che desiderate memorizzare o condividere attraverso la bacheca di WordPress.

Un client FTP/SFTP è il metodo scelto per creare un sito web completamente nuovo da un sito HTML statico. La ragione di questo è che un client FTP/SFTP fornisce un’incredibile quantità di controllo sui file del vostro sito e può trasferire qualsiasi cosa, dai file multimediali alle cartelle HTML direttamente dal vostro computer.

Come Aggiungere Codice HTML a una Pagina o a un Post di WordPress

Ci sono alcuni metodi per caricare un file HTML direttamente su un post o una pagina di WordPress. Il primo è il processo di caricare effettivamente un file HTML zip o TXT come elemento multimediale. Questo metodo funziona in modo simile al caricamento di un’immagine nel media manager, solo che lo state facendo attraverso una pagina o un post, ed è un file HTML invece di una foto.

Potreste voler scegliere questo metodo per dare alle persone un link da cui scaricare il file HTML o per accedere voi stessi al file sul backend del vostro sito.

Un’altra opzione è incollare un blocco HTML in una pagina o in un post per aggiungere alcuni elementi di design. Per esempio, potreste avere un modulo d’iscrizione personalizzato fatto solo per questa pagina che vi interessa inserire con un piccolo snippet di HTML.

Entrambi i metodi hanno scopi e processi diversi per raggiungere i risultati finali.

Per caricare un file HTML su un post o una pagina, seguite questi passi.

Andate su Pagine > Tutte le pagine nella bacheca di WordPress. Se volete iniziare con una pagina vuota, andate su Pagine > Aggiungi nuova.

Scegliete la pagina dove vorreste caricare il file HTML. Potete anche fare clic sul pulsante Aggiungi nuova se state creando una pagina nuova di zecca.

Questi passi sono praticamente gli stessi per aggiungere file HTML ai post di WordPress. Stiamo semplicemente spiegando come farlo con una pagina di WordPress. Se invece volete usare un post, andate su Articoli > Tutti gli articoli > Aggiungi nuovo.

Questa parte dipende dal fatto che stiate usando l’editor a blocchi Gutenberg o l’editor classico di WordPress.

In Gutenberg, potete trovare il pulsante con il segno + e farci clic sopra per cercare un nuovo blocco di costruzione visuale. Cercte il blocco File: potete digitare nel campo di ricerca o scorrere l’elenco dei blocchi per trovarlo.

Selezionate il blocco File per inserirlo nella vostra pagina o nel vostro post.

Nota: Se state usando l’editor classico di WordPress, fate clic sul pulsante Aggiungi Media e caricate il vostro file HTML usando quello. Questo crea un link al vostro file che le persone possono scaricare dal front-end del vostro sito.

Su Gutenberg, il modulo File dovrebbe mostrare un pulsante Carica. Fate clic sul pulsante Carica e individuate il file HTML desiderato sul vostro computer. Questi sono solitamente memorizzati come file TXT, raccolte di file TXT in una cartella, o in file ZIP.

Una volta caricato sul vostro sito web, il file viene rivelato come un link. Qualsiasi utente può ora venire sul vostro sito e fare clic sul link da quella pagina o post per visualizzare il file HTML e persino scaricarlo sul proprio computer.

Inoltre, quel file viene memorizzato nella vostra libreria multimediale, quindi potete andare nella libreria per ottenere l’URL del file in qualsiasi momento e metterlo dove volete. Potete anche semplicemente usare WordPress come archivio per il file.

Se volete solo memorizzare il file in WordPress e non avere un link scaricabile e cliccabile per tutti i vostri utenti, cancellate semplicemente il link creato nella pagina o nel post.

Potreste vedere un errore che vi dice che il tipo di file non è consentito per motivi di sicurezza. Questo è piuttosto comune, quindi date un’occhiata a questa guida per rimuovere l’errore e consentire la maggior parte dei tipi di file nella vostra libreria multimediale di WordPress. Nel complesso, il processo comporta la modifica del file wp-config.php o l’uso di un plugin per eliminare l’errore.

Aggiungere il Codice HTML al Design della Vostra Pagina o del Vostro Post

Come menzionato prima, una delle ragioni per cui si può considerare l’aggiunta di un file HTML a una pagina o a un post è quella di rendere un semplice design su quella pagina o post.

Il metodo precedente è più per la memorizzazione di file HTML su WordPress e l’aggiunta di un link affinché le persone possano scaricarli.

Questa è una soluzione più funzionale, visto che avete l’opportunità di copiare e incollare o usare il vostro codice HTML per cose come moduli, box autore, banner e altro.

Andate alla pagina o al post di vostra scelta e scegliete la sezione in cui volete inserire il codice HTML.

Fate clic sul segno + per vedere la selezione dei blocchi. Trovate il blocco HTML personalizzato digitandolo nel campo di ricerca o scorrendo l’elenco dei blocchi.

Scegliete il blocco HTML personalizzato per inserirlo nella pagina o nel post.

Quel blocco fornisce un semplice campo di codice vuoto per incollare o digitare qualsiasi codice HTML che avete a disposizione.

Per questo tutoriale, incolleremo un semplice modulo di contatto con un campo email e un pulsante Submit (Invia).

Una volta che avete il codice HTML nel blocco, fate sul pulsante Carica o Pubblica per visualizzarlo nel front-end della vostra pagina o post.

Se andate al front-end della pagina o del post, l’HTML dovrebbe fare il suo lavoro e rivelare qualsiasi design o funzionalità che stavate cercando di aggiungere al layout.

In questo caso, potete vedere il modulo dove chiediamo un’email e abbiamo anche inserito un pulsante Submit.

Il processo e il risultato non sono molto diversi nell’editor classico di WordPress, tranne che non userete un blocco Gutenberg drag-and-drop. Dovrete invece andare alla scheda Testo nel vostro editor (invece della scheda Visuale) e incollare il codice HTML ovunque vogliate che appaia nella pagina.

Come Caricare un File di Verifica HTML su WordPress

Un’altra ragione per cui potreste voler caricare l’HTML su WordPress è per esigenze di ottimizzazione della ricerca. Google, e alcuni altri motori di ricerca, offrono console e strumenti per webmaster per visualizzare le prestazioni del vostro sito e ottimizzare il vostro contenuto con l’aiuto di analisi e rapporti che controllano i problemi e suggeriscono correzioni.

Tuttavia, Google non può presumere che voi siate proprietari di un qualsiasi sito web solo perché dite di esserlo. È qui che entra in gioco un file di verifica HTML.

In poche parole, Google fornisce un file HTML che dovete caricare sul vostro sito web. Solo il proprietario del sito dovrebbe avere accesso ai file del sito web, quindi Google usa questo come un modo per assicurarsi che non stiate cercando di controllare gli strumenti per webmaster di qualcun altro.

Il file di verifica HTML caricato invia quindi un messaggio a Google indicando che il file è stato aggiunto a quel dominio e che voi siete, in effetti, le persone titolari del sito.

È prudente imparare a caricare un file di verifica HTML poiché Google e i motori di ricerca non sono gli unici servizi che vi chiedono di verificare la vostra identità o proprietà con file come questi. Anche alcuni plugin di terze parti, elenchi e plugin vogliono assicurarsi che non siate degli intrusi.

Motivi per Caricare un File di Verifica HTML

• Per verificare che possedete un sito web per gli strumenti di ottimizzazione dei motori di ricerca.
• Quando dovete provare la titolarità di alcune directory online.
• Se avete bisogno di collegarvi a un’integrazione o a un plugin di terzi, dovete capire se mantenere effettivamente la proprietà del vostro sito.

Come potete vedere, questo file HTML può provenire da diverse fonti. In genere non dovete sapere nulla del contenuto del file HTML, ma solo che è utilizzato per inviare quel pingback al servizio per indicare che avete il controllo dei file del sito.

Detto questo, la nostra dimostrazione del caricamento di un file di verifica HTML su WordPress coinvolgerà la Google Search Console, visto che questo è uno dei motivi più comuni per utilizzare un file di verifica.

Per iniziare, registrate il vostro sito web con Google. Questo viene fatto andando sullo strumento Google Search Console. Fate clic sul pulsante ‘Inizia ora’ e accedete al vostro account Google o registrate un account con Google.

Una volta fatto l’accesso alla Google Search Console, potreste vedere un elenco di proprietà che avete gestito o testato in passato. D’altra parte, potreste vedere un elenco vuoto.

Indipendentemente da ciò, andate alla scheda Cerca proprietà nell’angolo in alto a sinistra della bacheca.

Nel menu a discesa, selezionate la scelta Aggiungi proprietà per andare avanti. Questo vi permette di aggiungere il vostro sito web come proprietà gestita nella Google Search Console.

La successiva finestra popup vi chiede di selezionare un tipo di proprietà. L’opzione Dominio vi permette di verificare tutti gli URL su tutti i sottodomini. Questo è spesso il modo più semplice per verificare una pagina, ma richiede la verifica del DNS, che si trova nel vostro account di hosting.

Tuttavia, al momento stiamo parlando di upload di file HTML, quindi passeremo attraverso l’opzione del prefisso URL, che è un metodo più vecchio, ma ancora affidabile per verificare che si possiede un sito web. Inoltre, questo metodo aiuta a identificare URL specifici sotto l’indirizzo inserito.

Quindi, prendete l’URL dal vostro sito web e incollatelo nel campo Prefisso URL.

Fate clic sul pulsante Continua.

Ora la Google Search Console richiede di verificare la proprietà del sito web.

Ci sono diversi altri metodi di verifica, ma questo è quello che utilizza un caricamento di file HTML.

Fate clic sul pulsante che vi chiede di scaricare il file.

Salvate quel file HTML sul vostro computer in una cartella che ricorderete.

Il passo successivo è quello di caricare il file sul sito WordPress che avete incollato nella Google Search Console di prima.

Come già detto, ci sono tre opzioni per caricare un file HTML su WordPress.

Il primo metodo, il caricamento attraverso la bacheca, è sicuramente un’opzione valida. Molte persone vengono prese alla sprovvista quando viene fuori un errore comune per il caricamento di un file HTML nella Libreria Media. A causa di questo, è spesso più veloce fare i vostri upload con un client FTP. Se, tuttavia, avete intenzione di fare un caricamento sulla bacheca di WordPress, e vedete l’errore “Sorry, This File Type is Not Permitted”, usate questa guida per risolvere il problema.

Ora avete le altre due soluzioni: usare un client FTP/SFTP o caricare sul cPanel dal vostro account di hosting.

Il cPanel non è una cattiva scelta per alcuni host, ma di nuovo, Kinsta non offre un cPanel. Pertanto, ci concentreremo principalmente sul caricamento del file HTML attraverso un client FTP/SFTP. I passi dettagliati sono delineati nell’articolo linkato sopra, ma ecco un rapido riassunto per guidarvi lungo la strada.

Per iniziare, scaricate FileZilla sul vostro computer. Potete anche provare altri client FTP/SFTP.

Nota: vi consigliamo di fare un backup del vostro sito web prima di questo processo. È raro che si manifestino problemi con un sito durante il trasferimento di file via FTP/SFTP, ma è assolutamente possibile. Siccome non volete mandare in crash il vostro sito o perdere dati, create un file di backup del sito.

Aprite il client FTP/SFTP e digitate le vostre credenziali FTP/SFTP per connettervi all’host web.

Le credenziali richieste sono le seguenti:

• Host
• Username
• Password
• Port

Dove trovate le credenziali del vostro sito WordPress?

Di solito si trovano nella bacheca del vostro hosting, quindi potete contattare il vostro host o cercarle da voi.

Kinsta offre un percorso facile per individuare le credenziali FTP/SFTP: le trovate nella scheda Siti nel vostro pannello di hosting Kinsta e selezionando il sito web desiderato.

Sotto la scheda Info, cercate l’area SFTP/SSH. Copiate le credenziali corrispondenti nel client FTP/SFTP.

Potete vedere gli elementi Host, Username, Password e Port tutti ben organizzati in Kinsta.

Incollate questi elementi nel client FTP/SFTP e fate clic sul pulsante Quickconnect.

Se vedete un errore, è molto probabile che sia perché FileZilla ha come default il protocollo FTP e non il protocollo SFTP. Per risolvere il problema, andate in File > Site Manager. Aggiungete un nuovo sito in FileZilla e selezionate SFTP. Incollate le credenziali di hosting in quell’area e provate a connettervi di nuovo.

Dopo la connessione al vostro host, tutti i file del sito WordPress appariranno per la modifica.

Individuate il file principale del vostro sito, che contiene cartelle come wp-content e wp-admin.

Trovate il file di verifica HTML (in questo caso, l’ho rinominato per trovarlo più facilmente) sotto l’area che mostra i file del vostro computer. Per esempio, potreste vederlo sotto Downloads se è lì che vanno i vostri download da internet.

Trascinate quel file sul file principale del vostro sito web. Tutto questo viene fatto nel client FTP/SFTP.

Il caricamento dovrebbe richiedere solo pochi secondi.

Una volta che è nei file del vostro sito, potete tornare alla pagina di verifica di Google e controllare vi ha riconosciuto come proprietari del sito. Un messaggio di successo dovrebbe apparire su Google Search Console, e diverse funzioni si apriranno per voi per ottimizzare e analizzare la salute del vostro sito web.

Convertire Manualmente un Intero Sito HTML in WordPress

Per convertire un sito HTML in WordPress, è possibile usare un plugin/app, convertire manualmente i file, o usare un tema child e trasferire i file HTML in quel tema child.

Il primo è convertire manualmente quell’HTML per fare un tema WordPress.

Alcuni dicono che è il più scoraggiante dei metodi, ma altri lo preferiscono poiché si ottiene il pieno controllo sul processo e non si deve fare affidamento su applicazioni o plugin che a volte possono essere inaffidabili. Seguite i passi qui sotto per completare manualmente una conversione completa del sito da HTML a WordPress.

Creare una Cartella per il Vostro Tema e Aggiungere i File Standard del Tema

Sul vostro computer, create una cartella per salvare tutti i file di base del vostro tema. Chiamate la cartella come volete, preferibilmente dandole un nome che potete ricordare.

Create i seguenti file di base del tema:

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

Sentitevi liberi di aprirli nel vostro editor di codice o di testo dato che li modificherete in futuro. A partire da ora, non c’è bisogno di aggiungere alcun codice ai file. Lasciateli semplicemente nella cartella.

Nota: potete iniziare a crearli come file TXT. Se poi cambiate l’estensione del file, come da .txt a .php o da .txt a .css, il vostro computer lo adatta automaticamente al formato giusto. Per esempio, aggiungendo un’estensione .css trasformate il file in un Cascading Style Sheet.

Trasferire l’Attuale CSS del Vostro Sito WordPress nella Nuova Cartella

Dovreste già avere un tema installato sul vostro attuale sito WordPress. Se no, andate avanti e installate un tema per proseguire.

Userete il CSS del tema corrente come base, costruendoci sopra nel file style.css con i file del vostro sito HTML.

Quindi, copiate l’header del foglio di stile dal vostro sito WordPress nel nuovo file style.css.

Dovrebbe avere un aspetto simile a questo:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

In questo caso, il sito sta usando il tema Twenty Seventeen. Se state usando un tema diverso, vedrete alcune variazioni nell’header del foglio di stile.

Ora è il momento di sostituire gli elementi del vecchio tema con informazioni sul vostro nuovo tema.

Per farlo, scambiate i seguenti elementi:

• Theme Name: Chiamate liberamente il vostro tema come volete, ma non è una cattiva idea usare lo stesso nome della cartella che lo contiene.
• Theme URI: Potete usare l’URL primario del vostro sito per questo.
• Author: Qui scrivete il vostro nome, o qualsiasi nome vogliate usare.
• Author URI: Fate in modo che questo sia un link alla vostra homepage.
• Description: Qui potete aggiungere una descrizione del vostro tema da mostrare sul back-end del vostro sito WordPress.

Lascia tutto il resto così com’è. La maggior parte degli altri elementi come la licenza e i tag servono solo se avete intenzione di pubblicare il nuovo tema nella WordPress Theme Directory.

Ricordate, quello che avete appena incollato e modificato è l’header del vostro tema.

Cercate il CSS esistente nel vostro sito HTML. Copiate e incollate questo CSS dopo l’header nel nuovo file style.css.

Salvate e chiudete il file style.css.

Prendere il Vostro HTML Attuale e Dividerlo in Pezzi

WordPress generalmente usa PHP per estrarre elementi come file, codice e media dal suo database. Pertanto, un sito web HTML deve essere spezzettato in file PHP separati per fondersi con l’infrastruttura di WordPress.

Questo passaggio potrebbe sembrare complicato, ma tutto ciò che dovete fare è dividere il vostro documento HTML in diverse parti, trasformando ciascuna di queste parti in file PHP.

Ogni file HTML avrà un aspetto diverso, ma avere un esempio visivo aiuta. Pertanto, mostreremo alcuni modelli di siti web HTML per dimostrarlo.

Il seguente codice è un’ottima opzione per fare un controllo incrociato con il vostro file HTML. È una semplice pagina web HTML con un header, voci di menu, sottotitoli, una barra laterale e un footer. Potete trovare un codice simile nel vostro file index.html.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>

<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2019 My Test Site</p>
</footer>
</div>
</body>
</html>

Il seguente modello è ancora un altro esempio su cui basare le proprie strategie.

 

Come potete vedere, quest’altro file index.html è un po’ più complicato ma strutturato in modo ancora familiare.

Entrambi gli esempi includono header, aree di contenuto, barre laterali e footer.

Molto probabilmente avrete un design diverso. Per questo motivo, dovrete modificare i passi descritti qui sotto.

Ogni passo in avanti comporta la modifica e l’aggiunta a ciascuno dei nuovi file WordPress che avete creato prima. Detto questo, tenete aperto il file index.html del vostro sito HTML. Lo userete più avanti.

Il File header.php

Nel vostro file HTML aperto, cercate tutto all’inizio del file e alla fine dell’area di contenuto principale. L’area di contenuto principale è tipicamente rappresentata con un tag <div class="main"> o <main>.

Copiate e incollate questa sezione del file HTML nel vostro nuovo file header.php.

Dopo di che, cercate il punto in cui c’è scritto </head>.

Subito prima di questo, incollate quanto segue:

<?php wp_head();?>

Questo pezzo di codice è importante per il funzionamento della maggior parte dei plugin di WordPress.

Il File sidebar.php

Cercate la sezione <aside> nel vostro file index.html.

Tutto ciò che si trova all’interno dei tag <aside> e </aside> compresi gli stessi tag aside, dovrebbe essere copiato nel nuovo file sidebar.php.

Nel nostro file di esempio, ha più o meno questo aspetto:

<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>

Il File footer.php

Se avete un sito HTML semplice, potreste avere solo le informazioni del vostro footer da trasferire. Altri siti sono un po’ più complicati. Indipendentemente da ciò, non è una cattiva idea finire con la modifica del footer, visto che è uno dei blocchi fondamentali che compongono i file del sito WordPress.

Nel file index.html, trovate e copiate tutto il codice dopo il tag </aside> (quello della barra laterale).

Di nuovo, potreste avere più contenuto dopo la sezione della barra laterale, ma è possibile per i siti HTML più semplici avere a che fare solo con il footer.

Nel nostro esempio, il footer ha questo aspetto:

</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
</body>
</html>

Ma non andiamo così in fretta. Dopo aver incollato il codice del footer nel nuovo file footer.php, aggiungete lo snippet <?php wp_footer();?> proprio prima della parentesi </body>. Questo permette al footer di funzionare correttamente con WordPress.

Potete vedere un esempio nel codice <?php wp_footer();?> incollato nel file footer qui sotto.

</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>

Assicuratevi di salvare tutti questi nuovi file nella cartella del vostro tema. Per esempio, dopo aver incollato questo codice footer nel file footer.php, dovreste fare clic sul pulsante Salva nel vostro editor e chiuderlo.

Ora che i file di base sono fatti, chiudete il file index.html originale del vostro sito web HTML.

Collegare i Vostri File header.php e index.php a WordPress

Anche se l’avete già aggiunto al file header.php, avete ancora bisogno di fare ulteriori azioni. In pratica, volete modificare la chiamata nel foglio di stile dall’HTML che è lì dentro nel formato standard PHP di WordPress.

Tornando al file header.php, trovate la sezione <head>.

Stiamo cercando la chiamata del foglio di stile. Assomiglierà a qualcosa del genere:

<link rel="stylesheet" href="style.css">

Cancellate questa chiamata e sostituitela con la seguente:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

Questo è tutto quello che dovete fare nel file header.php. La chiamata per il foglio di stile sta ora lavorando con il formato WordPress, non HTML.

Andate avanti, salvate e chiudete il file header.php.

Poi, sprite il file index.php (non il file index.html che stavate usando prima, ma il nuovo file index.php).

In questo momento, il file index.php è vuoto.

Prendete il seguente codice e copiatelo e incollatelo nel nuovo file index.php. Lasciate lo spazio tra le prime due linee. È lì per un motivo che vedremo presto.

Queste linee agiscono come chiamate agli altri file del vostro sito, inclusi header.php, sidebar.php e footer.php.

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Lo spazio aperto nella seconda linea è riservato a ciò che chiamiamo The Loop, o un processo dinamico in WordPress che viene eseguito in background per aggiungere nuovi post al vostro sito. Essenzialmente, sta facendo sapere a WordPress che altro contenuto deve ancora arrivare e che dovrebbe usare The Loop per aggiungere quel contenuto. Trovate maggiori informazioni su The Loop qui.

Per aggiungere The Loop, incollate il seguente codice nello spazio che avete lasciato prima nel file index.php (proprio sotto <?php get_header(); ?>).

<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>

Il risultato dovrebbe essere questo:

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Andate avanti e salvate il file index.php. Potete anche chiudere il file ora.

Fatto questo, un tema WordPress basato sul vostro sito HTML originale è pronto per essere caricato in WordPress.

Caricare il Nuovo Tema su WordPress

L’ultimo passo è quello di caricare il tema sul vostro sito WordPress. Un’opzione è quella di zippare semplicemente la cartella del sito e caricarla nella sezione Tema WordPress senza aggiungere uno screenshot del vostro sito per riferimento.

Anche se il vostro tema funziona allo stesso modo senza uno screenshot di riferimento, vi consigliamo di creare uno screenshot in modo che vi sia più facile organizzare i vostri temi e capire quale è effettivamente attivo sul vostro sito web.

Per screenshot, intendiamo la piccola anteprima che appare per tutti i temi installati sulla vostra bacheca di WordPress. Anche i temi che non sono attivi hanno degli screenshot. Avere uno screenshot è un requisito se avete intenzione di caricare il vostro tema nella libreria dei temi di WordPress.

Potreste non caricare pubblicamente il vostro tema, ma uno screenshot aiuta nella sua gestione. Come potete vedere, è piuttosto difficile capire com’è il tema se non c’è un’anteprima dello screenshot disponibile. Il tema Twenty Seventeen Child non ha uno screenshot, quindi è solo un’immagine vuota. Potrebbe confondervi in futuro.

Per aggiungere uno screenshot, aprite il vecchio sito HTML in un browser e scattate uno screenshot della homepage con qualsiasi strumento di ritaglio o software di screenshot che avete a disposizione.

Aprite il vostro software preferito di editing delle immagini e ritagliate lo screenshot a 880×660 pixel. Questo farà in modo che lo screenshot non sia allungato o sproporzionato quando viene aggiunto a WordPress.

Salvate la versione modificata dello screenshot nella cartella del vostro nuovo tema. Non deve andare in nessuna cartella speciale, basta metterla nella cartella del tema accanto agli altri file come header.php e footer.php.

Ora, avete due opzioni per caricare il nuovo tema su WordPress.

Il primo è trascinando quei file nella cartella wp-content/themes via FTP. Se seguite questa strada, non c’è bisogno di zippare il file. Usate semplicemente un client FTP come FileZilla e trascinate la cartella normale nella cartella wp-content/themes.

L’altra opzione è quella di caricare una versione zippata nella dashboard di WordPress.

Per iniziare, comprimete l’intera cartella del tema in un file zip.

Poi, nella bacheca di WordPress, andate su Aspetto > Temi.

Fate clic sul pulsante Aggiungi nuovo.

Selezionate il pulsante Carica Tema.

Fate clic su Sfoglia… e cercate il file zippato sul vostro computer. Selezionate il file in modo che appare sulla bacheca di WordPress.

Fate clic su “Installa adesso” per elaborare il file in WordPress.

WordPress dovrebbe dirvi che il pacchetto viene installato e che viene installato con successo.

Fate clic sul pulsante Attiva per finire il lavoro.

Ora il tema, con il suo screenshot, appare nella lista dei temi come tema attivo. Potete andare al front-end del vostro sito WordPress per visualizzare ora una versione WordPress del vostro sito HTML originale.

Tenete a mente che nessuna conversione da HTML a WordPress è la stessa. Potreste scoprire che la vostra è un po’ più complessa di quella che abbiamo appena illustrato. In generale, diverse altre azioni devono essere prese per ottenere un esatto duplicato del vostro sito HTML.

Per esempio, dovrete aggiungere aree widget e commenti e anche regolare il titolo e la descrizione del vostro blog in modo che siano modificabili in WordPress.

È necessario molto lavoro manuale per trasformare un sito HTML in un sito WordPress, e potreste scoprire che alcuni cambiamenti sono possibili solo con un po’ di markup CSS.

Inoltre, questo tutorial non ha nulla a che fare con l’aggiunta di contenuti come post e immagini. Questo può essere fatto manualmente caricando le immagini nella Libreria Media e regolando elementi come le strutture degli URL.

Esistono diversi plugin per automatizzare l’importazione di contenuti, ma la maggior parte di loro non sono aggiornati con le nuove versioni di WordPress. Pertanto, vi suggeriamo di provarli per vedere se funzionano per voi, ma non dovreste aspettarvi molto.

Conversione di HTML in WordPress Tramite un Tema Child

Questo è senza dubbio uno dei metodi più semplici per convertire un intero sito HTML in un sito WordPress. Funziona usando uno qualsiasi dei temi WordPress gratuiti già esistenti online, quindi potete scegliere il vostro preferito e combinarlo con il design del vostro sito HTML.

Nel complesso, state usando il tema WordPress già creato come tema parent. Poi, il sito HTML viene convertito per lavorare con WordPress e collegato al tema parent come tema child. Se avete domande sui temi parent e child, leggete qui la nostra guida sull’argomento.

Come spiegazione veloce, il tema parent gestisce la funzionalità del vostro sito mentre il tema child è costruito sopra il tema parent. Il tema parent potrebbe tecnicamente stare in piedi da solo, ma il tema child no. Pertanto, stiamo usando il tema child per modificare il design del tema parent mantenendo le potenti funzionalità che sono già fornite nel tema parent.

Ecco come procedere alla conversione da HTML a WordPress tramite un tema child.

Scegliere un Tema Parent

La prima cosa da fare è selezionare un tema che vi piace. Il tema che decidete di scegliere funzionerà come tema principale, e lo userete come base del design del vostro sito web.

Idealmente, troverete un tema che si avvicina nel design all’aspetto del vostro vecchio sito HTML. Un’altra opzione è quella di usare un framework WordPress o un tema starter, visto che entrambi i tipi di temi sono già utilizzati per le basi del design.

Per esempio, un tema iniziale di qualità è il tema Twenty Twenty o uno qualsiasi dei temi iniziali predefiniti di WordPress che prendono il nome dall’anno in cui sono stati fatti. Vi consigliamo di andare indietro negli anni (Twenty Nineteen, Twenty Seventeen, ecc.) per vedere se qualcuno di loro si adatta meglio al design del vostro sito HTML.

Per questo tutorial procediamo con il tema Twenty Seventeen perché ci piace la sua pulizia e la sua capacità di abbinare molti semplici disegni web HTML.

Indipendentemente da ciò, tutti questi temi servono come meravigliosi punti di partenza.

Per iniziare, installate il tema sul vostro sito WordPress.

Potete attivare il tema se volete, ma attiverete un nuovo tema child più tardi e userete solo il tema di partenza come base per il design.

Creare una Nuova Cartella

Tutti i temi WordPress richiedono cartelle per memorizzare i file del vostro sito. Pertanto, è necessario creare una nuova cartella per il tema child che viene creato dal sito HTML.

Vi consigliamo di nominare la cartella come il vostro tema parent e di aggiungere “-child” alla fine del nome della cartella.

Per esempio, in queto caso chiameremo la cartella “twentyseventeen-child”.

In generale, qualsiasi nome va bene, purché si ricordi il nome della cartella e non vi si aggiungano spazi.

Configurare il Foglio di Stile

Tutti i temi child richiedono fogli di stile che vanno nella cartella del tema.

Quindi, fate un documento di testo e chiamatelo style.css. Salvatelo nella cartella del tema e includete il seguente codice in quel file di testo:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://examplesite.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Jane Doe
 Author URI:   http://examplesite.com
 Template:     twentyseventeen
 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-seventeen-child
*/

Assicuratevi di sostituire gli elementi che sono personalizzati per il vostro sito. Potreste aver bisogno di modificare elementi come il Theme Name, Theme URI, Author, Template, e alcuni altri elementi per assicurarvi che corrispondano ai vostri nomi di file. Questo passaggio è simile ad alcuni dei passaggi nella sezione sopra chiamata “Convertire manualmente un intero sito HTML in WordPress”, spiegando cosa significa ogni riga.

Il più importante è il tag Template. Questo dovrebbe avere il nome del tema parent in modo che il tema figlio funzioni correttamente.

Creare un File functions.php

Se si usasse solo il foglio di stile del sito e si attivasse il tema child, si avrebbe un sito HTML senza alcuno stile. Tuttavia, vogliamo anche aggiungere lo stile al tema child per farlo apparire come vogliamo.

Tutto lo stile sarà preso dal tema parent.

Pertanto, un file functions.php è necessario per ereditare gli stili dal tema parent al tema child.

Create un file chiamato functions.php nella cartella del vostro tema.

Per attivare il file, aggiungete un tag PHP di apertura, insieme al codice che chiede a WordPress di usare lo stile del tema parent:

<?php
function child_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Un altro vantaggio di questo pezzo di codice è che vi permette di regolare il design del sito web con il vostro tema child.

Attivare il Nuovo Tema Child

Ora è il momento di attivare il tema child.

Un modo per attivare il tema child è quello di aggiungere la cartella al file wp/content/themes nei vostri file di WordPress. Questo verrebbe fatto usando un client FTP/SFTP.

Potete anche zippare la cartella e caricare il tema sotto Aspetto > Temi > Aggiungi nuovo.

Selezionate il pulsante Carica tema.

Fate clic su Sfoglia… e individuate il file zip del tema child sul vostro computer.

Una volta caricato, fate clic sul pulsante Installa adesso.

Fate clic sul pulsante Attiva.

Ora dovreste vedere il Twenty Seventeen Child Theme (o qualsiasi tema che avete usato) attivato come tema principale.

Indipendentemente dal metodo che usate per attivare il tema child, il vostro sito WordPress dovrebbe rispecchiare il tema parent. In altre parole, è un duplicato esatto del tema parent.

Nota: è possibile aggiungere uno screenshot al vostro nuovo tema invece di lasciarlo senza anteprima. Abbiamo visto come aggiungere uno screenshot al tema in una delle sezioni precedenti chiamata “Convertire manualmente un intero sito HTML in WordPress”.

Aggiungere il File HTML

L’obiettivo è quello di creare un sito che assomigli al vostro sito HTML originale, non al tema parent.

Pertanto, il passo finale prevede che copiate il contenuto del vostro sito web HTML sul vostro nuovo sito WordPress. La maggior parte delle volte, dovrete percorrere questi passi manualmente. Lo abbiamo detto prima, ma ci sono alcuni plugin che automatizzano il processo di trasferimento dei contenuti. Tuttavia, questi plugin non sono aggiornati con le nuove versioni di WordPress, quindi usateli a vostro rischio e pericolo.

Cos’È un Convertitore da HTML a WordPress? (E Quali Sono le Opzioni?)

Un convertitore da HTML a WordPress prende i passaggi di cui sopra e li semplifica o completa il compito per voi interamente. Potreste considerare uno strumento di conversione da HTML a WordPress se non avete il tempo o l’esperienza per fare la conversione manualmente.

I convertitori sono disponibili in molti stili diversi, ma è importante ricordare che non tutti sono alternative ragionevoli per camminare manualmente attraverso il processo di conversione da HTML a WordPress.

I convertitori sono offerti nelle seguenti forme:

• Convertitori di software di terze parti, sia online che in locale.
• Plugin WordPress.
• Persone reali esperte di sviluppo web!

Guardando le opzioni di conversione, i software/app di terze parti sembrano ragionevoli per lavori semplici. Potete prendere un file zip dei file HTML del vostro sito web e caricarlo sul convertitore. La maggior parte degli strumenti di terze parti disponibili funzionano come applicazioni online, quindi basta aprirle nel browser e fare clic sul pulsante Carica.

Ci piacciono queste applicazioni di conversione meno complicate. Se avete un sito HTML di base e volete farlo funzionare su WordPress, questo può essere una soluzione, ma non garantiamo una transizione senza problemi.

Per quanto riguarda i plugin per WordPress che convertono l’HTML per WordPress, avrete difficoltà a trovare plugin che prendono un intero sito HTML e convertono i file per WordPress. Esistono alcuni plugin, ma nessuno di loro è aggiornato per funzionare con le nuove versioni di WordPress, e non vi conviene usare un plugin obsoleto.

Tuttavia, alcuni plugin forniscono le caratteristiche necessarie per l’upload di file di base che possono renderlo più facile di un trasferimento FTP o di pasticciare con il back-end del vostro account di hosting. Nel complesso, molti plugin permettono solo l’upload di singoli file, quindi non è la via migliore per una conversione massiccia del sito.

Consideriamo l’ultimo metodo (sviluppatrici o sviluppatori) una forma di convertire l’HTML a WordPress perché automatizza il processo per voi grazie all’aiuto di una persona esperta che porta avanti il lavoro. Nel complesso, assumere un/professionista dello sviluppo per convertire il vostro sito web HTML è la soluzione che presenta meno possibilità di creare problemi, e oltretutto avrete qualcuno con cui parlare se qualcosa va storto.

Le Migliori Opzioni di Plugin per il Convertire l’HTML in WordPress e Altri Strumenti

Come accennato, i convertitori da HTML a WordPress sono disponibili in molte configurazioni diverse. Non troverete molti plugin designati per WordPress che non siano obsoleti o che non abbiano smesso di funzionare. Tuttavia, abbiamo alcuni plugin convertitori preferiti che completano piccoli compiti di conversione, insieme a web app e opzioni di sviluppo manuale che tornano utili per lavori più avanzati di conversione da HTML a WordPress.

Pro e Contro dell’Utilizzo di un Plugin o un’Applicazione Automatica per Convertire HTML in WordPress

Un convertitore automatico da HTML a WordPress suona come una benedizione per alcuni, ma non è sempre la soluzione migliore. Date un’occhiata ai pro e ai contro qui sotto prima di impegnarvi in un’app o un plugin che è fatto per duplicare o convertire l’HTML.

Pro

• Elimina la necessità di creare i vostri file del nuovo sito web, spesso generandoli per voi.
• Molti dei convertitori vi danno opzioni per spezzare gli elementi HTML e scegliere quali andranno nei file giusti per WordPress.
• Potete creare un tema dal vecchio HTML e usarlo su più siti web.
• Alcuni strumenti richiedono solo un URL per creare un nuovo sito web o un tema.
• Altri strumenti offrono opzioni per duplicare un sito web che non è di vostra proprietà, fornendo un punto di partenza per un design che vi piace.

Contro

• Spesso vi rimane ancora del lavoro manuale per trasferire contenuti come i post del blog e le foto.
• Molto probabilmente dovrete capire come trasferire manualmente i link dal vecchio sito.
• Questi convertitori non sono sempre tenuti aggiornati. Uno dei migliori convertitori era un plugin per WordPress, ma non lo abbiamo suggerito in questo articolo poiché lo sviluppatore non lo mantiene più.
• Potreste scoprire che alcuni dei convertitori di applicazioni web non possono gestire lavori con file più grandi.

Ora che avete un’idea dei benefici e dei lati negativi dei convertitori HTML automatici, diamo un’occhiata alle nostre app e plugin preferiti per i convertitori automatici qui sotto.

WP Site Importer

Anche se lo strumento WP Site Importer estrae e importa tutti i tipi di contenuti e file da siti web vecchi o di terze parti, potete scommettere che uno di questi elementi coinvolge l’HTML. In breve, WP Site Importer permette di trasformare qualsiasi sito in un sito WordPress, estraendo contenuti come immagini, menu e pagine dal sito HTML e dai file del sito. WP Site Importer corregge i link rotti in modo da non doverli regolare o aggiungerne di nuovi manualmente. Mantiene anche le informazioni SEO costruite dal sito precedente, comprese le meta descrizioni e le parole chiave.

L’Importer vi fa risparmiare tempo e denaro eliminando i costi di un/a professionista dello sviluppo e rendendo questa conversione di HTML e contenuti un processo in un solo clic. In più, ripulisce il vostro HTML, pulendo e riformattando l’HTML di origine. Questo rende i vostri file HTML più compatibili con WordPress e mostra a Google che state lavorando con un codice pulito, migliorando così la vostra SEO.

Lo strumento WP Site Importer funziona come un plugin diretto di WordPress, quindi è possibile scaricare il plugin e attivare le sue caratteristiche direttamente dalla bacheca.

WP All Import

Il plugin WP All Import è uno degli strumenti più veloci e più semplici disponibili per caricare file XML contenenti dati HTML. Nel complesso, il plugin consente di migrare il contenuto da un sito web precedente o un potenziale sito web demo costruito con semplice HTML o alcuni file HTML che si desidera duplicare e portare sul nuovo sito WordPress.

La conversione avviene nel giro di quattro passi, e vi dà accesso a una bella interfaccia drag-and-drop per gestire le conversioni e le importazioni. Ciò che è interessante del plugin WP All Import è che gestisce le importazioni di URL da siti esterni. Pertanto, non è nemmeno necessario avere una password o il controllo di un sito per trasferire quei pochi file e potenzialmente rendere gli elementi in WordPress da quel sito.

Una conversione completa del sito web può risultare scoraggiante con questo plugin, ma vale la pena provare, soprattutto se si tratta di un semplice file HTML. Inoltre, il plugin supporta le conversioni HTML per elementi come prodotti WooCommerce e pagine WordPress. Una versione premium è disponibile per funzioni più avanzate, in particolare il supporto clienti premium che permette di chiedere aiuto quando si fanno queste conversioni.

HTMLtoWordPress.io

L’applicazione online HTMLtoWordPress.io è una delle soluzioni più popolari per convertire un file HTML in WordPress. Una delle cose belle dello strumento HTMLtoWordPress.io è che offre principalmente conversioni per siti web completi, siti web costruiti con HTML.

Tutto quello che dovete fare è aprire la homepage e caricare il vostro file zip HTML per una rapida conversione. La web app automatizza completamente la conversione da HTML a WordPress, quindi non dovrete avere conoscenze di programmazione né avrete bisogno di pasticciare con un client FTP.

È anche possibile visualizzare un’anteprima completa del vostro nuovo sito WordPress prima di completare il processo e pubblicarlo su Internet. Il contenuto e le immagini del vostro sito vengono anche conservati per il nuovo sito WordPress. Sono modificabili attraverso l’applicazione Simple Live Editor, e si suppone che faccia riferimento a quelle immagini, insieme a JavaScript e CSS, senza problemi. Nel complesso, sembra una soluzione solida se avete uno o più siti web HTML da convertire. Come bonus, è possibile aggiungere classi al vostro HTML per utilizzare funzioni avanzate di WordPress.

Pinegrow Theme Converter for WordPress

Pinegrow Theme Converter è uno strumento di web design unico che serve a prendere una cartella di sito web HTML e convertirla istantaneamente in un tema WordPress completo. Il convertitore di temi carica i vostri file e presenta un’anteprima del sito WordPress in un’interfaccia visiva. Dopo il caricamento, potete fare clic su diversi elementi delle pagine e assegnare azioni intelligenti ad ogni elemento. Questi si integrano con WordPress, così mentre state assegnando le azioni, Pinegrow aggiunge le giuste caratteristiche di WordPress alla vostra struttura HTML personalizzata e allo stile.

Una volta che avete deciso le azioni desiderate e salvato i file, Pinegrow offre un’opzione per esportare il progetto in file PHP standard di WordPress, che possono essere caricati su una normale installazione di WordPress da provare nella vita reale. Inoltre, il sistema di importazione dei contenuti vi assicura di trasferire con successo gli elementi multimediali come immagini e video.

Ci piacciono soprattutto le caratteristiche che vi permettono di tornare in Pinegrow e fare modifiche. Tutto quello che dovete fare è fare clic sul pulsante Update e inviare la nuova versione al vostro tema WordPress senza alcuna modifica avanzata di codifica o regolazione del sito web in WordPress.

Questo non è un plugin. Infatti, non viene usato nessun plugin WordPress per trasformare il file HTML in un tema WordPress. Pinegrow è disponibile come software scaricabile nelle versioni per Mac, Windows e Linux. Dal bellissimo editor visivo alla funzione di aggiornamento immediato, il software Pinegrow sembra una delle migliori opzioni per convertire un sito web HTML completo in un tema WordPress.

Jekyll

Jekyll è un convertitore gratuito da HTML a WordPress che funziona trasformando semplici file di testo in veri siti web. Il progetto è ospitato su GitHub in download gratuito. Evita di dover ricorrere al database e alla moderazione dei commenti invece di concentrarsi sul trasferimento dei contenuti e sul trasferimento/conversione dei file con HTML, CSS e markdown.

Una parte interessante di Jekyll è che si rivolge ai design HTML orientati al blog, compilando le impostazioni del contenuto per le pagine, i post e i permalink per migrare il vostro blog e mantenere, o creare, layout personalizzati, categorie e molti altri elementi.

È possibile installare il convertitore Jekyll su macOS, Ubuntu, Windows, e anche altri sistemi operativi Linux. Tutto sommato, Jekyll è un progetto volontario con varie risorse come temi, plugin e guide per testare le vostre conoscenze e aiutarvi a trasformare un design HTML in qualcosa di speciale.

Ci piacciono soprattutto le integrazioni con gli strumenti di ecommerce come MemberSpace e le applicazioni per i moduli come Getform. L’elenco delle integrazioni è lungo, ma è un vero testamento di quanto potenziale avete con il vostro sito web dopo aver fatto la conversione da HTML a WordPress.

Theme Matcher

Theme Matcher non è tanto un convertitore di file HTML quanto un estrattore di file HTML da siti web di terze parti. Genera temi WordPress completi dopo aver incollato un URL dal vostro sito personale o da un sito HTML che non è di vostra proprietà.

L’idea dietro questo tipo di convertitore e generatore di temi è quella di prendere uno dei vostri siti HTML e trasformarlo in un sito WordPress completo o di fare un tema che è basato su un design che avete notato altrove online.

Per esempio, potreste navigare verso il vostro negozio online preferito e decidere di voler iniziare il vostro design con una formattazione e struttura simile. Theme Matcher genera un tema completamente nuovo per il vostro sito, che ovviamente deve essere modificato per questioni di copyright, ma serve come un meraviglioso punto di partenza.

Il processo funziona copiando e incollando l’URL di un sito nel campo Theme Matcher. Chiedetegli di creare un tema per voi e selezionate il layout del sito da convertire in contenuti WordPress. Gran parte della conversione da HTML a WordPress avviene in background qui, ed è importante identificare quelle aree di contenuto WordPress per renderlo il più vicino possibile a un vero tema WordPress. Infine, potete scaricare il tema e caricarlo sul vostro CMS WordPress.

Se il vostro sito HTML non è attualmente attivo, e non potete incollare un URL, Theme Matcher fornisce un modo per caricare un file zip della vostra pagina HTML per poi seguire lo stesso processo.

Import Into Blog

Il sito Import Into Blog è un’applicazione online che prende l’HTML e altri file dal vostro sito live per convertirlo in un sito WordPress. Sono disponibili diverse opzioni, come la creazione di un file XML scaricabile da importare nel vostro sito WordPress. Potete anche considerare di scaricare il risultato finale come un tema WordPress da caricare su WordPress e vedere il sito web ultimato.

Il recupero automatico del sito è disponibile con lo strumento ImportIntoBlog. Per non parlare del fatto che tutti i link interni vengono riscritti in modo che vadano alle pagine giuste del vostro nuovo sito. La maggior parte del contenuto del sito viene scoperto automaticamente, e si può personalizzare l’aspetto e lo stile del tema prima di esportarlo. In generale, lo strumento funziona meglio con file HTML statici o un URL. Gestisce i file CSS e Javascript e vi permette di capire la storia completa del vostro sito web e di farlo funzionare correttamente.

HTML to WordPress converter

HTML to WordPress Converter è un’altra soluzione che prende un sito HTML e lo trasforma in un tema WordPress.

C’è un campo per incollare l’URL di un sito web e fare clic sul pulsante Generate Theme (Genera Tema). Scegliete il contenuto e le aree della barra laterale per WordPress in modo che le vostre pagine e i vostri post finiscano nelle posizioni giuste, e state estraendo esattamente i dati necessari dal precedente sito HTML. Tutti i vostri contenuti dovrebbero essere trasferiti. Tuttavia, potreste dover ricontrollare le vostre immagini e altri elementi multimediali e completare alcuni caricamenti attraverso WordPress.

Questo produce un tema e non un sito web completo. Dovete attivare il vostro sito WordPress e ospitarlo altrove. Si scarica il tema da questo strumento, un tema che assomiglia esattamente al sito HTML di prima. Tenete presente che alcuni elementi non funzioneranno come in origine, ma dai nostri test abbiamo visto che lo strumento fa un ottimo lavoro nel mantenere la struttura e la formattazione del vostro sito.

A quanto pare, chi ha sviluppato HTML to WordPress Converter fornisce anche modifiche CSS gratuite se qualcosa non funziona come volevate.

PHP Simple HTML DOM Parser

PHP Simple HTML DOM Parser completa un processo necessario quando si carica un file HTML su WordPress. Il Parser interviene come un modo per individuare, estrarre e modificare qualsiasi elemento HTML sul vostro sito web o in un file HTML. In questo modo, è possibile identificare gli errori, correggerli prima di convertirli in un sito WordPress, o anche usare lo strumento per modificare gli elementi HTML che esistono sul vostro attuale sito WordPress.

Lo trovate in download gratuito dal sito di SourceForge, quindi potete controllare le recensioni e chiedere supporto se necessario.

Assumere una Persona Esperta di Sviluppo

WP Geeks, WP Online Support e Acclaim forniscono servizi di conversione da HTML a WordPress a prezzi ragionevoli per coloro che non vogliono pasticciare con il completamento di una conversione da soli o se uno degli strumenti automatici di cui sopra non riesce a produrre risultati solidi. Assumere una persona esperta di sviluppo a volte ha molto senso perché potreste finire per risparmiare tempo e denaro sul processo, soprattutto se si tratta di un lavoro facile per cui voi però non avete conoscenze tecniche sufficienti.

Collaborare con esperti di sviluppo significa che non dovete usare nessuna delle vostre abilità tecniche – o mancanza di abilità tecniche – per trasformare un nuovo sito web dai file HTML. Il lavoro è delegato a persone che sanno cosa stanno facendo, ed è molto più probabile che sarete in grado di trovare il giusto aiuto e fare domande e richieste rispetto a una web app.

Per non parlare del fatto che questo vi permette di fare presente quale caratteristica vorreste mantenere sul nuovo sito web. Ed è quasi una garanzia che le azioni del sito saranno effettivamente trasferite e funzioneranno come dovrebbero.

Capiamo che assumere dei professionisti che si occupino del passaggio da HTML a WordPress non è sempre possibile per ragioni di budget, ma vale la pena pensarci se siete in difficoltà e avete un po’ di soldi da spendere.

Come Convertire HTML in WordPress con un’App Automatica o un Plugin

Se avete domande sull’utilizzo di uno dei convertitori automatici da HTML a WordPress elencati in precedenza, ecco un esempio con WP Site Importer. Questa è una delle soluzioni più affidabili, ed è un plugin di terze parti per WordPress che riunisce molte delle caratteristiche di altri convertitori automatici per il passggio da HTML a WordPress.

Per iniziare, scaricate, installate e attivate il plugin WP Site Importer nella vostra bacheca di WordPress. È necessario scaricare il file zip dal sito web dello sviluppatore e iscriversi alla prova gratuita. Ci sono anche piani premium da considerare. Fate clic qui se avete qualche domanda sull’installazione di un plugin per WordPress.

Il plugin WP Site Importer offre una collezione di strumenti di importazione per singole pagine e post, insieme a siti web completi e gli elementi aggiuntivi necessari per completare il lavoro, come la localizzazione delle immagini e la modifica dei link interni.

Per questo esempio vedremo la maggior parte delle funzioni, iniziando con una singola pagina HTML. Nella bacheca di WordPress, andate su Site Importer > Import Single Page.

La stragrande maggioranza delle impostazioni predefinite del plugin sono pronte all’uso, il che significa che in genere non dovete cambiare nulla. A meno che, naturalmente, non vogliate modificare cose come importare una pagina come post o rimuovere immagini in evidenza. Scorrete pure tutte le impostazioni del plugin per assicurarvi che siano adatte alle vostre esigenze.

Tutto quello che dovete fare per le importazioni di una singola pagina è incollare l’URL per la scansione del plugin.

Nota: il caricamento dei file è disponibile solo per le conversioni di più pagine.

Fate clic sul pulsante Import Page per procedere.

Il plugin vi dice cosa ha avuto successo e fornisce diversi link per visualizzare in anteprima le nuove pagine di WordPress e modificarle se necessario.

Trasferite anche tutti i menu del sito web statico in HTML.

Per farlo andate su Site Importer > Import Menus.

L’importazione di un menu è simile alla conversione dei file, dato che chiede l’URL. Potete anche impostare elementi come la densità del menu e la dimensione minima del menu.

Fate clic su Identify Menu per procedere.

Ogni voce di menu ora appare in un elenco. Dovreste anche vedere più menu se ne avevate più di uno sul vostro sito HTML.

Controllate i menu che volete importare e date un nome a ciascuno di essi. Fate clic sul pulsante Import Menu.

Con le importazioni di menu di WordPress, dovete ancora configurare la posizione del menu.

Nella bacheca, andate su Aspetto > Menu.

Scegliete un nome, create un menu e salvatelo su WordPress. Dovreste già vedere il menu importato se tutto ha funzionato come previsto.

Fate clic sulla scheda Manage Locations e trovate il menu importato nel menu a tendina. Dovreste mettere il nuovo menu nella posizione di menu che avete scelto.

Assicuratevi di salvare le modifiche quando avete finito.

Un’altra parte dell’importazione di un sito HTML in WordPress è la localizzazione delle immagini. Per completare questo processo, andate su Site Importer > Localize Images.

Tutte le impostazioni predefinite per la localizzazione dell’immagine sono in genere utili da usare.

Fate clic sul pulsante Next.

Vedrete una lista delle immagini trasferite dal sito precedente.

Selezionate quelle che volete localizzare e fate clic sul pulsante Next.

In pochi secondi, il plugin aggiunge ogni immagine alla vostra Libreria Media WordPress, dando loro tutti gli URL sul nuovo sito web. Potete andare alla Libreria Media per assicurarvi che questa transizione sia avvenuta.

Un’altra fase della conversione HTML comporta l’aggiornamento dei vostri link interni. Tutti i trasferimenti di siti web in genere creano link rotti e problemi con le strutture degli URL.

Dobbiamo sistemarli, quindi andate su Site Importer > Update Internal Links per iniziare.

La pagina seguente spiega come i vecchi link verranno sostituiti con le versioni del nuovo dominio del sito web, aggiungendo sotto-directory per un’esperienza utente fluida che risiede nell’URL del sito WordPress.

Tutto quello che dovete fare è clic sul pulsante per aggiornare i link. Il plugin fa tutte le conversioni per voi.

Se avete intenzione di convertire un intero sito web HTML (invece di una pagina), andate alla scheda Import Multiple Pages sotto il menu Site Importer.

Questa è anche un’opzione meravigliosa per coloro che hanno interesse a caricare i file locali del sito invece di copiarli in un URL live.

Il Multiple Pages Wizard include dei campi per incollare un URL e caricare i file HTML del sito web.

Scegliete quello che va meglio per il vostro lavoro.

Mentre il sito HTML viene convertito e importato, vedrete un elenco di URL trascinati nel vostro sito WordPress. Potete rimuovere alcune delle pagine dall’importazione se non ne avete bisogno. Avete anche delle opzioni per importare i post, impostarli come non pubblicati e includere l’immagine in evidenza.

Il passo finale rivela l’elenco completo delle pagine web convertite dal sito HTML nel vostro sistema WordPress. Ora potete fare clic sul pulsante Modifica o Anteprima per ogni pagina per continuare a personalizzare il vostro sito web.

Ricordate, una conversione come questa non significa che vedrete immediatamente l’esatto design del vostro sito HTML. Potreste dover importare da voi un foglio di stile o anche codificare il sito o le pagine.

Riepilogo

Passare da HTML a WordPress richiede un po’ di lavoro. Ma ne vale la pena. Un upload da HTML a WordPress può anche aiutare in attività meno impegnative, come verificare la proprietà del vostro sito o implementare un semplice modulo HTML.

Le possibilità sono abbondanti quando si tratta di caricare e convertire file HTML. Basta ricordare che è possibile completare gran parte del lavoro con un convertitore HTML automatico. Dopo di che, molto probabilmente ci sarà un lavoro manuale da fare, ma con la combinazione di strumenti giusti e di conoscenza, potete duplicare quasi tutti i siti HTML che volete!

Se avete qualche domanda sul caricamento di file HTML su WordPress o sulla conversione di HTML in siti WordPress, fatecelo sapere nella sezione commenti qui sotto.