Come convertire un sito Web HTML in un tema WordPress aziendale

Molte aziende si affidano ancora a semplici siti Web HTML per la loro presenza online. Questi siti Web HTML sono generalmente statici, il che significa che dovrai modificare il codice per modificare anche un minimo dettaglio sul sito web. Per evitarlo, tuttavia, puoi convertire il tuo sito Web HTML in WordPress.

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

Se hai familiarità con HTML e WordPress, allora questo tutorial fa per te. Se sei un principiante, prova a farlo con un sito Web fittizio sul tuo localhost come XAMPP.

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

Conversione di un sito HTML in un tema WordPress

Per questo tutorial, ho preso un tema aziendale HTML gratuito da qui. Le tecniche rimarranno le stesse durante la conversione di qualsiasi tema aziendale. Se hai domande sul tema della tua attività, lascia un commento o un'e-mail e sarò felice di rispondere.

Andiamo avanti. Innanzitutto, dai un'occhiata al tuo tema HTML e contrassegna gli elementi di intestazione, corpo principale e 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 localhost come XAMPP (cioè il tuo computer). In caso contrario, abbiamo già trattato una guida dettagliata per aiutarti a installare e configurare WordPress in locale.

Passaggio 2: crea la tua cartella dei temi

Per questo tutorial, sto usando 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 apri la cartella XAMPP > htdocs > cartella WordPress (nel mio caso sta testando ) > wp-content > temi .

Nella cartella Temi, vedrai tutti i tuoi temi WordPress installati. Crea una nuova cartella e dai un nome al tuo 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 del 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 del footer del tema)
5. functions.php (contiene funzioni attive nel tema WordPress)

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

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

Dopo esserti spostato nella tua nuova cartella del tema WordPress, sarà simile a questo:

Passaggio 5: attiva un nuovo tema WordPress

Ora hai aggiunto le cartelle importanti necessarie per qualsiasi tema wp. Quindi, apri il tuo sito WordPress sul tuo browser e accedi alla tua Dashboard. Vai su 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 tuo 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 tua nuova cartella del tema. La dimensione dell'immagine deve essere 800 per 600 e il nome dell'immagine deve essere Screenshot (formato png).

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

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

Quindi, fai semplicemente clic su Attiva .

Passaggio 6: convertire 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 copiare il codice colpo di testa da index.html del tema scaricato nel file header.php si è creato nella cartella temi WordPress. Devi copiare da <!DOCTYPE html> fino a </header> e salvarlo.

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

Per il piè di pagina, copia da <footer> (nel mio caso, c'è un nome di classe definito nel tag footer, quindi non confonderti) fino a </html> nel file footer.php e salvalo.

Quindi, copia tutto il codice dopo il tag </header> e subito prima del <footer> su index.php e salvalo.

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

get_header() è una funzione incorporata che chiama header.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.

 <?php get_header(); ?> 

Per richiamare un piè di pagina, inserisci il seguente codice alla fine del codice index.php e salvalo.

 <?php get_footer(); ?> 

Ora, visita il tuo sito e vedrai qualcosa di simile.

Passaggio 7: configurazione dei CSS

Il fatto che il tuo tema abbia un aspetto strano è dovuto al fatto che i file CSS non vengono applicati al tema.

Hai già copiato la cartella CSS dal tema HTML alla cartella del tema di 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=”stylesheet” ” con CTRL+f .

Successivamente, rimuovi i fogli di stile dei caratteri di Google perché non ne abbiamo bisogno. Ora, ho solo bisogno di registrare il foglio di stile CSS effettivo, ad esempio <link rel=”stylesheet” href=”assets/css/style-starter.css”> .

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

 <?php

funzione add_css()

{

   wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style('primo');

}

add_action('wp_enqueue_scripts', 'add_css'); 

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 header.php e sostituirlo con il seguente codice e salvare il file.

 <?php wp_head(); ?>

Il wp_head() è un hook essenziale di WordPress che è definito nella sezione <head> </head> di header.php.

Quando visiti il ​​tuo sito WordPress, noterai che i file CSS sono effettivamente accodati al tuo nuovo tema WordPress, ma comunque il design non è 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 ogni 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 farai quel lavoro.

Passaggio 8: configurare JavaScript

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

Apri il tuo file footer.php e cerca " <script src= " con " CTRL+f ". Questo ti aiuterà a trovare tutti i file JS che hai. Nel mio caso, ne ho cinque, e qui devo registrarmi e accodarli tutti.

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

 funzione 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 userai wp_register_script invece di style. Si registra e si accoda ogni file JS nella stessa funzione.

Ora puoi rimuovere tutti i collegamenti di script JS (ne ho cinque) dal file footer.php , quindi incollare la seguente riga di codice alla fine del codice (sopra il tag </body>) e salvare il file.

 <?php wp_footer(); ?> 

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: configurare le immagini

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

Per prima cosa, apri il tuo file index.php e cerca "< img src= " con " CTRL+f ". Questo ti aiuterà a trovare tutti i file di immagine che hai. Nel mio caso ne ho otto, e qui mi serve il percorso per tutti loro.

Per dare un percorso alle immagini; aggiungi il seguente codice PHP all'interno dei tag src e salva il file.

 <img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" 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 cambi il titolo del sito web, ciò non influirà sul titolo del sito. Per abilitare questa funzione, puoi utilizzare la funzione integrata bloginfo() di WordPress con il parametro " name " tra i tag del titolo nel file header.php e salvare il file.

 <?php bloginfo( 'nome' ); ?> 

Allo stesso modo, è necessario utilizzare la funzione integrata bloginfo() di WordPress con il parametro " nome " tra i tag h1 nel file header.php e salvare il file.

 <?php bloginfo( 'nome' ); ?> 

Ora, il tuo tema prenderà il titolo che hai impostato in Impostazioni -> Generale-> Titolo del sito all'interno del pannello di amministrazione di WP.

Passaggio 11: aggiungi il menu di navigazione di WordPress in WordPress

Quando visiti l'amministratore di WordPress del tuo sito e accedi ad Aspetto, non vedrai un'opzione per Menu.

Devi 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 è necessaria una certa configurazione per gestire i menu dalla dashboard di WP.

Innanzitutto, trova dove si trova il menu di navigazione del tema HTML e quindi sostituiscilo utilizzando la funzione integrata di WordPress wp_nav_menu(); Puoi leggere di più su questa funzione qui.

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

Trova le seguenti righe di codice:

 <ul class="navbar-nav mx-lg-auto">

<li class="nav-item active">

<a class="nav-link" href="index.html">Home <span class="sr-only">(corrente)</span></a>

</li>

<li class="nav-item @@about__active">

<a class="nav-link" href="about.html">Informazioni</a>

</li>

<li class="nav-item @@contact__active">

<a class="nav-link" href="contact.html">Contatto</a>

</li>

</ul> 

Sostituisci le righe sopra con:

 <?php wp_nav_menu( array( 'menu_class' => '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.

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