All’inizio (del web) tutti i siti erano fatti 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 piacevoli sia per i creatori del sito che per i visitatori.
Questo è in gran parte grazie a progetti open source come WordPress. Che, negli ultimi dieci anni o giù di lì, è riuscito nella sua missione principale di democratizzare la pubblicazione online (e molto di più nel processo) in modo che chiunque con un’installazione di WordPress e il tema/plugin giusto possa avere un sito web moderno con design e funzionalità avanzate. Nessun codice – nemmeno HTML! – richiesto.
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 WordPress con un tema e plugin. Ma il fatto è che ci sono ancora una quantità significativa di siti attivi solo in HTML là fuori. (O HTML con un po’ di CSS.)
Concesso, questi proprietari di siti possono avere buone ragioni per non aggiornare o convertire. 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 un sito WordPress aggiornato? Entrambe sono ragioni valide (tra le altre). Primi esempi di “Non aggiustare ciò che non è rotto”.
Tuttavia, ho la sensazione che queste potrebbero non essere le ragioni principali 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 il contenuto o senza dover fare un’eccessiva formattazione pagina per pagina.
Fortunatamente, come spesso accade con WordPress, ci sono diversi modi per risolvere questo problema. Ho compilato alcune opzioni qui sotto.
Sottoscrivi il nostro canale Youtube
Le tue opzioni per convertire un sito HTML statico in un sito WordPress
Come scegli di convertire il tuo sito HTML statico in un sito WordPress dipenderà senza dubbio dalle tue preferenze personali, dal tempo desiderato/investimento monetario, e dal livello di abilità con il codice. Dovrete essere voi a decidere quale sia il meglio per voi, ma con i riassunti qui sotto dovreste essere in grado di decidere rapidamente e passare direttamente alle informazioni più rilevanti in questo post per la vostra situazione specifica.
Ci sono tre opzioni principali:
1. Creare manualmente un tema WordPress basato sul vostro attuale sito HTML statico.
Questo vi richiederà di entrare nel vostro codice. Dovrete accedere alla directory del vostro sito attuale tramite FTP e utilizzare il vostro codice esistente come punto di partenza. Da lì dovrai creare i file necessari per un tema WordPress e copiare pezzi di codice dal codex di WordPress. Questo è abbastanza semplice e diretto se hai un po’ di esperienza con HTML, CSS e un po’ di PHP.
2. Installare un tema pre-fatto e semplicemente migrare il tuo contenuto.
Questa è probabilmente la migliore opzione all’incrocio tra semplicità e valore. Supponendo che tu abbia già l’hosting per il tuo sito attuale, avrai bisogno di spendere soldi solo se scegli di acquistare un tema premium. Il plugin che useremo per importare i contenuti è liberamente disponibile nel WordPress Plugin Repository ufficiale.
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 varia a seconda di chi si sceglie di assumere. Non coprirò 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
Non importa quale percorso deciderai di seguire, ci sono alcune cose che vorrai fare prima di tuffarti.
La prima è scegliere un piano di hosting. Vorrai esaminare le opzioni che sono là fuori e decidere su un pacchetto che meglio si adatta alle tue esigenze. O forse vorresti invece creare un’installazione locale di WordPress? Puoi sempre migrare su un servizio di hosting più tardi.
Una volta che hai scelto, dovrai installare WordPress e accedere a WP Admin. Questo è il punto in cui i nostri due possibili percorsi si dividono.
Convertire manualmente il tuo sito HTML statico in WordPress
Se il tuo obiettivo non è solo quello di ottenere il tuo contenuto dal tuo sito HTML statico in WordPress ma anche di duplicare il tuo attuale design, questo significa che dovrai creare il tuo tema personalizzato. Fortunatamente, questo non è così spaventoso come potrebbe sembrare all’inizio. Si tratta solo di creare alcune cartelle e file, un po’ di copia e incolla, e poi caricare il risultato.
Avrai bisogno di un editor di codice come Sublime o Notepad++ e l’accesso sia alla directory del tuo sito HTML che a quella della tua nuova installazione di WordPress.
Step 1: Crea una nuova cartella del tema e i file necessari
Sul tuo desktop, crea una nuova cartella per contenere i file del tema. Nominala come vuoi che il tuo tema sia chiamato.
Poi, crea alcuni file (che vanno tutti nella tua nuova cartella del tema) nel tuo editor di codice. Non fare nulla per il momento. Lasciali aperti per ulteriori modifiche.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Passo 2: Copiare il CSS esistente nel nuovo foglio di stile
Se stai cercando di duplicare un design, questo probabilmente significa che hai almeno del CSS che vuoi salvare. Quindi il primo file che vorrai modificare è il tuo file Style.css.
Per iniziare, aggiungi quanto segue all’inizio del tuo file.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Dopo questa sezione incolla semplicemente il tuo CSS esistente. Salva e chiudi il file.
Passo 3: Separa il tuo attuale HTML
Prima di arrivare al terzo passo, lascia che ti dia una breve nota su come funziona WordPress. WordPress usa PHP per chiamare e recuperare pezzi di dati dal suo database sottostante. Ogni file che useremo 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 stiamo facendo in realtà è semplicemente tagliare e incollare parti del tuo codice esistente nei diversi file che abbiamo appena creato, in modo che WordPress sappia dove visualizzarle.
Ecco qui.
Primo, apri il file index.html del tuo sito attuale. Evidenzia tutto dall’inizio del file fino al tag di apertura div class=”main”. Copia e incolla questa sezione nel tuo file header.php, salva e chiudi.
In secondo luogo, torna al tuo file index.html. Evidenzia l’elemento aside class=”sidebar” e tutto quello che c’è dentro. Copia e incolla questa sezione nel tuo file sidebar.php, salva e chiudi.
In terzo luogo, nel tuo index.html seleziona tutto dopo la tua 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.
Ora però puoi chiudere il tuo file index.html e passare ai passi finali. Quasi fatto!
Passo 4: Finalizzare il tuo file index.php
Per finalizzare il file index.php del tuo nuovo tema devi assicurarti che possa richiamare le altre sezioni (oltre al contenuto principale) che si trovano negli altri file che hai creato. In altre parole, rimettiamo insieme gli elementi che abbiamo appena “sminuzzato”.
In cima al tuo file index.php, metti la seguente linea di php.
<?php get_header(); ?>
Poi, in fondo al tuo file index.php, metti queste linee di php.
<?php get_sidebar(); ?><?php get_footer(); ?>
E infine, dobbiamo aggiungere quello che si chiama The Loop. Questo è il pezzo principale di php che WordPress usa per mostrare il contenuto del tuo post ai visitatori. Quindi il passo finale nella creazione del file index.php del tuo nuovo tema è l’aggiunta del codice qui sotto nella sezione content.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?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! Tutto ciò che resta è caricarlo sul tuo sito WordPress.
Step 5: Carica il tuo nuovo tema
Ora che hai creato i file del tuo tema e li hai tutti memorizzati nella tua nuova cartella del tema, avrai bisogno di accedere alla directory della tua nuova installazione di WordPress.
Posiziona la tua nuova cartella del tema dentro /wp-content/themes/. Poi torna indietro 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 WordPress con il contenuto del tuo vecchio sito. Segui la sezione qui sotto (saltando la parte sull’uso di un tema pre-fatto) per vedere come si fa.
Usare un tema WordPress pre-fatto e importare il contenuto HTML
Se i passi sopra ti sembrano troppo intensivi o lunghi, allora stai tranquillo, c’è un altro modo. Invece di convertire qualsiasi design con cui stai lavorando in questo momento in un tema WordPress, puoi approfittare di uno qualsiasi delle migliaia di temi disponibili nel più ampio mercato di WordPress.
Ci sono temi gratuiti e ci sono temi premium. Prima di decidere quale sia il migliore per te, potresti voler leggere su quali temi sono progettati per soddisfare le tue esigenze e sfogliare per categoria di tema qui a Elegant Themes e altrove.
Una volta che hai scelto un tema che ti piace (e hai scaricato il suo pacchetto di file zippato) vorrai tornare a WP Admin > Aspetto > Temi > Aggiungi nuovo e installare/attivare il tuo nuovo tema WordPress.
Una volta fatto questo, avrai un nuovo sito WordPress e un tema-ma poco altro. Quando vedrai il tuo sito in anteprima, sarà vuoto di contenuti e probabilmente sembrerà un po’ noioso. Questo va bene, perché ora stiamo per importare il contenuto del vostro vecchio sito.
In WP Admin andate su Plugins > Add New e cercate un plugin chiamato HTML Import 2 di Stephanie Leary. Una volta che questo plugin è installato e attivato, segui la sua pratica guida utente per importare la tua intera directory di pagine HTML. Completa di immagini!
Dopo questo avrete tutti i vostri vecchi contenuti che vivono su WordPress e formattati dal vostro nuovo tema. Oppure, se hai creato il tuo tema sopra, il tuo sito dovrebbe avere più o meno lo stesso aspetto di prima, solo che gira su WordPress.
In conclusione
Se hai usato questo post come guida per migrare il tuo sito web su WordPress, allora ti sei appena unito ad una delle più grandi comunità open source del mondo. Benvenuti! È un posto divertente con un sacco di sviluppatori, designer, blogger, autocostruttori, e altro ancora, tutti che costruiscono, giocano e creano con WordPress e i temi/plugin di WordPress.
Se hai “preso il virus di WordPress” il sito ufficiale WordPress.org è pieno zeppo di temi utili, plugin e altre risorse. Se vuoi modificare ulteriormente i file del tuo tema, esplora il Codex per suggerimenti, trucchi e variazioni apparentemente senza fine.
Se hai “preso il virus di WordPress”, il sito ufficiale di WordPress.org è pieno zeppo di risorse utili.