Come convertire un sito Web HTML in WordPress gratuitamente? Guida

Pubblicato: 2015-05-18

All'inizio, tutti i siti web erano realizzati con testo e HTML statico. Non c'era WordPress e c'era bisogno di convertire il sito web HTML in WordPress o qualsiasi altro sistema CMS.

Molte aziende si affidano ancora a semplici siti Web HTML per la loro presenza online. Questi siti HTML sono generalmente di natura statica. Ciò significa che anche la modifica di un dettaglio minore sul sito Web viene eseguita modificando il file di codifica.

Ora, più di 20 anni dopo, il web è un posto molto diverso. Alimentando oltre il 25% del Web , WordPress sta diventando sempre più il sistema di gestione dei contenuti (CMS) preferito dall'utente medio.

I siti web sono molto più complessi. Forniscono esperienze più ricche e divertenti sia per i creatori di siti che per i visitatori. Passare a WordPress significa ricominciare da capo e perdere tutto il tempo, l'energia e il denaro investiti nel sito Web attuale?

Sommario

Sito Web HTML

Non importa come è codificato il tuo sito, una volta che un visitatore carica una pagina sul tuo sito, il browser prende tutti i pezzi (include lato server, immagini da un'altra directory, ecc.) e li mette tutti insieme in un HTML statico finale pagina.

Anche se alcuni elementi della pagina sono ancora dinamici, il codice stesso è tutto insieme in un punto che può essere spostato in una pagina WordPress che funzionerebbe ancora. Potrebbero esserci alcune eccezioni a ciò, ma per la maggior parte dei siti là fuori, sarebbe vero.

Anche se il tuo sito è composto da somepage.php, che chiama un file chiamato header.inc, e un file chiamato footer.php, quando l'utente visualizza somepage.php in un browser, il codice sorgente risultante è tutto in un posto , come se è stato codificato a mano come una pagina HTML statica.

Questo è il tipo di codice necessario per convertire un sito in WordPress. Chiunque abbia un'installazione di WordPress e il tema/plugin giusti può avere un sito Web moderno con design e funzionalità avanzate.

Migrazione da un sito HTML statico a WordPress Passaggi preliminari

Se sei pronto per passare a WordPress, di seguito sono riportati quattro passaggi da tenere in considerazione:

1. Analizza il tuo sito HTML esistente

Controlla il tuo sito per contenuti irrilevanti o obsoleti e, se trovato, puliscilo. Esamina l'attuale sistema di navigazione e pensa a come può essere migliorato. L'analisi del tuo sito HTML ti aiuterebbe a decidere quali contenuti, caratteristiche e funzionalità dovrebbero essere migrati su WordPress.

Questo darà un'idea chiara di quali plugin è necessario installare per ottenere la stessa funzionalità sulla piattaforma WordPress.

2. Conosci WordPress

L'installazione di WordPress è un processo abbastanza semplice. La maggior parte degli host web offre l'installazione con un clic. Se non hai familiarità, sarebbe bene leggere e informare sulla nuova piattaforma su cui lavorerà il tuo sito.

3. Fai un backup del tuo sito HTML

Si consiglia vivamente di eseguire un backup completo del sito statico per evitare qualsiasi rischio di perdita di dati durante la migrazione.

4. Converti il ​​sito Web HTML in WordPress

Supponendo che tu abbia una conoscenza sufficiente della codifica e che il tuo sito sia piccolo, la migliore opzione possibile di fronte a te è dividere il tuo codice HTML esistente in quattro sezioni (intestazione, piè di pagina, barra laterale e contenuto) e quindi copiare il contenuto di ciascuna sezione in il rispettivo file PHP.

Nel caso in cui il tuo sito sia grande, puoi sfruttare un plug-in da HTML a WordPress, come HTML Import 2 o assumere qualcuno per convertire HTML in WordPress.

Come convertire un sito Web HTML in un tutorial su WordPress

Il modo in cui scegli di convertire il tuo sito HTML statico in un sito WordPress dipenderà senza dubbio dalle tue preferenze personali, dal tempo/investimento monetario desiderato e dal livello di abilità con il codice.

Metodo 1

Con questo metodo per convertire il sito Web HTML in WordPress, manterrai lo stesso design e aspetto del sito.

1. Scarica le pagine HTML dal tuo host attuale. Usa WinHTTrack per farlo. È un ottimo strumento gratuito che è molto facile da usare. Assicurati di prendere anche la cartella delle immagini (o ovunque tu abbia le tue immagini sul vecchio sito).

2. Installa WordPress sul tuo nuovo host web.

  • Imposta la tua struttura permalink su "Nome post" (/%postname%/)
  • Seleziona la casella "Scora i motori di ricerca dall'indicizzazione di questo sito" (solo fino a quando non è stato fatto tutto)
  • Installa alcuni plugin per la modalità di manutenzione (se lo desideri) in modo che nessuno tranne te possa accedere al tuo nuovo WordPress.
  • Installa il plugin WordPress gratuito HTML Import 2. Usalo per "caricare" il vecchio sito sul tuo nuovo sito. Guida per l'utente per importare l'intera directory di pagine HTML.

3. Carica il contenuto appena scaricato dal passaggio 1 nella nuova struttura di file dell'host web. Mettili in una cartella chiamata, ad esempio, "html-files-to-import". Carica tutte le vecchie immagini nella tua libreria multimediale in WordPress sul tuo nuovo sito.

4. Esegui importazione

5. Prepara il prompt dei comandi DOS ed Excel

  • Al prompt di DOS, vai alla posizione in cui hai posizionato i file HTML (è più semplice inserirli in una cartella denominata "yourwebsite" e inserire quella cartella nell'unità C:\). Quindi, avvia questo comando: i. dir > files.txt
  • Apri il file files.txt in Excel.
  • Ora per Excel. In sostanza, utilizzerai un paio di funzioni di Excel, incluso "concatena" per eseguire il rendering del codice "canonico" che inserirai nei file HTML.
  • Inserisci il codice canonico corrispondente in ogni file HTML. Potresti farlo, affidarlo a un outsourcer o assumere qualcuno per scrivere il codice PHP che lo farebbe automaticamente.

6. Carica i file HTML sul tuo host web . Mettili nella cartella ROOT (cioè, più in alto) per il tuo nuovo sito web. Non dimenticare di caricare anche la cartella delle immagini nel ROOT.

7. Assicurati che tutto funzioni ancora sul nuovo sito.

8. Deseleziona la casella del passaggio n. 2 - "Scoraggi i motori di ricerca dall'indicizzazione di questo sito" e disabilita il plug-in HTML Import 2.

9. Cambia DNS nel tuo registrar.

10. Assicurati che l'URL del tuo sito si risolva nell'IP corretto (il tuo nuovo IP non il vecchio IP) e che TUTTE le pagine vengano caricate correttamente. Potrebbe essere necessario attendere alcune ore prima che i server dei nomi vengano aggiornati.

11. È possibile rimuovere le vecchie pagine HTML dopo un po', ma non è necessario. Non verrai colpito da penalità per "contenuto duplicato" perché i riferimenti canonici si occupano di questo.

Ti consigliamo di aggiungere reindirizzamenti nel tuo file .htaccess che puntino le tue vecchie "pagine .html" alle tue nuove pagine WordPress.

Metodo 2

Se il tuo obiettivo non è solo quello di portare i tuoi contenuti dal tuo sito HTML statico in WordPress, ma anche di duplicare il tuo design attuale, significa che dovrai creare il tuo tema personalizzato.

Si tratta solo di creare alcune cartelle e file, un po' di copia e incolla e quindi il caricamento del risultato. Avrai bisogno di un editor di codice come Sublime o Notepad++ e di accedere sia alla directory del tuo sito HTML che alla directory della tua nuova installazione di WordPress.

1.Crea una nuova cartella del tema e i file necessari. Sul desktop, crea una nuova cartella per contenere i file del tema. Chiamalo come vorresti che il tuo tema fosse identificato.

Quindi, crea alcuni file (che vanno tutti nella nuova cartella del tema) nel tuo editor di codice:

  • Stile.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

2. Copia CSS esistente in un nuovo foglio di stile Se stai cercando di duplicare un design, questo probabilmente significa che hai almeno un CSS che vuoi salvare. Quindi il primo file che vorrai modificare è il tuo file Style.css.

Per iniziare, aggiungi quanto segue all'inizio del file.

 /*
 Nome del tema: sostituisci con il nome del tuo tema.
 URI del tema: URI del tuo tema
 Descrizione: una breve descrizione.
 Versione: 1.0
 Autore: You
 URI dell'autore: l'indirizzo del tuo sito web.
 */

Dopo questa sezione incolla solo il tuo CSS esistente di seguito. Salva e chiudi il file.

3. Separa il tuo HTML corrente

Ecco il processo di tagliare e incollare parti del codice esistente nei diversi file che hai creato.

  • Innanzitutto, apri il file index.html del tuo sito corrente. Evidenzia tutto, dalla parte superiore del file al tag div class="main" di apertura. Copia e incolla questa sezione nel tuo file header.php , salva e chiudi.
  • Torna al tuo file index.html . Evidenzia l'elemento side class="sidebar" e tutto ciò che contiene. Copia e incolla questa sezione nel tuo file sidebar.php , salva e chiudi.
  • Nel tuo index.html seleziona tutto dopo la barra laterale e copialo e incollalo nel tuo file footer.php , salva e chiudi.
  • Nel tuo file index.html , seleziona tutto ciò che è rimasto (questa dovrebbe essere la sezione del contenuto principale) e incollalo nel tuo file index.php . Salva, ma non chiudere ancora. Tuttavia, ora puoi chiudere il file index.html e passare ai passaggi finali. Quasi fatto!

4. Finalizza il file Index.php

Per finalizzare il file index.php del tuo nuovo tema devi assicurarti che possa richiamare l'altra sezione (oltre al contenuto principale) che è ospitata negli altri file che hai creato.

Nella parte superiore del tuo file index.php, inserisci la seguente riga di php.

<?php get_header(); ?>

Quindi, in fondo al tuo file index.php, inserisci queste righe di php.

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

Ora hai "The Loop". Questo è il bit principale di php che WordPress utilizza per mostrare il contenuto del tuo post ai visitatori. Quindi il passaggio finale nella creazione del file index.php del tuo nuovo tema consiste nell'aggiungere il codice sottostante nella sezione dei contenuti.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!-- end entry-->
<div class = "post-footer" >
<div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div>
</div><!-- end post footer-->
</div><!-- end post-->
<?php endwhile ; /* rewind or continue if all posts have been fetched */ ?>
<div class = "navigation index" >
<div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

Salva il tuo index.php e chiudi. Il tuo tema è ora finito! Non resta che caricarlo sul tuo sito Web WordPress.

5. Carica il tuo nuovo tema

Ora memorizzerai i file dei temi creati nella tua nuova cartella dei temi. Installa WordPress.

Posiziona la tua nuova cartella del tema all'interno di /wp-content/themes/ . Vai a WP Admin> Aspetto> Temi e dovresti vedere il tema appena creato lì. Attivalo! Tutto ciò che resta da fare a questo punto è popolare il tuo nuovo sito Web WordPress con il contenuto del tuo vecchio sito.

6. Copia il contenuto dal sito HTML a WordPress

In WP Admin vai su Plugin > Aggiungi nuovo. Cerca un plugin chiamato HTML Import 2 di Stephanie Leary. Una volta installato e attivato questo plugin, segui la sua guida utente per importare l'intera directory di pagine HTML. Dopodiché il tuo sito dovrebbe apparire come prima, semplicemente in esecuzione su WordPress.

Utilizzo del tema WordPress esistente per convertire il sito HTML (metodo più semplice)

Se i passaggi precedenti sembrano troppo intensivi o dispendiosi in termini di tempo, c'è un altro modo. Questo è il modo più semplice.

Invece di convertire il design HTML esistente in modo che abbia lo stesso aspetto su WordPress, puoi sfruttare uno qualsiasi delle migliaia di temi disponibili nel marketplace di WordPress.

Ci sono temi gratuiti e temi premium. Dopo aver scelto un tema che ti piace (e aver scaricato il pacchetto di file zippato), installa/attiva il tuo nuovo tema WordPress.

Una volta fatto, avrai un nuovo sito Web e tema WordPress. Quando visualizzi l'anteprima del tuo sito, sarà vuoto. È ora di importare il contenuto e completare il processo per convertire il sito Web HTML in un sito WordPress.

In WP Admin vai su Plugin > Aggiungi nuovo e cerca un plugin chiamato Importa HTML 2. Segui la guida per l'utente per importare l'intera directory di pagine HTML. Dopodiché, avrai tutti i tuoi vecchi contenuti ma un nuovo aspetto.

4 Converti HTML in WordPress con Theme Matcher

Puoi anche usare Theme Matcher. Offre la conversione automatica da HTML a WordPress. Basta entrare nel tuo sito e selezionare l'area appropriata. Theme Matcher prende immagini, stili e layout dal tuo sito web esistente.

Converti-sito-web-HTML-in-sito-WordPress-con-matcher-tema

5 Servizio di conversione da HTML a WordPress

HTML to WordPress converte i tuoi progetti HTML in temi WordPress senza la necessità di scrivere una singola riga di PHP.

Puoi scegliere il piano di servizio in cui convertiranno il tuo sito Web HTML statico in WordPress. Questa opzione può aumentare di prezzo. Puoi anche scegliere l'opzione Convertitore che è significativamente più economica.

Servizio di conversione da HTML a WordPress

La conversione è completamente automatizzata e la funzionalità del tema può essere estesa semplicemente aggiungendo classi di conversione con prefisso "wp-" nel tuo HTML.

Il convertitore crea modelli per ogni file HTML e fa riferimento alle tue risorse e compila tutte le funzioni PHP necessarie. Usa Bootstrap, Webflow, Dreamweaver o qualsiasi altro strumento/framework con cui sei già a tuo agio per creare siti web. Finché il sito web è realizzato utilizzando HTML, puoi convertirlo in un tema.

Cosa è necessario fare dopo la migrazione?

Una volta completata la conversione, devi fare alcune cose per dare il tocco finale al tuo sito WordPress.

  • Installa i plug-in necessari: per potenziare il tuo nuovissimo sito WordPress con le stesse funzionalità del sito HTML, installa i plug-in che hai trovato utili.
  • Controlla e correggi i collegamenti interrotti: controlla il tuo sito Web per i collegamenti interrotti (errori 404) e, se trovati, correggili.
  • Imposta una pagina di errore 404 personalizzata: aggiungi una pagina di errore 404 personalizzata per portare i tuoi visitatori alle sezioni pertinenti del tuo sito WordPress, nel caso in cui provino ad accedere a qualsiasi URL che non esiste.
  • Collegamenti di reindirizzamento: per informare i motori di ricerca che il contenuto del tuo sito Web è stato spostato a un nuovo indirizzo Web, imposta i reindirizzamenti 301. A questo scopo, puoi utilizzare Simple 301 Redirect.
  • Abilita l'indicizzazione dei motori di ricerca : vai su " Impostazioni -> Lettura " nella dashboard di WordPress e seleziona " Consenti ai motori di ricerca di indicizzare questo sito " per ottenere l'indicizzazione del tuo sito dai motori di ricerca.
  • Genera e invia una mappa del sito XML : per assicurarti che il tuo sito venga incluso nei risultati dei motori di ricerca il più velocemente possibile, crea una mappa del sito XML e inviala a Google.

WordPress vs HTML – PRO e CONTRO

Avviare un sito web aziendale non è un processo facile. Uno dei dilemmi più grandi è se scegliere un sito HTML statico o optare per WordPress.

WordPress – WordPress è percepito come un CMS (Content Management System). Versione HTML semplificata per consentire agli utenti non esperti di aggiungere e modificare elementi sui propri siti Web.

I siti CMS sono generalmente dinamici, il che significa che non ci sono restrizioni alla frequenza con cui modifichi i tuoi contenuti. Puoi cambiare tutto, dalle immagini a interi testi.

L'interfaccia è molto semplice e intuitiva e nessuno ha bisogno di una formazione speciale per impararla. Il mercato dei CMS è altamente competitivo, ma WordPress batte ogni volta la concorrenza.

Un'altra cosa da ricordare prima di iniziare è che c'è una differenza significativa tra WordPress.com e WordPress.org perché quest'ultimo è un CMS open source. WordPress.com, d'altra parte, funziona come un servizio di hosting di blog.

Vantaggi dell'utilizzo di WordPress:

  • Ti fornisce migliaia di plugin per aggiungere al sito le funzionalità che mancano.
  • Una modifica è possibile in qualsiasi momento e nessuno ti limita.
  • Rispetto alla configurazione HTML, WordPress richiede molto meno tempo per essere configurato.

Svantaggi dell'utilizzo di WordPress:

  • Non puoi semplicemente configurarlo e dimenticarlo. Richiede attenzione a tempo pieno e aggiornamento costante di software, plugin e temi.
  • Gli hacker attaccheranno siti Web scarsamente protetti e non aggiornati. Rischi che il tuo sito web non funzionerà affatto se non tieni il passo con gli aggiornamenti.
  • WordPress è facile, ma non così tanto per i principianti. Ci sono molti tutorial online e materiali completi per aiutarti a superare la curva di apprendimento.

Siti Web statici HTML: prima non esistevano i modelli e l'unico modo per creare un sito Web era assumere un professionista della programmazione che lo facesse per te.

Pertanto, tutti i siti Web sono stati creati come HTML statico (Hyper Text Markup Languages). Il punto era avere un sito web. Non modificare il contenuto o il suo layout, perché dovresti assumere di nuovo lo sviluppatore HTML.

Sui siti Web HTML, il contenuto è archiviato in file statici, il che rende incredibilmente difficile modificarlo.

Vantaggi del sito HTML:

  • Una volta che il sito web è online, non è necessario aggiornarlo o eseguirne il backup. La maggior parte delle volte, non deve mai essere cambiato nulla su quel sito web.
  • I siti web HTML sono semplici e facili da configurare.
  • Le loro dimensioni e il fatto che utilizzino meno risorse rispetto ai siti dinamici offrono loro un notevole vantaggio in termini di velocità rispetto ai siti dinamici, facendoli caricare molto più velocemente.

Svantaggi del sito HTML:

Devi essere professionale nei linguaggi di markup. In caso contrario, non sarai in grado di eseguire alcun aggiornamento significativo al tuo sito web. Assumere uno sviluppatore web più e più volte ti costerà, anche se il tuo sito web è molto piccolo o mostra solo informazioni banali.

Un altro importante svantaggio è che non puoi aggiungere plug-in , il che significa che stai affrontando una grave mancanza di funzionalità.

Come Convertire HTML in Riepilogo WordPress

Sia che tu abbia bisogno di più dal tuo sito o che ne crei uno nuovo con un modello in mente, il processo di conversione può sembrare piuttosto complicato a un principiante. La pazienza e la conoscenza ti permetteranno di fare ciò che devi fare con un certo livello di successo.

Una volta che il tuo sito è attivo, puoi essere orgoglioso di sapere che hai imparato a fare qualcosa di nuovo e che sei stato in grado di applicare quella conoscenza al tuo sito web.

Spero che almeno un metodo sopra ti abbia aiutato a convertire il sito Web HTML in WordPress. Se hai qualche altro metodo o tutorial, fammi sapere. Hai mai convertito HTML in WordPress e quali sono le tue esperienze con esso?