Semplici passaggi per la codifica di una pagina di destinazione WordPress personalizzata

Non ci vuole molta esperienza con il web design per imparare che creare una buona pagina di destinazione non è facile. Devi avere un'idea chiara di cosa dovrebbe essere la tua pagina di destinazione . E devi capire i tuoi visitatori e guidare la loro attenzione verso la conversione. Fortunatamente, se hai familiarità con le basi della codifica web, avrai la libertà necessaria per ottimizzare la tua pagina come meglio credi. Con questo in mente, vediamo in cosa consiste la codifica di una landing page personalizzata di WordPress .

L'importanza di una landing page

Prima di esaminare i passaggi specifici della codifica, elaboriamo innanzitutto il motivo per cui avere una buona pagina di destinazione è importante. Non esiste una guida online alla creazione di siti Web che non menzioni l'importanza vitale di avere una pagina di destinazione decente . Che il tuo sito web riguardi la vendita di un prodotto, l'offerta di un servizio o la raccolta di dati, devi avere una buona pagina di destinazione.

Sfortunatamente, creare una buona pagina di destinazione non è facile. Devi avere un'idea chiara di come dovrebbe essere il tuo atterraggio. E devi capire il tuo pubblico per guidarlo verso le conversioni. Una pagina di destinazione scarsamente ottimizzata può ridurre notevolmente le tue prestazioni e potenzialmente rovinare la tua presenza online altrimenti eccezionale. Ricorda, la pagina di destinazione è solitamente l'ultimo passaggio prima che il tuo visitatore si converta in cliente . Quindi, fai del tuo meglio per renderlo il più buono possibile. Fortunatamente, se conosci le basi della programmazione web, puoi facilmente codificare una pagina di destinazione personalizzata. Questo ti dà una notevole quantità di libertà, che di solito è necessaria per una pagina veramente funzionale . Quindi, con questo in mente, andiamo passo dopo passo nel codice necessario per creare una landing page WP.

Codificare una landing page personalizzata di WordPress

Sebbene i passaggi che illustreremo siano abbastanza semplici, dovresti sempre considerare di consultare un web designer professionista. Alcuni siti Web possono essere piuttosto complicati con numerosi plug-in in esecuzione in background . E alcuni di questi plugin possono potenzialmente causare o riscontrare problemi se non sei sicuro di quello che stai facendo. Sebbene tu possa disabilitare i plugin senza accedere all'area di amministrazione, dovresti davvero evitare di metterti nei guai . Se riscontri difficoltà su tutta la linea, contatta un web designer professionista per aiutarti.

Crea un tema figlio

Sebbene tu possa, in teoria, creare un tema genitore nuovo di zecca, dovresti utilizzare un tema figlio. Sono molto più adatti per la personalizzazione, il che ti dà più libertà di creare pagine di destinazione uniche. Poiché abbiamo spiegato come creare un tema figlio, non lo esamineremo più qui. L'unica cosa che menzioneremo è che è necessario avere entrambi i file style.css e functions.php nella directory del tema figlio per procedere.

Crea un file Style.css

Nel file style.css devi semplicemente aggiungere il seguente codice:

/*

Nome del tema: tema della pagina di destinazione

Descrizione: Tema figlio con pagina di destinazione personalizzata

Autore: scrittore predefinito

URI dell'autore: https://www.wpfullcare.com

*/

Crea un file Functions.php

Nel file functions.php, devi aggiungere il seguente codice. In questo modo potrai registrare il tuo file di foglio di stile figlio.

<?php

// Stili del tema principale //

// https://codex.wordpress.org/Child_Themes //

funzione temi_accoda_stili() {

$stile_genitore = 'stile genitore';

wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'stile bambino',

get_stylesheet_directory_uri() . '/stile.css',

matrice($stile_genitore)

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Installa e attiva il tuo tema figlio

Fatto ciò, puoi procedere con l'installazione e l'attivazione del tema figlio. Quando si tratta di temi WordPress in generale, vuoi testarli localmente su un diverso sito Web WP. Come accennato, gli incidenti accadono. E dovresti davvero evitare di disabilitare il tuo sito web . Dopo aver configurato un sito WordPress locale, procedi al caricamento del tema. Una volta attivato, assicurati che il tuo tema figlio funzioni e che tu possa aggiungere stili. Vai al file style.css e modifica alcune parti del codice per vedere se funziona.

Costruisci una pagina personalizzata

Se tutto è in ordine, puoi procedere alla creazione di una pagina personalizzata nel tuo tema figlio. Per farlo devi creare un nuovo file nel tema di tuo figlio. Una volta fatto, salvalo come page-landing.php. In quel file è necessario aggiungere il seguente codice:

<?php

/**

Nome modello: pagina di destinazione

**/

?>

Ora vai al menu a discesa del modello e scegli la tua pagina di destinazione dal menu. Dovrai scegliere un'immagine in primo piano da utilizzare come sfondo ( scegli qualcosa di grande e semplice per ora, come potrai sperimentare in seguito ). Quindi aggiungi la tua copia e pubblica la pagina aggiunta. Provare a rivedere la tua pagina ora ti porterà solo a una schermata nera. Questo perché non hai ancora aggiunto il seguente markup a page-landing.php.

<div id="pagina di destinazione" class="sito hfeed">

<div class="sito-branding">

<p class=”site-title aligncenter”><a href=”<?php echo esc_url( home_url( '/' ) ); ?>” rel="home"><?php bloginfo( 'nome' ); ?></a></p>

</div><!– .sito-branding –>

Una volta aggiunto e visualizzato l'anteprima della pagina, dovresti vedere il titolo del tuo sito insieme a uno sfondo bianco e un'immagine di sfondo grande.

Visualizza contenuto

Per visualizzare il resto del contenuto sulla tua landing page devi aggiungere il seguente markup a page-landing.php. Devi farlo appena sotto la riga <!– .site-branding –> affinché funzioni correttamente.

<div class=”tangente sidebar-barra laterale”>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<h1 class="landing-title"><?php the_title("); ?></h1>

<?php the_content(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php nel frattempo; ?>

<?php endif; ?> <!– mdl-cell-8 //#primary –>

</div>

La codifica di una landing page personalizzata di WordPress è quasi completata. Tutto quello che devi fare è impostare lo stile per questo. Il modo più semplice per farlo è utilizzare solo il file style.css e il codice necessario. Poiché ci sono opzioni letteralmente illimitate su come può apparire la tua pagina, non ti forniremo un esempio rigoroso da seguire. Invece, ti consigliamo di trovare uno stile che ti piace e di copiarlo . In questo modo scoprirai come diversi aspetti della sua funzione.