Come convertire HTML in WordPress
Convertire HTML in WordPress è una mossa intelligente quando si desidera gestire i contenuti in modo più efficiente e sfruttare la flessibilità del CMS.
Esistono tre metodi principali per effettuare il passaggio: creare un tema WordPress personalizzato dal proprio sito HTML, utilizzare un tema child basato su un template esistente o importare solo i contenuti mantenendo il design.
Ogni approccio si adatta a esigenze diverse, dal controllo completo sul design a una configurazione rapida che dà priorità alla migrazione dei contenuti. Continua a leggere la guida per scoprire di più.
Indice dei contenuti
3 metodi diversi per convertire HTML in WordPress
Puoi convertire il tuo sito web HTML in WordPress in diversi modi, a seconda dei tuoi obiettivi:
- Crea un tema WordPress da un sito HTML statico. Se preferisci mantenere intatto il design del tuo vecchio sito web HTML, questa è l’opzione che fa per te. È anche la soluzione più impegnativa e richiede del codice: per fortuna, tutto quello che devi fare è copiare e incollare il vecchio codice HTML in diversi file PHP.
- Usa un tema figlio adattato da un tema esistente. Questa è probabilmente la soluzione più semplice se desideri mantenere il design del vecchio sito web. Con questo metodo, utilizzerai un tema WordPress preesistente e lo svilupperai. Come bonus, potrai utilizzare subito le potenti funzionalità di WordPress.
- Abbandona il design e mantieni solo i contenuti. Questa opzione è adatta a te se sei disposto ad abbandonare il vecchio design del tuo sito web e a trovare un tema WordPress per un nuovo inizio. Devi solo trasferire i contenuti nella loro nuova sede.
1. Crea un tema WordPress da un sito HTML statico
Questo metodo è ideale se desideri mantenere il design del tuo attuale sito web HTML, pur continuando ad accedere alle funzionalità del CMS di WordPress. Il processo prevede la conversione dei file HTML in un tema WordPress.
Per mostrarti come fare, utilizzeremo un template HTML statico di Rachel McCollin.
1. Crea una cartella del tema e i file di base
Crea una nuova cartella del tema sul desktop e assegnale un nome. Noi chiameremo la nostra cartella mio-tema. Dopodiché, apri l’editor di codice e crea i seguenti file:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
Tieni presente che alcuni di questi file potrebbero essere facoltativi, a seconda delle funzionalità e del design del tuo tema.
Dopo aver creato i file, lascia l’editor aperto. Ci torneremo più avanti.
2. Cambia il CSS del vecchio sito web nel foglio di stile di WordPress
Ora creeremo un foglio di stile WordPress copiando il tuo vecchio codice CSS. Vai al file style.css e incolla questo codice:
/* Theme Name: My Theme Author: LakiGarang Author URI: https://hostinger.com/tutorials/author/luqman Description: A development theme, from static HTML to WordPress Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Questo codice fornisce a WordPress l’informazione che si tratta dell’header dello stylesheet del tema. Puoi modificare dettagli come il nome del tema, l’autore e l’URL, la descrizione, ecc.
Subito dopo l’header, copia e incolla il tuo vecchio codice CSS nel file. Salva e chiudi.
3. Suddividi il codice HTML del tuo vecchio sito web
WordPress utilizza PHP per estrarre dinamicamente i contenuti dal suo database. Per rendere compatibile il tuo vecchio sito HTML, dovrai suddividerlo in file del template separati in modo che WordPress possa assemblare correttamente le pagine.
Diamo un’occhiata a come sono strutturati il nostro sito web statico e il suo codice:
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
</ul>
</div>
</nav><!-- .main -->
<div class="main">
<div id="content" class="two-thirds left">
<article class="post">
<h2 class="entry-title">Welcome to This Website</h2>
<section class="entry-content">
<p>This site is comprised of one static HTML file.</p>
<p>You will be able to add more content later via the WordPress admin screens.
<h3>Here's a heading so you can check how it's styled</h3>
<p>And another paragraph underneath.</p>
<p>And a list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>And so on...</li>
</ul>
</section><!-- .entry-content -->
</article><!-- #post-## -->
</div><!-- #content -->
<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>
</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
</body>
</html>
Ora apri il tuo vecchio file index.html del sito web statico. Lo suddivideremo nei file WordPress appena creati. (Gli esempi riportati di seguito sono il nostro markup).
header.php
Tutto, dall’inizio del vecchio codice HTML fino all’area del contenuto principale, va inserito in questo file. L’area del contenuto principale è solitamente indicata con <main> o <div class=”main”>.
Inoltre, subito prima dell’elemento </head>, copia e incolla questo codice <?php wp_head();?>. Questo garantisce il corretto funzionamento dei plugin di WordPress. Quando hai terminato, salva il file.
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
</ul>
</div>
</nav><!-- .main -->
sidebar.php
Tutto ciò che appartiene alla sezione <aside … </aside> del tuo vecchio codice HTML va in questo file. Una volta terminato, salva il file.
<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>
footer.php
Ora, tutto fino alla fine del file dovrebbe contenere le informazioni del piè di pagina, che vanno inserite in questo file. Appena prima della parentesi di chiusura </body>, aggiungi questo codice <?php wp_footer();?> per lo stesso motivo di header.php. Al termine, salvalo.
</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
<?php wp_footer();?>
</body>
</html>
Ora hai finito con il vecchio file index.html. Puoi chiuderlo insieme agli altri file nella cartella del tema, a eccezione di header.php e index.php, su cui c’è ancora del lavoro da fare.
4. Cambia lo stile nel formato WordPress
Nell’intestazione, tutto quello che devi fare è cambiare il foglio di stile da HTML a WordPress. Cerca un link esistente nella sezione <head>. Nel nostro caso, è qualcosa di simile a questo:
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
Sostituiscilo con questa riga:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
Ora puoi salvare e chiudere il file header.php.
Passiamo al file index.php. Al momento dovrebbe essere vuoto, quindi copia e incolla queste righe di codice:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Questo codice richiamerà il resto dei tuoi file WordPress. Dovresti notare lo spazio tra l’intestazione e la barra laterale. È lì che aggiungerai Il Loop.
Il Loop elaborerà ogni post per la visualizzazione e lo formatterà in base alla corrispondenza del contenuto con i criteri dei tag del Loop. Aggiungere contenuti dinamici al tuo sito WordPress è un aspetto importante.
Per farlo, incolla il seguente codice subito dopo <?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; ?>
Al termine, salva il file index.php e chiudilo. Hai creato con successo un tema WordPress e puoi aggiungerlo al tuo sito WordPress.
5. Carica il tuo tema su WordPress
Una volta che il tema di base è pronto, puoi caricarlo su WordPress. Assicurati che tutti i file nella cartella del tema siano organizzati nella stessa directory, quindi comprimi la cartella in un file .zip per una facile installazione.
Vai alla dashboard di amministrazione di WordPress. Vai su Aspetto → Temi. Clicca su Aggiungi nuovo → Carica temi.
Nel menu, individua il file zip del tuo tema, caricalo, clicca su Installa ora e attiva il tema.
A questo punto, il tuo front-end dovrebbe assomigliare al tuo vecchio sito. Sebbene il design di base sia stato mantenuto, ci sono ulteriori passaggi che puoi seguire per integrarlo completamente con WordPress.
Ad esempio, le funzionalità di WordPress come le aree widget non funzioneranno automaticamente e potrebbe essere necessario adattare il CSS per allinearlo alla struttura del tema e alle convenzioni di stile di WordPress.
2. Usa un tema child adattato da un tema esistente
Se desideri mantenere elementi del design del tuo vecchio sito web ma trovi difficile creare un tema completo da zero, un’alternativa semplice è usare un tema child.
I temi child consentono di creare contenuti partendo da un tema WordPress esistente (il tema parent) senza modificarne il core. Tutte le personalizzazioni apportate a un tema child vengono mantenute quando il tema parent viene aggiornato.
Passaggio 1: scegli un tema parent adatto
Scegli un tema principale che si adatti il più possibile al layout del tuo vecchio sito per ridurre al minimo le modifiche di design. Scegli un tema gratuito dalla directory di WordPress che si adatti al meglio al layout desiderato. Ad esempio, potresti iniziare con un tema predefinito come Twenty Twenty-Five.
Passaggio 2: crea un tema child
Puoi impostare manualmente un tema child o utilizzare un plugin come Childify Me per automatizzare il processo. Entrambi gli approcci ti offriranno un ambiente sicuro per personalizzare il tuo sito senza modificare il tema parent.
Non modificare direttamente il tema principale. Crea invece una nuova cartella per il tuo tema child all’interno della directory /wp-content/themes/.
All’interno di questa nuova cartella, avrai bisogno di due file essenziali:
- style.css: questo file contiene le tue regole CSS personalizzate ed è l’unico file necessario per rendere il tuo tema child riconoscibile da WordPress. La parte superiore di questo file deve includere un blocco di commenti nell’header per identificare il tema parent.
- functions.php: questo file indica a WordPress di caricare il foglio di stile del tema parent in modo che il tema child possa ereditarne il design.
Passaggio 3: metti in coda il foglio di stile del tema parent
Apri il file functions.php del tuo tema child e aggiungi questo codice:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Passaggio 4: personalizza il tema child
Ora puoi iniziare ad apportare modifiche al tema. Per aggiungere uno stile personalizzato, aggiungi le tue regole CSS direttamente al file style.css del tuo tema child, dopo il blocco di commenti nell’header.
Per modificare il layout o le funzionalità di un tema parent, copia il file del template specifico dalla cartella del tema parent (ad esempio, header.php o page.php) e incollalo nella cartella del tema child. Quindi, modifica il file nel tuo tema child. WordPress utilizzerà automaticamente la tua versione modificata invece del tema parent.
Passaggio 5: inizia a importare i tuoi contenuti
Usa Importatore WordPress per importare i tuoi post, le tue pagine e i tuoi contenuti multimediali nel nuovo sito oppure aggiungi manualmente i tuoi contenuti creando nuovi post e pagine nella dashboard di WordPress.
3. Rinuncia al design e mantieni solo il contenuto
Se il design del tuo vecchio sito web è obsoleto e desideri un nuovo inizio, migra i tuoi contenuti in un nuovo tema WordPress utilizzando il blocco HTML personalizzato di Gutenberg. Questo metodo separa i tuoi contenuti dal vecchio design, permettendoti di sfruttare appieno le funzionalità moderne di WordPress.
Questo approccio è ideale per i siti web con poche pagine o per quelli in cui un design nuovo e moderno è una priorità assoluta.
Il modo più semplice per spostare i contenuti è utilizzare il blocco HTML personalizzato nativo di WordPress. Questo metodo non richiede plugin, ma è un processo manuale che dovrebbe essere utilizzato solo per siti web di piccole dimensioni o singole pagine.
- Apri i tuoi vecchi file HTML. Apri ogni file HTML del tuo vecchio sito web in un browser web.
- Crea nuove pagine o post di WordPress. Nella dashboard di WordPress, vai su Pagine → Aggiungi nuovo o Post → Aggiungi nuovo.
- Aggiungi un blocco HTML personalizzato. Nell’editor di WordPress, clicca sull’icona + per aggiungere un nuovo blocco. Cerca e seleziona il blocco HTML personalizzato.
- Copia e incolla il contenuto. Torna al tuo vecchio file HTML e copia l’intera sezione di contenuto che desideri migrare (ad esempio, dal tag di apertura <body> al tag di chiusura </body>, oppure solo l’area del contenuto principale). Incolla questo codice HTML direttamente nel blocco HTML personalizzato in WordPress.
- Pubblica e revisiona. Pubblica la nuova pagina o il nuovo post e visualizzalo per vedere come appare con il tuo nuovo tema WordPress.
Nota importante: sebbene questo metodo preservi la struttura HTML originale, presenta notevoli svantaggi. Il contenuto di un blocco HTML personalizzato viene trattato come un’unica unità statica. Questo significa che non potrai modificarlo utilizzando altri blocchi o funzionalità di Gutenberg. Per un sito WordPress veramente dinamico e modificabile, è necessario ricreare manualmente il contenuto utilizzando blocchi nativi.
Come ottenere il massimo dal tuo sito WordPress
Una volta convertito il tuo sito HTML in WordPress, il vero vantaggio deriva da quello che puoi fare in seguito. WordPress offre infinite opportunità, dai plugin che estendono le funzionalità ai temi che trasformano il tuo design.
Ecco alcuni modi per far crescere ulteriormente il tuo nuovo sito WordPress:
- Esplora le funzionalità avanzate di WordPress come la memorizzazione nella cache, i plugin SEO e le tipologie di post personalizzate.
- Aggiorna regolarmente temi e plugin per mantenere il tuo sito sicuro.
- Sperimenta i moderni builder di pagina per un controllo più semplice del design.
- Monitora le prestazioni con strumenti integrati e plugin di analisi.
Angelica è una traduttrice freelance specializzata in contenuti per il web da sempre amante delle lingue. Laureata in design della comunicazione, lavora anche come graphic designer e punta ad approfondire ogni mezzo che possa trasmettere un messaggio. Nel tempo libero, si dedica a scoprire nuove cose, disegnare e giocare ai videogiochi. Seguila su LinkedIn.
