Comment créer un modèle de page de destination WordPress

Ce que vous allez créer

L'un des objectifs d'un site Web est de générer des prospects. Cela peut se produire de différentes manières: vous pouvez créer un formulaire permettant aux personnes de vous contacter pour un devis spécifique, vous pouvez encourager les utilisateurs à créer un compte lors de l'achat de produits sur votre site ou un aimant principal que vous offrez aux utilisateurs. en retour de leur adresse email.

Si vous utilisez un aimant principal ou si vous avez une page sur votre site spécialement conçue pour vendre un élément, qu'il s'agisse d'un abonnement, d'un service ou d'un produit, vous souhaitez décourager les internautes de cliquer loin de cette page sans acheter ou acheter. en vous donnant leur adresse email.

Ce type de page s'appelle une page de destination. C'est une page conçue pour faire partie de votre entonnoir marketing, pour générer des prospects ou pour vendre quelque chose. Le but de la page est très simple et vous ne voulez pas que les gens fassent autre chose une fois qu'ils y ont atterri.

Afin de minimiser les risques de navigation avant l'achat ou l'inscription, vous souhaitez réduire le nombre de liens sur votre page de destination. Il ne devrait pas avoir de widgets ni de menus de navigation. Vous ne voulez pas que les gens la quittent pour naviguer sur votre site. Même le lien vers la page d'accueil dans l'en-tête doit disparaître, ainsi que tous les liens dans votre colophon tout en bas de la page..

Dans ce didacticiel, je vais vous montrer comment créer un modèle de page pour votre thème WordPress. Il ne contient aucun lien vers quoi que ce soit en dehors du contenu de la page. Les visiteurs de la page n'auront d'autre choix que de cliquer sur le bouton Acheter ou S'inscrire bouton.

Pour ce faire, nous allons travailler avec quelques fichiers de notre thème:

  • Nous allons créer un nouveau modèle de page personnalisé pour les pages de destination.
  • Nous allons modifier le fichier d'en-tête afin que lorsque ce modèle est affiché, les liens ne sont pas présents.
  • Nous allons éditer le fichier de pied de page pour supprimer les widgets et les liens du colophon..

Alors, commençons!

Ce dont vous aurez besoin

Pour suivre ce tutoriel, vous aurez besoin de:

  • Une installation de développement de WordPress - n'ajoutez pas la page de destination à votre site actif tant que vous ne l'avez pas testée.
  • Un thème que vous pouvez éditer. S'il s'agit d'un thème tiers, créez un thème enfant et modifiez-le..
  • Un éditeur de code.

La page de départ

J'ai créé une page fictive sur mon site pour l'utiliser comme page de destination. Voici à quoi cela ressemble en utilisant le modèle de page normal:

Au cours de ce didacticiel, je vais supprimer le menu de navigation, la barre latérale et les zones de widgets dans le pied de page, et je veillerai à ce que rien en dehors du contenu ne soit un lien cliquable..

Création du modèle de page de destination WordPress

Vous devez d’abord créer un modèle de page de destination. Faites cela de l'une des deux manières suivantes:

Si vous travaillez avec votre propre thème, faites une copie de page.php et le renommer.

Si vous travaillez avec un thème tiers, créez un thème enfant. Créer une copie de page.php à partir du thème parent dans le thème enfant et renommez-le.

Ne lui donnez pas un nom de fichier qui commence par page- car cela confondre WordPress si vous créez par la suite une page avec le slug que vous utilisez après page-. J'appelle le mien landing-page-template.php.

Ouvrez maintenant votre fichier de modèle. Ajoutez cette ligne de code en haut:

* / Nom du modèle: Modèle de page de renvoi / *

Enregistrez ceci et vous verrez maintenant que vous pouvez sélectionner le nouveau modèle lorsque vous créez une nouvelle page sur votre site:

Maintenant, supprimez l'appel de la barre latérale du fichier. Trouvez cette ligne:

… Et supprimez-le. Enregistrez votre fichier. Votre nouveau modèle de page est prêt. Mais tu n'es pas encore fini.

Modification du fichier d'en-tête

L’étape suivante consiste à éditer le header.php fichier, pour supprimer les liens lorsque ce modèle de page est utilisé. Pour cela, nous allons utiliser le is_page_template () balise conditionnelle.

Ouvrez votre header.php déposer et trouver le code pour le titre de votre site. 

Remarque: Si vous utilisez un thème tiers, créez un header.php fichier dans votre thème enfant qui est une copie de celui du thème parent, et modifiez-le.

Dans mon thème, cela ressemble à ceci:

"title =""rel =" home ">  

Modifiez-le pour qu'il ressemble à ceci, en effectuant des ajustements pour votre propre thème:

"title =""rel =" home ">

Si le modèle de page de destination est utilisé, le nom du site sera toujours affiché, mais il ne sera pas rendu sous forme de lien..

Vous devez également supprimer la navigation. Trouvez le code de votre menu principal. Dans mon thème, cela ressemble à ceci:

Modifiez-le de sorte que tout le code du menu soit placé dans une balise conditionnelle qui vérifie que nous sommes ne pas en utilisant le modèle de page de destination:

  

S'il existe d'autres menus ou liens dans votre fichier d'en-tête, entourez-les de la même balise conditionnelle - la même chose s'applique aux zones de widgets.

Maintenant, enregistrez le header.php déposer et fermer.

Modification du fichier de pied de page

La dernière étape consiste à s'assurer que les zones de widgets ne s'affichent pas dans le pied de page..

Nous utiliserons la même balise conditionnelle pour générer uniquement les zones de widget si le modèle de page de destination n'est pas utilisé..

Ouvrez votre footer.php modèle (ou créez un duplicata sur votre thème enfant si pertinent).

Trouvez le code pour sortir vos widgets. Voilà le mien:

Emballez maintenant cela dans une balise conditionnelle de la même manière que dans le fichier d'en-tête..

 

Ensuite, nous devrons modifier le colophon. Cela peut inclure un lien vers votre page d'accueil et / ou le site WordPress.

Voilà le mien:

Copyright "title =""rel =" home "> Fièrement propulsé par WordPress.

Maintenant, utilisez une balise conditionnelle pour sortir le colophon sans liens sur la page d'arrivée:

 
droits d'auteur Fièrement propulsé par WordPress.
Copyright "title =""rel =" home "> Fièrement propulsé par WordPress.

Vérifiez votre fichier de pied de page pour d’autres liens et, s’il en existe, insérez-les également dans une balise conditionnelle..

Ajuster le style

Vous constaterez peut-être qu’après avoir supprimé la barre latérale de votre modèle de page de destination, vous devez ajuster le style du contenu. Si la zone de contenu occupe toujours les deux tiers de l’écran, vous pouvez utiliser le menu corps classe générée par WordPress pour le modèle de page à résoudre.

Supposons donc que vous ayez le style suivant pour votre contenu et votre barre latérale:

.content float: left; largeur: 65%;  .sidebar float: right; largeur: 32%; 

Vous aurez besoin d'ajouter un style supplémentaire en dessous de ça pour cibler la classe de contenu dans votre modèle de page d'arrivée WordPress:

.page-template-landing-page-template .content width: 100%; 

Vous devrez ajuster ceci pour prendre en compte les marges ou le remplissage que vous utilisez, mais cela vous donne une idée générale..

La dernière page

Voici ma page de destination sans aucun lien:

Cela a l'air un peu dépourvu pour le moment, mais vous allez le remplir avec beaucoup de contenu juteux visant à encourager les gens à acheter ou à s'inscrire - images, gros boutons rouges, ce genre de chose! Et vous pouvez voir que rien ne distrait le visiteur du contenu de la page..

J'espère que votre page de destination vous rapportera beaucoup d'affaires. Bonne chance!