WordPress: ma landing page faite-maison
Étiquettes : conversion, landing page, wordpress
Le thème WordPress de vos rêves ne fourni pas de landing page? Pas de panique! Ce type de template est très simple à faire soi-même.
La landing page, c’est la vitrine mais aussi le bureau d’accueil d’un site. Malheureusement, il arrive que certains thèmes n’en soient pas pourvus.
À cela, deux solutions: les plugins ou le fait-maison.
Les plugins
La meilleure extension pour créer sa landing page est sans doute WordPress Landing Pages.
En plus de construire vos pages vous-même, il intègre également les tests A/B et surtout, récolte des données intéressantes sur les conversions de chaque page.
Mais bon! WordPress, c’est comme la cuisine: c’est encore meilleur quand on le fait soi-même!
Ce qui nous amène au point suivant…
C’est moi qui l’ai fait!
Une landing page est souvent (pour ne pas dire toujours) une pleine page, « fullwidth page » de son petit nom. Comme son nom l’indique, elle ne possède pas de sidebar et permet donc d’utiliser toute la largeur du site. Idéal pour créer une landing page personnalisable selon l’objectif à atteindre.
Nous allons donc plonger dans le code, en essayant de ne pas anéantir l’univers.
Étape 1: Créer le template
Tout d’abord, il vous faudra un bon éditeur de texte. Personnellement, j’utilise TextWrangler mais il existe de nombreuses variantes, comme BBEdit.
Créez un nouveau fichier PHP dans le dossier de votre thème WordPress, sur votre serveur (wp-content/themes/votre-theme) et nommez-le « full-width-page.php« .
Toujours dans le même dossier, ouvrez le fichier « page.php » et sélectionnez le contenu pour le copier dans le fichier que vous venez de créer.
Copiez ensuite ce code en haut de celui que vous venez d’ajouter, soit au-dessus de <?php …
<?php /* Template Name: Full Width */ ?>
Trouver maintenant la sidebar, qui se nomme généralement <?php get_sidebar() ?> et effacez-la.
Ensuite, cherchez la balise suivante…
<div id="content">
Et renommez le « content » par « content-fullwidth« , de manière à l’identifier facilement pour obtenir ceci:
<div id="content-fullwidth">
Et sauvegardez votre fichier. Étape 1 terminée!
Étape 2: Ajouter un nouveau style
Maintenant que votre template est créé, il n’y a plus qu’à l’ajouter dans la feuille de style de votre blog.
Dans le back office de WordPress, ouvre la « Stylesheet » (style.css) et trouvez le code suivant:
}
#content {
width: 858px;
float: left;
padding: 5% 0 3%;
Dupliquez-le juste en dessous, renommez-le avec le nom du fichier php créé il y a quelques minutes et surtout, augmentez la largeur de la page avant de la sauvegarder.
On teste? Créez une nouvelle page sur votre blog et sélectionnez « Fullwidth page » dans vos attributs de page. Voilà, vous avez votre template tout frais tout neuf à disposition.
Il ne reste plus qu’à le personnaliser pour en faire une landing page digne de ce nom!
Et vous? Comment créez-vous votre landing page? Plugin ou homemade?
