Conversione di siti HTML in siti WordPress

Pubblicato: 2018-10-05

All'inizio (del web) tutti i siti web erano realizzati con nient'altro che testo e HTML statico. Ora, però, più di 20 anni dopo, il web è un posto molto diverso. I siti web sono molto più complessi. Forniscono esperienze più ricche e divertenti sia per i creatori di siti che per i visitatori.

Questo è in gran parte grazie a progetti open source come WordPress. Che, negli ultimi dieci anni circa, è riuscita nella sua missione principale di democratizzare l'editoria online (e molto altro ancora) in modo che chiunque abbia un'installazione di WordPress e il tema/plugin giusti possa avere un sito Web moderno con un design avanzato e funzionalità. Nessuna codifica, nemmeno HTML!, richiesta.

Questo è il motivo per cui, per gli utenti accaniti di WordPress come me, è quasi difficile credere che nel 2018 qualcuno possa ancora gestire un sito Web HTML statico invece di un sito Web WordPress con un tema e plug-in. Ma il fatto è che ci sono ancora una quantità significativa di siti solo HTML attivi là fuori. (O HTML con un po' di CSS.)

Certo, questi proprietari di siti potrebbero avere buoni motivi per non eseguire l'aggiornamento o la conversione. Forse il contenuto del loro sito non cambia mai e la semplice formattazione e il design già in atto sono utili? O forse è meno fastidioso che preoccuparsi di mantenere aggiornato un sito WordPress? Entrambi sono validi motivi (tra gli altri). Primi esempi di "Non aggiustare ciò che non è rotto".

Tuttavia, ho la sensazione che questi potrebbero non essere il motivo principale per cui alcuni (forse molti) non hanno fatto il salto. Il più ovvio è che semplicemente non sanno come convertire il loro sito HTML in un sito WordPress. Soprattutto senza perdere contenuti o dover eseguire una formattazione eccessiva pagina per pagina.

Per fortuna, come spesso accade con WordPress, ci sono diversi modi per risolvere questo problema. Ho compilato alcune opzioni di seguito.

Iscriviti al nostro canale Youtube

Le tue opzioni per convertire un sito HTML statico in un sito 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. Dovrai essere tu a decidere quale è meglio per te, ma con i riepiloghi qui sotto dovresti essere in grado di decidere rapidamente e saltare direttamente alle informazioni più rilevanti in questo post per la tua situazione specifica.

Ci sono tre opzioni principali:

1. Crea manualmente un tema WordPress basato sul tuo attuale sito HTML statico.

Ciò richiederà di entrare nel tuo codice. Dovrai accedere alla directory del tuo sito attuale tramite FTP e utilizzare il codice esistente come punto di partenza. Da lì dovrai creare i file necessari per un tema WordPress e copiare bit di codice dal codice WordPress. Questo è abbastanza semplice e diretto se hai esperienza con HTML, CSS e un po' di PHP.

2. Installa un tema predefinito e migra semplicemente i tuoi contenuti.

Questa è probabilmente l'opzione migliore all'incrocio tra semplicità e valore. Supponendo che tu abbia già l'hosting per il tuo sito web attuale, dovrai spendere soldi solo se scegli di acquistare un tema premium. Il plugin che utilizzeremo per importare i contenuti è disponibile gratuitamente nel repository di plugin ufficiale di WordPress.

3. Pagare per avere un servizio di conversione da HTML a WordPress per ricreare il tuo sito.

Questa è la soluzione più semplice, in quanto non richiede di fare molto. Tuttavia, non farà molto per familiarizzare con WordPress e il costo varierà a seconda di chi scegli di assumere. Non tratterò questa opzione nelle sezioni seguenti perché se questo è il percorso che ti interessa, puoi semplicemente fare una rapida ricerca per i fornitori di servizi e loro si prenderanno cura del resto.

Preparazione per la conversione da HTML a WordPress

Indipendentemente dal percorso che decidi di seguire, ci sono alcune cose che vorrai fare prima di immergerti.

Il primo è la scelta di un piano di hosting. Ti consigliamo di esaminare le opzioni disponibili e decidere il pacchetto che meglio si adatta alle tue esigenze. O forse vorresti invece creare un'installazione locale di WordPress? Puoi sempre migrarlo a un servizio di hosting in un secondo momento.

Una volta scelto, dovrai installare WordPress e accedere a WP Admin. Questo è il punto in cui le nostre due possibili strade si dividono.

Conversione manuale del tuo sito HTML statico in WordPress

Se il tuo obiettivo non è solo portare i tuoi contenuti dal tuo sito HTML statico in WordPress, ma anche duplicare il tuo design attuale, significa che dovrai creare il tuo tema personalizzato. Per fortuna, non è così spaventoso come potrebbe sembrare all'inizio. 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.

Passaggio 1: crea una nuova cartella dei temi e i file necessari

Sul desktop, crea una nuova cartella per contenere i file del tema. Chiamalo come vuoi che il tuo tema sia chiamato.

Quindi, crea alcuni file (che vanno tutti nella nuova cartella del tema) nel tuo editor di codice. Non fargli ancora niente. Lasciali aperti per ulteriori modifiche.

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

Passaggio 2: copia CSS esistente in un nuovo foglio di stile

Se stai cercando di duplicare un design, questo probabilmente significa che hai almeno alcuni 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. 

/*
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.
*/

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

Passaggio 3: separa il tuo HTML corrente

Prima di entrare nel terzo passaggio, lascia che ti dia una breve nota su come funziona WordPress. WordPress utilizza PHP per chiamare e recuperare parti di dati dal database sottostante. Ogni file che stiamo utilizzando in questo piccolo tutorial è progettato per dire a WordPress quale parte del contenuto del tuo sito deve essere visualizzata e dove.

Quindi, quando dico che stiamo per "tagliare" il tuo HTML esistente, quello che in realtà stiamo facendo è semplicemente tagliare e incollare parti del tuo codice esistente nei diversi file che abbiamo appena creato, in modo che WordPress sappia dove visualizzare loro.

Eccoci qui.

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.

Secondo, 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.

Terzo, nel tuo index.html seleziona tutto dopo la barra laterale e copialo e incollalo nel tuo file footer.php , salva e chiudi.

Infine, 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!

Passaggio 4: finalizzare 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 si trova negli altri file che hai creato. O in altre parole, rimettere insieme gli elementi che abbiamo appena “tagliato”.

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(); ?>

E infine, dobbiamo aggiungere quello che viene chiamato 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(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) 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><!--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 class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></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.

Passaggio 5: carica il tuo nuovo tema

Ora che hai creato i file del tema e li hai archiviati tutti nella nuova cartella dei temi, dovrai accedere alla directory di installazione della tua nuova WordPress.

Posiziona la tua nuova cartella del tema all'interno di /wp-content/themes/ . Quindi torna a WP Admin> Aspetto> Temi e il tuo tema appena creato dovrebbe apparire lì. Vai avanti e attivalo!

Tutto ciò che resta da fare a questo punto è popolare il tuo nuovo sito Web WordPress con il contenuto del tuo vecchio sito. Segui la sezione seguente (saltando la parte sull'utilizzo di un tema predefinito) per vedere come è fatto.

Utilizzo di un tema WordPress predefinito e importazione di contenuti HTML

Se i passaggi precedenti ti sembrano troppo intensivi o dispendiosi in termini di tempo, stai certo che c'è un altro modo. Invece di convertire qualsiasi design con cui stai lavorando in questo momento in un tema WordPress, puoi sfruttare uno qualsiasi delle migliaia di temi disponibili nel più ampio marketplace di WordPress.

Ci sono temi gratuiti e temi premium. Prima di decidere quale è il migliore per te, potresti voler leggere quali temi sono progettati per soddisfare le tue esigenze e sfogliare per categoria di temi qui su Elegant Themes e altrove.

Dopo aver scelto un tema che ti piace (e aver scaricato il suo pacchetto di file zippato) ti consigliamo di tornare a WP Admin > Aspetto > Temi > Aggiungi nuovo e installare/attivare il tuo nuovo tema WordPress.

Una volta fatto, avrai un nuovo sito Web e tema WordPress, ma poco altro. Quando visualizzi l'anteprima del tuo sito, sarà vuoto di contenuto e probabilmente sembrerà un po' noioso. Va bene, perché ora importeremo il contenuto del tuo vecchio sito.

In WP Admin vai su Plugin > Aggiungi nuovo e cerca un plugin chiamato HTML Import 2 di Stephanie Leary. Una volta installato e attivato questo plugin, segui la sua pratica guida per l'utente per importare l'intera directory di pagine HTML. Completo di immagini!

Dopodiché avrai tutti i tuoi vecchi contenuti che vivono su WordPress e formattati dal tuo nuovo tema. Oppure, se hai creato il tuo tema sopra, il tuo sito dovrebbe assomigliare più o meno a prima, semplicemente in esecuzione su WordPress.

In conclusione

Se hai utilizzato questo post come guida per la migrazione del tuo sito Web su WordPress, allora ti sei appena iscritto a una delle più grandi comunità open source al mondo. Accoglienza! È un posto divertente con molti sviluppatori, designer, blogger, fai-da-te e altro ancora: tutti costruiscono, giocano e creano con WordPress e temi/plugin di WordPress.

Se hai "catturato il bug di WordPress", il sito Web ufficiale di WordPress.org è pieno zeppo di temi, plugin e altre risorse utili. Se desideri modificare ulteriormente i file del tema, esplora il Codex per suggerimenti, trucchi e variazioni apparentemente infiniti.

E ovviamente speriamo che rimarrai in giro per chattare nei commenti qui sotto e ti iscriverai per altri post sul blog in futuro.

Miniatura dell'articolo tramite Max Griboedov / shutterstock.com