Étapes faciles pour coder une page de destination WordPress personnalisée

Il ne faut pas beaucoup d'expérience en conception de sites Web pour comprendre que la création d'une bonne page de destination n'est pas facile. Vous devez avoir une idée claire de ce que votre page de destination est censée être . Et vous devez comprendre vos visiteurs et guider leur attention vers la conversion. Heureusement, si vous connaissez les bases du codage Web, vous aurez la liberté nécessaire pour optimiser votre page comme bon vous semble. Dans cet esprit, voyons en quoi consiste le codage d'une page de destination WordPress personnalisée .

L'importance d'une landing page

Avant de passer en revue les étapes spécifiques du codage, expliquons d'abord pourquoi il est important d'avoir une bonne page de destination. Il n'y a guère de guide en ligne sur la création de sites Web qui ne mentionne l'importance vitale d'avoir une page de destination décente . Que votre site Web concerne la vente d'un produit, l'offre d'un service ou la collecte de données, vous devez avoir une bonne page de destination.

Malheureusement, créer une bonne page de destination n'est pas facile. Vous devez avoir une idée claire de ce à quoi votre atterrissage est censé ressembler. Et vous devez comprendre votre public afin de le guider vers les conversions. Une page de destination mal optimisée peut réduire considérablement vos performances et potentiellement ruiner votre présence en ligne par ailleurs stellaire. N'oubliez pas que la page de destination est généralement la dernière étape avant que votre visiteur ne se transforme en client . Alors, faites de votre mieux pour le rendre aussi bon que possible. Heureusement, si vous connaissez les bases de la programmation Web, vous pouvez facilement coder une page de destination personnalisée. Cela vous donne une liberté considérable, ce qui est généralement nécessaire pour une page vraiment fonctionnelle . Donc, dans cet esprit, passons pas à pas dans le code nécessaire à la création d'une page de destination WP.

Coder une landing page WordPress personnalisée

Bien que les étapes que nous allons décrire soient assez simples, vous devriez toujours envisager de consulter un concepteur de sites Web professionnel. Certains sites Web peuvent être assez compliqués avec de nombreux plugins exécutés en arrière-plan . Et certains de ces plugins peuvent potentiellement causer ou rencontrer des problèmes si vous n'êtes pas sûr de ce que vous faites. Bien que vous puissiez désactiver les plugins sans accéder à la zone d'administration, vous devriez vraiment éviter de vous mettre trop de problèmes . Si vous rencontrez des difficultés sur toute la ligne, contactez un concepteur de sites Web professionnel pour vous aider.

Créer un thème enfant

Bien que vous puissiez, théoriquement, créer un tout nouveau thème parent, vous devriez opter pour un thème enfant. Ils sont beaucoup mieux adaptés à la personnalisation, ce qui vous donne plus de liberté pour créer des pages de destination uniques. Puisque nous avons expliqué comment créer un thème enfant, nous n'y reviendrons pas ici. La seule chose que nous mentionnerons est que vous devez avoir les fichiers style.css et functions.php dans votre répertoire de thème enfant pour pouvoir continuer.

Créer un fichier Style.css

Dans le fichier style.css il vous suffit d'ajouter le code suivant :

/*

Nom du thème : thème de la page de destination

Description : Thème enfant avec page de destination personnalisée

Auteur : Écrivain par défaut

URI de l'auteur : https://www.wpfullcare.com

*/

Construire un fichier Functions.php

Dans le fichier functions.php, vous devez ajouter le code suivant. Cela vous permettra d'enregistrer votre fichier de feuille de style enfant.

<?php

// Styles de thème parent //

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

fonction theme_enqueue_styles() {

$parent_style = 'parent-style';

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

wp_enqueue_style( 'style enfant',

get_stylesheet_directory_uri() . '/style.css',

tableau( $style_parent )

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Installez et activez votre thème enfant

Ceci fait, vous pouvez procéder à l'installation et à l'activation de votre thème enfant. En ce qui concerne les thèmes WordPress en général, vous souhaitez les tester localement sur un autre site Web WP. Comme nous l'avons mentionné, les accidents se produisent. Et vous devriez vraiment éviter de désactiver votre site Web . Une fois que vous avez configuré un site WordPress local, procédez au téléchargement de votre thème. Une fois activé, assurez-vous que votre thème enfant fonctionne et que vous pouvez ajouter des styles. Accédez au fichier style.css et modifiez certaines parties du code afin de voir s'il fonctionne.

Créer une page personnalisée

Si tout est en ordre, vous pouvez procéder à la création d'une page personnalisée dans votre thème enfant. Pour ce faire, vous devez créer un nouveau fichier dans le thème de votre enfant. Une fois que vous l'avez fait, enregistrez-le sous le nom de page-landing.php. Dans ce fichier, vous devez ajouter le code suivant :

<?php

/**

Nom du modèle : page de destination

**/

?>

Maintenant, dirigez-vous vers la liste déroulante des modèles et choisissez votre page de destination dans le menu. Vous devrez choisir une image en vedette à utiliser comme arrière-plan ( choisissez quelque chose de grand et de simple pour l'instant, car vous pourrez l'expérimenter plus tard ). Ajoutez ensuite votre copie et publiez la page ajoutée. Essayer de revoir votre page maintenant ne vous amènera qu'à un écran noir. C'est parce que vous n'avez toujours pas ajouté le balisage suivant à la page-landing.php.

<div id=”landing-page” class=”hfeed site”>

<div class="image de marque du site">

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

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

Une fois que vous l'avez ajouté et prévisualisé votre page, vous devriez voir le titre de votre site avec un fond blanc et une grande image d'arrière-plan.

Afficher le contenu

Pour afficher le reste du contenu sur votre page de destination, vous devez ajouter le balisage suivant à la page-landing.php. Vous devez le faire juste en dessous de la ligne <!– .site-branding –> pour que cela fonctionne correctement.

<div class="sidebar sidebar-bribe">

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

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

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

<?php le_contenu(); ?>

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

<?php pendant que ; ?>

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

</div>

Le codage d'une page de destination WordPress personnalisée est presque terminé. Tout ce que vous avez à faire est de mettre en place le style pour cela. La façon la plus simple de le faire est de n'utiliser que le fichier style.css et le code nécessaire. Comme il existe des options littéralement illimitées sur l'apparence de votre page, nous ne vous donnerons pas d'exemple strict à suivre. Au lieu de cela, nous vous recommanderons de trouver un style que vous aimez et de le copier . De cette façon, vous comprendrez comment différents aspects de sa fonction.