Come creare la tua Landingpage con Wordpress

Se ti sei mai chiesto come potevi creare una landing page in stile con il tema del tuo blog questo articolo può servirti. Di plugin e programmi on-line per creare landing page ne esistono alcuni quelli che ho avuto modo di provare sono:

Entrambi sono due ottimi strumenti ma se vuoi avere uno strumento a costo zero e in linea con il tema del tuo sito allora continua a leggere. Approfondiremo step by step come puoi fare.

Se hai bisogno di una soluzione per sviluppare le tue landing page con Wordpress che sia economica, semplice e pratica allora... Scopri il metodo che utilizzo per realizzarle!

Landing page - consulente SEO

Partiamo dalla radice

L'alberatura di un template wordpress segue questo schema:

Home Directory > wp-content > themes > Nome del Tema

All'interno di questa directory troverai tutte le pagine PHP, i fogli di stile e immagini che compongono il nostro tema. Non facciamo distrarci da tutte queste pagine e creiamo tre file php che chiameremo:

  • landingpage.php: il corpo delle landing page che andremo a creare
  • header-landingpage.php: l'header della landingpage
  • footer-landingpage.php: definirà il footer

Incominciamo ad arrampicarci

Il primo passo è quello di mettere mano al codice. Ma giusto un pochino, non ti preoccupare. Partiamo dalla landingpage per poi passare all'header e al footer.

landingpage.php

Le funzioni che richiamano il nostro header e il nostro footer sono get_header (linea 3) e get_footer (linea 7). Entrambe le funzioni hanno come parametro il valore landingpage senza header e footer in quanto inseriti automaticamente, come prefissi, dalla funzione.

// Template Name: Landing Page
<?php get_header('landingpage'); ?>
 HTML - post
<?php get_footer('landingpage'); ?>

Il commento Template (linea 2) dovrà essere presente in quanto ci permetterà di indicare a WP che è un template e che lo utilizzeremo al momento della creazione della landingpage.

Popoliamo la nostra pagina di atterraggio.

<div id="content" class="full-width">
<?php while(have_posts()): the_post(); ?>
    <div id="post-<?php the_ID(); ?>;" <?php post_class(); ?>>
        <h3><?php the_title(); ?></h3>
         <div class="post-content">
            <?php the_content(); ?>
        </div>
    </div>
<?php endwhile; ?>

Per l'inserimento degli oggetti all'interno della pagina si possono utilizzare le funzioni: the_title (riga 4) e the_content (riga 6) che permettono di visualizzare il titolo e il contenuto del post, della pagina ecc.

header-landingpage.php

Nell'header inserirai il tuo logo e un eventuale menu per le pagine di approfondimento. Ti consiglio di inserire pochi elementi perché più oggetti inserisci nella pagina e più probabilità hai che l'utente distolga la sua attenzione dal messaggio che vuoi comunicargli.

Consiglio sempre di essere breve, coinciso ed essenziale.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title><?php bloginfo('name') ?><?php wp_title(' - ', true, 'left'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
</head>;
<body <?php body_class($class) ?>>
<div id="wrapper">
    <header id="header">
        <div class="row">
            <div class="logo"><a href="<?php bloginfo('siteurl') ?>"><img src="<?php echo of_get_option('logo', get_bloginfo('template_directory')."/images/logo.gif"); ?>" alt="<?php bloginfo('name') ?>" /></a></div>
            <nav id="nav" class="nav-holder">
                <?php wp_nav_menu(array('theme_location' =>; 'main_navigation', 'depth' =>; 3, 'container' =>; false, 'menu_id' =>; 'nav'))?>
        </nav>
    </div>
    </header>
    <div id="main" style="overflow:hidden !important;">
        <div class="row">

footer-landingpage.php

Infine creiamo il footer della nostra bellissima landingpage. Anche il footer dovrà essere minimalista e non contenere più dati del necessario.

 </div>
  </div>;
   <footer id="footer">;        
     <ul class="copyright">;
    <li><?php echo of_get_option('copyright', 'Luigi Luongo - http://www.luigiluongo.com') ?></li>
       </ul>
   </footer>
   </div><!-- wrapper -->;
   <?php wp_footer(); ?>
</body>
</html>

Alla linea 5 inseriamo il copyright, la nostra P.IVA e i nostri contatti. La funzione of_get_option permette di recuperare il valore della chiave copyright dalle opzioni del tema. Voi potete inserire un semplice paragrafo.

Alla linea 10 richiamiamo la funzione wp_footer standard del CMS Wordpress.

 Siamo arrivati in cima

Abbiamo creato il template che andremo a richiamare quando creiamo la nostra prima landingpage.

Andiamo in:

Pagine > Aggiungi nuova pagina

Alla creazione di una nuova pagina dovresti poter vedere questo box

Selezionare un template personalizzato all'interno della pagina

Se non lo vedi controlla in impostazioni schermo se la voce attributi di pagina è selezionata.

Wordpress - impostazioni schermo >; attributi di pagina

A questo punto selezioniamo, dal box Attributi Pagina (sulla destra), il modello appena creato (Landingpage).

Attributi di pagina con Modello Landingpage

Non ti rimane che divertirti a creare le tue landingpage in stile con il tuo tema Wordpress. Queste informazioni fanno parte del modulo aggiuntivo del corso SEO per wordpress.

Se hai trovato utile l'articolo condividilo!