Come convertire il sito Web HTML in WordPress Tema aziendale

Come convertire il sito Web HTML in WordPress Tema aziendale

Molte aziende si basano ancora su semplici siti web HTML per la loro presenza online. Questi siti Web HTML sono solitamente statici, il che significa che è necessario modificare il codice per modificare anche un dettaglio minore sul sito web. Per evitare che, però, è possibile convertire il vostro sito web HTML a WordPress.

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

Se si ha familiarità con HTML e WordPress, allora questo tutorial è un bene per voi. Se sei un principiante, prova a farlo con un sito Web fittizio sul tuo localhost come XAMPP.

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

Conversione del sito HTML in tema WordPress

Per questo tutorial, ho raccolto un tema aziendale HTML gratuito da qui. Le tecniche rimarranno le stesse durante la conversione di qualsiasi tema aziendale. Se avete domande per quanto riguarda il vostro tema di business, basta rilasciare un commento o una e-mail, e sarò felice di rispondere.

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

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

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

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

Passo 1: Prerequisiti

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

Passo 2: Crea la tua cartella tema

Per questo tutorial, sto usando XAMPP, e il mio sito WordPress è installato sotto la cartella htdocs. Per creare un tema WordPress, è necessario accedere alla cartella 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 assegna un nome al tema.

Passo 3: Crea file PHP

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

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

1. stile.css (contiene dettagli del tema e file CSS)
2. indice.php (serve il contenuto principale se altri file opzionali non sono dichiarati)
3. intestazione.php (contiene gli elementi di intestazione del tema)
4. piè di pagina.php (contiene gli elementi del piè di pagina del tema)
5. funzioni.php (contiene funzioni che nel tema WordPress)

Passaggio 4: Copia le cartelle CSS, Images e JavaScript (JS)

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

Dopo il passaggio al nuovo tema WordPress cartella, che sarà simile a questa:

Passo 5: L’attivazione di un Nuovo Tema WordPress

Ora abbiamo aggiunto le cartelle importanti che sono necessari per ogni tema wp. Quindi, apri il tuo sito WordPress sul tuo browser e accedi alla tua Dashboard. Passare a Aspetto > Temi, e vedrete il vostro 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 stile.file css (creato in precedenza) e incollare il seguente codice e salvarlo (ctrl+s).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.Version: 1.0*/

Per il banner, è necessario aggiungere un file immagine alla nuova cartella del tema. La dimensione dell’immagine dovrebbe essere 800 per 600 e il nome dell’immagine dovrebbe essere Screenshot (formato png).

Una volta aggiunto lo screenshot.file png, aggiorna il tuo dashboard wp-admin e apparirà il banner dell’immagine.

Ora, è possibile visualizzare le informazioni sul tema quando si fa clic sul banner.

Quindi, è sufficiente fare clic su Attiva.

Passo 6: Convertire il codice HTML in intestazione, indice e piè di pagina

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

Ora copia il codice dell’intestazione dall’indice.html del tema scaricato nell’intestazione.file php creato nella cartella temi WordPress. È necessario copiare da <!DOCTYPE html> fino a < / header> e salvarlo.

Allo stesso modo, Copiare gli elementi del piè di pagina e del corpo principale dall’indice.html in piè di pagina.php e indice.php, rispettivamente.

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

Quindi, copia tutto il codice dopo il tag </header>e poco prima del piè di pagina <> nell’indice.php e salvarlo.

Aggiungi funzione WordPress get_header() in alto e get_footer() alla fine dell’indice.file php.

get_header() è una funzione integrata che chiama nell’intestazione.php e allo stesso modo, get_footer () è una funzione che chiama piè di pagina.PHP.

Aggiungi il seguente codice nella parte superiore dell’indice.file php e salvarlo.

<?php get_header(); ?>

Per chiamare in un piè di pagina, inserire il seguente codice alla fine dell’indice.codice php e salvarlo.

<?php get_footer(); ?>

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

Passo 7: Configurazione CSS

Il fatto che il tema sembra strano è perché i file CSS non vengono applicati al tema.

Hai già copiato la cartella CSS dal tema HTML alla cartella del tema WordPress. Ora, è necessario 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 condurre questo processo.

Troverai i tuoi fogli di stile CSS nell’intestazione.file php, quindi è necessario cercare”rel=” foglio di stile “” con CTRL + f.

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

WordPress non capisce la normale struttura del foglio di stile CSS; ecco perché ho bisogno di accodare e registrare il foglio di stile CSS. Vai alle funzioni.file php e aggiungere il seguente codice.

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}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, è necessario definire la posizione del file CSS (href). Puoi vedere come ho definito il percorso di quel file CSS: get_template_directory_uri (). ‘/assets / css / style-starter.css”.

Ora, possiamo rimuovere il collegamento foglio di stile CSS dall’intestazione.file php e sostituirlo con il seguente codice e salvare il file.

<?php wp_head(); ?>

wp_head() è un hook WordPress essenziale definito nella sezione < head></head> dell’intestazione.PHP.

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

Nell’intestazione.php, ho un foglio di stile CSS, e l’registrai solo in funzioni.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 fare un esempio dal passaggio successivo, dove ho più script JS. Il processo è lo stesso, quindi cancellerà le tue domande e ti aiuterà a capire come farai quel lavoro.

Passo 8: Configura JavaScript

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

Apri il piè di pagina.file php e cercare “< script src= ” da “CTRL + f”. Questo ti aiuterà a trovare tutti i file JS che hai. Nel mio caso, ne ho cinque, e qui ho bisogno di registrarli e accodarli tutti.

Successivamente, è necessario aprire le funzioni.file 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( 'change'); 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( 'carousel'); 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 accodare ogni file JS nella stessa funzione.

Ora puoi rimuovere tutti i collegamenti agli script JS (ne ho cinque) dal piè di pagina.file php, quindi incollare la seguente riga di codice alla fine del codice (sopra< / body > tag) 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.

Passo 9: Configurare le immagini

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

Per prima cosa, apri il tuo indice.file php e cercare “< img src= ” da “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.

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 radius-image" />

Ora, il tema sarà simile al tema HTML e recuperare tutte le immagini.

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

Passo 10: Abilita titolo personalizzato in WordPress

Se vai nel pannello di amministrazione di WordPress e cambi il titolo del sito web, non influirà sul titolo del sito. Per abilitare questa funzione, è possibile utilizzare WordPress built-in funzione bloginfo() con il parametro “nome” tra i tag titolo nell’intestazione.file php e salvare il file.

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

E allo stesso modo, è necessario utilizzare WordPress built-in funzione bloginfo() con il parametro “nome” tra i tag h1 nell’intestazione.file php e salvare il file.

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

Ora, il tema prenderà il titolo che si imposta in Impostazioni -> Generale-> Titolo del sito all’interno del pannello WP-admin.

Passo 11: Aggiungi menu di navigazione WordPress in WordPress

Quando visiti l’amministratore di WordPress del tuo sito e navighi verso Aspetto, non vedrai un’opzione per il menu.

È necessario abilitare il menu prima aggiungendo la seguente riga di codice nelle funzioni.file php.

add_theme_support( 'menus' );

Questo abiliterà la funzionalità del menu nel tuo tema, ma ha bisogno di alcune configurazioni per gestire i menu dal tuo dashboard WP.

In primo luogo, trovare dove il menu di navigazione tema HTML è e quindi sostituirlo utilizzando WordPress built-in funzione wp_nav_menu(); Si può leggere di più su questa funzione qui.

In questo tema, l’intestazione.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">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</a></li><li class="nav-item @@contact__active"><a class="nav-link" href="contact.html">Contact</a></li></ul>

Sostituire le righe precedenti con:

<?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

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

Avvolgimento!

Spero che questo articolo ti abbia aiutato a capire come convertire un modello HTML o un sito in un tema WordPress. Questo è un tutorial dettagliato in cui ho coperto undici passaggi per dimostrare il processo.

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