Technologie Gadgets, SEO Tipps, Geld Verdienen mit WEB!

Come convertire un sito Web HTML in un sito Web WordPress…

Come convertire un sito Web HTML in un sito Web WordPress...

Molte aziende si affidano ancora a semplici siti Web HTML per la propria presenza online. Questi siti Web HTML sono generalmente statici, il che significa che dovrai modificare il codice per cambiare anche un piccolo dettaglio sul sito Web. Per evitare ciò, però, puoi convertire il tuo sito Web HTML in WordPress.

In questo tutorial ti insegnerò come convertire l’HTML in un tema aziendale WordPress. Ciò mantiene intatti tutti gli elementi HTML e ti offre la flessibilità di WordPress per personalizzare facilmente qualsiasi elemento.

Se hai familiarità sia con HTML che con WordPress, allora questo tutorial fa al caso tuo. Se sei un principiante, prova a farlo con un sito Web fittizio sul tuo host locale come XAMPP.

  • Conversione del sito Web HTML in WordPress
  • Di quali file WordPress hai bisogno
  • Configurazione di CSS, JavaScript e immagini
  • Aggiunta di funzioni WordPress per aggiungere funzionalità

Conversione del sito HTML in un tema WordPress

Per questo tutorial, ho scelto un tema aziendale HTML gratuito da Qui. La tecnica rimarrà la stessa durante la conversione di qualsiasi tema aziendale. Quindi puoi modificare uno qualsiasi dei migliori temi WordPress seguendo questa procedura.

Se hai domande sul tema della tua attività, lascia semplicemente un commento o un’e-mail e sarò felice di rispondere.

Andiamo avanti. Per prima cosa, dai un’occhiata al tuo tema HTML e annota gli elementi dell’intestazione, del corpo principale e del piè di pagina.

Intestazione: L’intestazione includerà la parte superiore della sezione.

Corpo principale: è una pagina lunga, quindi ho rimpicciolito per fare uno screenshot, ma l’intera parte centrale è inclusa nel corpo principale.

Piè di pagina: la sezione del piè di pagina includerà la parte inferiore.

Passaggio 1: prerequisiti

Spero che tu abbia già installato WordPress sul tuo host locale come XAMPP (cioè sul tuo computer). In caso contrario, abbiamo già trattato una guida dettagliata per aiutarti a installare e configurare WordPress localmente.

Passaggio 2: crea la cartella del tema

Per questo tutorial, sto utilizzando XAMPP e il mio sito WordPress è installato nella cartella htdocs. Per creare un tema WordPress, devi accedere alla cartella dei temi e creare una nuova cartella.
Ora aperto XAMPP cartella > htdocs > WordPress cartella (nel mio caso è test) > contenuto wp > temi.

Nella cartella Temi vedrai tutti i temi WordPress installati. Crea una nuova cartella e dai un nome al tema.

Passaggio 3: crea file PHP

La cartella del tema appena creata è vuota ed è necessario creare alcuni file per renderla funzionale. Per questo, devi avviare il tuo editor di codice (VS Code) e aprire l’intera cartella del tema WordPress (nel mio caso, farhan-wordpress-theme).

Ora crea i seguenti file WordPress essenziali per organizzare meglio il tuo tema.

  1. style.css (contiene dettagli sul tema e file CSS)
  2. index.php (serve il contenuto principale se non vengono dichiarati altri file opzionali)
  3. header.php (contiene gli elementi di intestazione del tema)
  4. footer.php (contiene gli elementi footer del tema)
  5. functions.php (contiene le funzioni presenti nel tema WordPress)

Passaggio 4: copia le cartelle CSS, Immagini e JavaScript (JS).

Dal tema HTML (scaricato sopra), copia la cartella delle risorse (cartelle CSS, JS e immagini) nella nuova cartella del tema WordPress.

Dopo esserti spostato nella nuova cartella dei temi WordPress, sarà simile a questo:

Passaggio 5: attiva un nuovo tema WordPress

Ora hai aggiunto le cartelle importanti richieste per qualsiasi tema WP. Successivamente, apri il tuo sito WordPress sul tuo browser e accedi alla tua Dashboard. Navigare verso Aspetto > Temi, e vedrai che il tuo nuovo tema è stato aggiunto a questa sezione.

Questo tema sembra vuoto. Per aggiungere le Informazioni e il banner per il tema appena creato, apri il file style.css (creato in precedenza) e incolla il seguente codice e salvalo (ctrl+s).

/* Nome del tema: Farhan WordPress Theme Autore: Farhan Descrizione: Converti HTML in tema WordPress. Versione: 1.0 */

Per il banner, devi aggiungere un file immagine alla cartella del nuovo tema. La dimensione dell’immagine dovrebbe essere 800 x 600 e il nome dell’immagine dovrebbe essere Immagine dello schermo (formato png).

Una volta aggiunto il file screenshot.png, aggiorna la dashboard di wp-admin e verrà visualizzato il banner dell’immagine.

Ora puoi visualizzare le informazioni sul tema quando fai clic sul banner.

Successivamente, fai semplicemente clic su Attivare.

Passaggio 6: converti il ​​codice HTML in intestazione, indice e piè di pagina

L’intestazione, il piè di pagina e il corpo principale sono contrassegnati con commenti HTML per aggiungerli facilmente ai file PHP di WordPress e convertire il codice.

Ora copia il codice dell’intestazione dal file indice.html del tema scaricato nel file intestazione.php file che hai creato nella cartella dei temi WordPress. Devi copiare da fino e salvalo.

Allo stesso modo, copia il footer e gli elementi del corpo principale da index.html rispettivamente in footer.php e index.php.

Per il piè di pagina, copia da

(nel mio caso, c’è un nome di classe definito nel tag footer, quindi non confonderti) fino dentro footer.php archiviarlo e salvarlo.

Quindi, copia tutto il codice dopo il file tag e subito prima del su index.php e salvarlo.

Aggiungi la funzione WordPress get_header() in alto e get_footer() alla fine del file index.php.

IL get_header() è una funzione integrata che richiama intestazione.php e allo stesso modo, get_footer() è una funzione che chiama footer.php.

Aggiungi il seguente codice nella parte superiore del file index.php e salvalo.

Per richiamare un footer, inserisci il seguente codice alla fine del codice index.php e salvalo.

Ora visita il tuo sito e vedrai qualcosa di simile.

Passaggio 7: configurazione dei CSS

Il fatto che il tuo tema sembri strano è perché i file CSS non sono applicati al tema.

Hai già copiato la cartella CSS dal tema HTML alla cartella del tema WordPress. Ora devi chiamare questi file CSS per completare l’aspetto del tema.

Tieni presente che i nomi dei tuoi file CSS potrebbero differire, quindi ricontrolla prima di eseguire questo processo.

Troverai i tuoi fogli di stile CSS nel file header.php, quindi devi cercare “rel=”foglio di stile” ” di CTRL+f.

Successivamente, rimuovi i fogli di stile dei caratteri Google perché non ne abbiamo bisogno. Ora, devo solo registrare il foglio di stile CSS effettivo, ad es .

WordPress non comprende la normale struttura del foglio di stile CSS; ecco perché devo accodare e registrare il foglio di stile CSS. Vai al file Functions.php e aggiungi il seguente codice.

IL wp_register_style ti aiuterà a registrare il tuo foglio di stile CSS.

IL get_template_directory_uri() . ‘/href’ viene utilizzato per ottenere il percorso della directory del modello corrente. Concatenerà il percorso corrente con il rispettivo file. Quindi qui devi definire la posizione del tuo file CSS (href). Puoi vedere come ho definito il percorso di quel file CSS: get_template_directory_uri() . ‘/asset/css/style-starter.css‘.

Ora possiamo rimuovere il collegamento al foglio di stile CSS dal file intestazione.php file e sostituirlo con il seguente codice e salvare il file.

wp_head() è un hook WordPress essenziale definito nel file sezione di header.php.

Quando visiti il ​​tuo sito WordPress, noterai che i file CSS sono effettivamente accodati al tuo nuovo tema WordPress, ma il design non è ancora in ordine. È perché non hai ancora configurato gli script JS.

Nell’header.php ho un foglio di stile CSS e l’ho registrato solo in Functions.php. Ma cosa succede se hai più fogli di stile? In tal caso è necessario definire wp_register_style() per ciascun foglio di stile. Non preoccuparti! Puoi prendere un esempio dal passaggio successivo, in cui ho più script JS. Il processo è lo stesso, quindi chiarirà le tue domande e ti aiuterà a capire come svolgerai quel lavoro.

Passaggio 8: configura JavaScript

Il tema HTML con cui stai lavorando utilizza JavaScript e nel file footer.php i file JavaScript vengono già richiamati in formato HTML. Per eseguire questi file JS, tutto ciò che devi fare è seguire le stesse azioni eseguite nel passaggio precedente.

Apri il tuo file footer.php e cerca “” di “CTRL+f”. Questo ti aiuterà a trovare tutti i file JS che hai. Nel mio caso ne ho cinque e qui devo registrarli e accodarli tutti.

Successivamente, devi aprire il file Functions.php e incollare il seguente codice:

function add_script() wp_register_script(‘js-script’, get_template_directory_uri() . ‘/assets/js/jquery-3.3.1.min.js’, array ( ‘jquery’ ), 1.1, true); wp_enqueue_script(‘js-script’); wp_register_script(‘change’, get_template_directory_uri() . ‘/assets/js/theme-change.js’, array ( ‘jquery’ ), 1.1, true); wp_enqueue_script(‘cambia’); wp_register_script(‘popup’, get_template_directory_uri() . ‘/assets/js/jquery.magnific-popup.min.js’, array ( ‘jquery’ ), 1.1, true); wp_enqueue_script(‘popup’); wp_register_script(‘carousel’, get_template_directory_uri() . ‘/assets/js/owl.carousel.js’, array ( ‘jquery’ ), 1.1, true); wp_enqueue_script(‘carosello’); wp_register_script(‘bootstrap’, get_template_directory_uri() . ‘/assets/js/bootstrap.min.js’, array ( ‘jquery’ ), 1.1, true); wp_enqueue_script(‘bootstrap’); add_action(‘wp_enqueue_scripts’, ‘add_script’);

Puoi vedere che la struttura del codice è la stessa che hai fatto in precedenza nella parte di configurazione CSS. Ma qui utilizzerai wp_register_script invece di style. Registra e accoda ogni file JS nella stessa funzione.

Ora puoi rimuovere tutti i collegamenti agli script JS (ne ho cinque) dal file footer.php file, quindi incolla la seguente riga di codice alla fine del codice (sopra il tag ) e salva il file.

Ora apri il tuo sito sul tuo browser e noterai che il nuovo tema WordPress funziona bene, ma ha ancora alcune immagini mancanti.

Passaggio 9: configura le immagini

Questo processo è semplice e qui è necessario definire il percorso delle immagini.

Innanzitutto, apri il file index.php e cerca “<img src=” di “CTRL+f”. Questo ti aiuterà a trovare tutti i file di immagine che hai. Nel mio caso ne ho otto, e qui ho bisogno del percorso per tutti loro.

Dare un percorso alle immagini; aggiungi il seguente codice PHP all’interno src tag e salvare il file.

” alt=”” class=”img-fluid raggio-immagine” /> ” alt=”” class=”img-fluid raggio-immagine” /> ” alt=”” class=”img-fluid raggio-immagine” /> ” alt=”” class=”img-fluid raggio-immagine” /> ” alt=”” class=”img-fluid raggio-immagine” /> ” alt=”” class=”img-fluid raggio-immagine” />

Ora il tuo tema sarà simile al tema HTML e recupererà tutte le immagini.

Ma mancheranno le funzionalità di WordPress, come la modifica del titolo del sito e il menu di navigazione di WordPress.

Passaggio 10: abilita il titolo personalizzato in WordPress

Se accedi al pannello di amministrazione di WordPress e modifichi il titolo del sito Web, ciò non influirà sul titolo del sito. Per abilitare questa funzione, puoi Utilizzare la funzione integrata di WordPress bloginfo() con il parametro “nome” tra i titolo tag nel intestazione.php file e salvare il file.

E allo stesso modo, devi utilizzare la funzione integrata di WordPress bloginfo() con il parametro “nome” tra i tag h1 nel intestazione.php file e salvare il file.

Ora il tuo tema prenderà il titolo che hai impostato Impostazioni -> Generali-> Titolo del sito all’interno del pannello di amministrazione di WP.

Quando visiti l’amministrazione WordPress del tuo sito e accedi ad Aspetto, non vedrai un’opzione per Menu.

È necessario prima abilitare Menu aggiungendo la seguente riga di codice nel file Functions.php.

add_theme_support(‘menu’);

Ciò abiliterà la funzionalità Menu nel tuo tema, ma richiede alcune configurazioni per gestire i menu dalla dashboard WP.

Innanzitutto, trova dove si trova il menu di navigazione del tema HTML e poi sostituiscilo utilizzando la funzione integrata di WordPress wp_nav_menu(); Puoi leggere ulteriori informazioni su questa funzione Qui.

In questo tema, il intestazione.php contiene il menu di navigazione.

Trova le seguenti righe di codice:

Sostituisci le righe sopra con:

‘navbar-nav mx-lg-auto’, ‘container’ => ‘ul’, )); ?>

Il tuo menu WordPress verrà ora visualizzato sul tuo tema e aggiungerà flessibilità al tuo tema aziendale WordPress.

Avvolgendo!

Spero che questo articolo ti abbia aiutato a capire come convertire un modello o un sito HTML in un tema WordPress. Questo è un tutorial dettagliato in cui ho coperto undici passaggi per dimostrare il processo. Tutti i temi WordPress sono compatibili con il nostro hosting WordPress gestito.

Se hai domande e dubbi, non esitare a chiedere in qualsiasi momento nella sezione commenti qui sotto.