Conversione di modelli HTML in temi WordPress

Sebbene la tecnologia web abbia fatto molta strada, ci sono ancora siti web creati esclusivamente con HTML. Se ti capita di possederne uno, ti starai chiedendo come convertire un modello HTML in un tema WordPress.

Fortunatamente, hai diverse opzioni a tua disposizione, se vuoi convertire quei file HTML in WordPress. Le tecniche disponibili vanno dalle conversioni manuali pratiche alla collaborazione con esperti in grado di gestire tutto il sollevamento pesante.

In questo articolo tratteremo quattro diversi approcci alla conversione di template HTML. Per ognuno, forniremo istruzioni e risorse che possono aiutarti a portare un sito Web basato su HTML nella piega di WordPress. C'è molto da coprire, quindi tuffiamoci subito!

Conversione HTML manualmente

La prima opzione quando si tratta di conversione è l'approccio manuale. Poiché si tratta di un processo piuttosto pratico, dovrai assicurarti di avere accesso ai file sia per il tuo sito Web originale che per quello nuovo.

In genere, a questo scopo utilizzerai un'applicazione SFTP (Secure File Transfer Protocol). Una volta effettuato l'accesso al tuo sito web, puoi procedere con i seguenti passaggi.

Passaggio 1: crea una cartella del tema

Innanzitutto, dovrai creare una cartella per contenere i tuoi nuovi file del tema ed etichettarla con il nome del tuo nuovo tema. Utilizzando il tuo editor di codice, puoi quindi creare cinque file specifici:

• style.css
• indice.php
• header.php
• piè di pagina.php
• barra laterale.php

Per ora, puoi semplicemente lasciare questi file vuoti e salvarli nella cartella appena creata.

Passaggio 2: copia e incolla il tuo CSS esistente

La tua prossima priorità è personalizzare il file CSS (Cascading Style Sheet). Qui è dove delineerai tutti i diversi elementi di stile per il tuo sito.

In alto, è buona norma aggiungere alcune informazioni sul file. In effetti, quando si tratta di WordPress, ci sono alcuni elementi necessari affinché il tema sia presente nella directory dei temi.

Al di sotto di tali informazioni, dovrai quindi incollare tutti gli stili CSS esistenti dal tuo sito Web originale che desideri trasferire nel tuo nuovo tema.

Passaggio 3: separa l'HTML esistente

Nel tuo sito web originale, è probabile che il codice HTML che designa l'intestazione, il piè di pagina, la barra laterale e le aree del contenuto principale si trovino nel file index.html . Ora, dovrai suddividere ciascuno di questi elementi nei nuovi file che hai creato per il tuo tema WordPress.

Ad esempio, nel file index.html del tuo sito web originale, puoi individuare il primo tag <div> con la classe "main". Tutto ciò che precede questo tag può quindi essere copiato e incollato nel tuo nuovo file header.php .

Ripeterai quindi questo processo per i tag "barra laterale" e "piè di pagina". Copia il codice contenuto in ciascuno di questi elementi e incollalo nei rispettivi file PHP.

Ora, ciò che ti rimane è la parte principale del tuo file index.html . Questo è ciò che costituisce il layout del contenuto principale del tuo sito Web basato su HTML. Dovrai copiare questo codice rimanente e incollarlo nel tuo nuovo file index.php .

Passo 4: Configura il tuo file Index.php

Il tuo prossimo passo è assicurarti che il tuo nuovo file di indice possa individuare i file necessari per consentire al tuo tema di visualizzare la struttura e lo stile del tuo sito. Per raggiungere questo obiettivo, utilizzerai i tag modello di WordPress. Questi sono usati per dire al tema di recuperare i file di intestazione, piè di pagina e barra laterale.

Ad esempio, puoi fare in modo che il tuo modello visualizzi il file di intestazione che hai creato utilizzando il seguente tag:

get_header();

Lo inserirai nel tuo file modello index.php o nelle pagine successive in cui desideri che appaia l'intestazione. Lo stesso vale per il tuo piè di pagina.

C'è anche un'altra parte importante del tuo nuovo modello che dovrai capire. Questo è chiamato il ciclo di WordPress, uno snippet di codice PHP che dice al modello di inserire i post. Può anche essere personalizzato per controllare quanti post vengono visualizzati.

Passaggio 5: carica il tuo nuovo tema

Ora che il tuo nuovo tema è pronto per l'azione, dovrai posizionare la sua cartella nella directory wp-themes/content/ del tuo sito web:

Dopo aver caricato i file, puoi accedere alla dashboard di WordPress e andare su Aspetto > Temi. Qui dovresti vedere il tuo nuovo tema elencato ed essere in grado di fare clic su Attiva e iniziare a usarlo.

Importazione di contenuto HTML con un plug-in

Un altro modo per gestire questo processo è utilizzare un plug-in per trasferire i contenuti dal tuo vecchio sito basato su HTML. Sfortunatamente, sono disponibili pochissimi strumenti compatibili con le versioni recenti di WordPress. Puoi dare un'occhiata a una prova gratuita di WP Site Importer, tuttavia:

Questo plug-in può eseguire la scansione dell'intero sito Web e catalogare il contenuto mobile. Funziona meglio se il tuo HTML è ben organizzato e "pulito" per cominciare. Potrai anche importare contenuti come menu e link.

Utilizzo di un tema figlio

Un altro modo per spostare il tuo sito HTML in WordPress è con un tema figlio. Questo ha la stessa funzionalità e lo stesso stile di base del tema principale, ma sarai in grado di conservare qualsiasi modifica e personalizzazione apportata, anche se aggiorni il tema principale.

Passaggio 1: scegli un tema

Ci sono molti temi gratuiti ben costruiti tra cui scegliere nella directory dei temi di WordPress. Una volta selezionato quello che ti piace, dovrai installarlo in modo che i suoi file siano disponibili nella directory dei file del tuo sito web:

Tuttavia, non è necessario attivare questo tema principale.

Passaggio 2: crea una cartella per il tuo tema figlio

Successivamente, dovrai accedere ai tuoi file con un'applicazione FTP e creare una nuova cartella nella directory wp-content/themes . Questo file dovrebbe avere lo stesso nome del tema principale, con "-child" aggiunto alla fine.

Ad esempio, se hai intenzione di creare un tema child per Twenty Nineteen, puoi creare una cartella chiamata ventinoveteen-child:

Questa configurazione significa che il tuo tema figlio sarà in grado di estrarre automaticamente funzioni e stili dal tema principale, una volta impostato il resto dei file del tema necessari.

Passaggio 3: impostare un foglio di stile

Il tuo prossimo passo sarà impostare il tuo file style.css . WordPress richiede alcune informazioni specifiche nel foglio di stile per far funzionare la relazione del tema genitore-figlio. Puoi anche incollare ulteriori informazioni sullo stile dai tuoi file HTML originali, se necessario.

Passaggio 4: impostare un file Function.php

Ora che hai essenzialmente due temi con cui stai lavorando, dovrai dire a WordPress che il tuo tema figlio dipende dal CSS del genitore. Per questo, puoi usare la chiamata PHP wp_enqueue_style() .

Per prima cosa creerai un file function.php e lo inserirai nella cartella del tema figlio. Questo è il file in cui eseguirai la funzione enqueue che spiega le dipendenze e la gerarchia del tema.

Passaggio 5: attiva il tema figlio

Dopo aver caricato questi nuovi file sul server del tuo sito web, puoi tornare alla dashboard di WordPress e andare su Aspetto > Temi . Lì, ora dovresti vedere il tuo tema figlio pronto per l'uso.

Fai clic su Attiva sul tema figlio per impostarlo come tema del tuo sito web. Quindi sei pronto per iniziare a copiare il contenuto del tuo sito Web HTML nel tuo nuovo sito WordPress.

Acquista un servizio di conversione del sito

Se non hai il tempo o le risorse per eseguire tu stesso una conversione, puoi anche provare un servizio di conversione. Inoltre, se hai bisogno di più risorse o assistenza per la migrazione di altri contenuti WordPress, qui su WP Engine offriamo molte soluzioni e risorse per la migrazione e la conversione.

1. Assumi WPGeeks

HireWPGeeks è un'opzione di conversione a servizio completo. Gestirà tutto il lavoro pesante e ti ritroverai con un sito Web WordPress flessibile, reattivo e basato su temi completo di tutti i tuoi contenuti. Dovrai contattare l'azienda per un preventivo, ma puoi pianificare i suoi servizi a partire da $ 89.

2. Soluzioni FantasTech

FantasTech Solutions è un altro servizio di conversione da HTML a WordPress. Pubblicizza conversioni altamente professionali da HTML in modelli di temi WordPress di fascia alta e ben codificati. Ti consigliamo di tenere presente che i costi partono da $ 297 per una pagina. Le pagine aggiuntive partono da $ 147 ciascuna, con prezzi esatti a seconda della complessità.

Personalizza la tua esperienza sul sito con WP Engine

Potrebbe sembrare una grande impresa, ma convertire il tuo sito Web HTML in WordPress può aprire molte altre opportunità. Con questa piattaforma altamente flessibile ed estensibile, diventerai più agile e in grado di distribuire rapidamente nuovi contenuti.

Qui a WP Engine, crediamo che le giuste risorse per sviluppatori possano avere un enorme impatto sui tuoi progetti. Oltre a soluzioni innovative, offriamo piani e piani tariffari per qualsiasi budget!