Créer une page de destination WordPress : un guide étape par étape

Une page de destination sur votre site WordPress est un outil précieux si vous souhaitez vendre quelque chose ou inciter les visiteurs à s'inscrire. Dans cet article, vous apprendrez comment créer gratuitement une page de destination dans WordPress et encourager les gens à acheter ou à s'inscrire à vos services.

Nous créerons la page de destination en personnalisant un thème WordPress tiers. C’est la meilleure façon de créer une page de destination WordPress gratuitement et vous offre le plus de flexibilité, mais cela nécessite certaines connaissances en codage. Si vous souhaitez créer une page de destination qui ne nécessite aucun codage, consultez certains de nos autres articles.

Les pages de destination sont des pages clés conçues pour inciter les utilisateurs à agir. Ce que cela fait exactement dépend de votre entreprise, mais cela peut être de deux choses :

• Achetez quelque chose, peut-être un article coûteux, puisque vous utiliserez la page produit pour acheter des produits plus petits.
• Inscrivez-vous à quelque chose, qu'il s'agisse d'un abonnement à un service ou d'un cours, ou d'une liste de diffusion.

Vous devez générer autant de trafic que possible vers cette page car elle sera très importante pour votre site Web. Vous pouvez le faire via le référencement, la publicité ou le marketing direct (ou une combinaison des deux).

Mais une fois que les gens accèdent à cette page de destination, vous devez vous assurer qu'ils achètent ou s'inscrivent.

Le contenu de la page fera partie de la façon dont vous procéderez - pas seulement le contenu lui-même, mais aussi la façon dont vous le présenterez. De manière générale, plus l’article est cher, plus vous avez besoin de texte et d’appels à l’action.

Mais il ne s’agit pas seulement du contenu. Vous voulez également vous assurer que lorsque quelqu’un arrive sur la page, la seule option qui s’offre à lui est de cliquer sur le bouton d’achat. S'il existe un menu de navigation, certains widgets ou un logo cliquable, il est possible qu'ils cliquent pour explorer le reste du site et ne reviennent jamais à la page de destination.

C'est là qu'intervient la création d'une page de destination dans votre thème. La page de destination ne comportera aucun lien en dehors du contenu. Il n'y aura pas de menus, pas de widgets, pas de liens cliquables dans l'en-tête, le pied de page ou ailleurs. Il est généralement pleine largeur (puisque vous n'avez pas besoin de widgets dans la barre latérale) et sa mise en page est claire, conçue pour attirer l'attention sur le contenu.

Dans ce tutoriel, je vais vous montrer comment créer un modèle de page de destination pour votre thème. Cela comprend quatre choses :

• Créez des modèles de page pour vos pages de destination
• Créer des en-têtes pour les pages de destination sans liens
• Créez un pied de page sans liens pour votre page de destination
• Créez des pages de destination à l'aide de modèles

Alors commençons. Je vais créer ce modèle de page de destination pour le thème Twenty Twenty, ce qui signifie créer un thème enfant afin de ne pas modifier un thème tiers.

De quoi as-tu besoin

Pour suivre ce tutoriel il vous faut :

• Une installation de test ou de développement de WordPress
• Éditeur de code
• Thème installé

Alors commençons.

Créer un thème enfant

Si vous développez votre propre thème, vous pouvez ignorer cette partie. Cependant, si vous utilisez un thème tiers téléchargé à partir du répertoire de thèmes ou acheté auprès de ThemeForest ou d'autres sources, vous aurez besoin d'un thème enfant.

Suivez notre guide pour créer un thème enfant et enregistrez le nouveau thème dans le répertoire wp-content/themes de votre site.

Créer un fichier de modèle de page de destination

Vous devez maintenant créer un modèle de page qui servira de modèle de page de destination. Vous devrez copier tous les modèles utilisés par les pages de votre thème et renommer les nouveaux fichiers. Pour de nombreux thèmes, il s'agit de page.php. Pour Twenty Twenty, c'est singular.php. Vous pouvez utiliser la hiérarchie des modèles WordPress pour déterminer quel fichier de modèle est utilisé.

Si vous utilisez un thème enfant, vous pouvez copier la copie dans le thème enfant. Si vous utilisez le thème principal, enregistrez une copie dans le thème principal. Remarque : Ne faites pas cela sur votre site Web en direct !

Si votre thème a un modèle de page pleine largeur, utilisez-le à la place de page.php car la mise en page est déjà configurée sans barre latérale et la barre latérale aura été supprimée.

J'ai nommé le fichier landing-page-template.php. Ne lui donnez pas de nom commençant par page. Si vous créez ensuite une page portant ce nom, WordPress attribuera automatiquement le modèle à cette page. Il est préférable de le garder manuel pour avoir plus de contrôle.

Voici le contenu complet de mon nouveau fichier landing-page-template.php. Si vous utilisez un thème différent, votre thème sera différent.

<?php
/**
 * The template for displaying single posts and pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

get_header();
?>

<main id="site-content" role="main">

    <?php

	if ( have_posts() ) {

		while ( have_posts() ) {
			the_post();

			get_template_part( 'template-parts/content', get_post_type() );
		}
	}

	?>

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

Il est maintenant temps de modifier le fichier. Commencez par le texte commenté en haut. Remplacez-le par le texte que vous souhaitez pour votre modèle de page :

<?php
/**
* Template Name: Landing Page
*
*/

L'étape suivante consiste à supprimer tous les appels vers la barre latérale ou le pied de page. La façon dont vous procédez dépend de votre thème et si vous utilisez ou non un modèle pleine largeur en premier lieu.

在《二十二十分》中，没有对侧边栏的调用，所以我不需要删除它。如果您的模板中有此行，则需要将其删除：

<?php get_sidebar(); ?>

注意：编辑完此模板文件后，您可能会发现布局在侧边栏应有的位置留下了间隙。编辑模板的 CSS 或更改内容部分中的类以使其全宽。

现在是页脚。您不想完全删除页脚，因为您仍然需要版权页和对 wp_footer 的调用，因此您不必删除 get_footer() 调用，而是将其保留在那里并为您的目标网页创建一个新的页脚文件。

在《二十二十分》中，页脚无法以标准方式工作。我的模板文件中有两个调用：

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

第一个调用一个包含文件，该文件只包含小部件。第二个调用我需要的页脚，但我们稍后会对其进行编辑。所以我删除这一行：

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

现在保存您的文件。我们很快就会回来讨论这个问题。

为您的目标网页创建标头

现在是时候为您的目标网页创建一个没有导航、小部件或链接的标题了。

复制主题的 header.php 文件（在主主题或子主题中）并将其命名为 header-landing.php。

删除徽标或网站标题中的链接

在头文件中查找站点名称或徽标。我的由一个函数组成：

twentytwenty_site_logo();

我不会尝试编辑该函数，而是将其替换为对徽标的调用：

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/xxx.jpg” >

将上面代码中的xxx.jpg替换为您自己的徽标名称，并确保使用正确的路径。

如果您的网站在标题中使用网站标题而不是徽标图像，请使用以下内容：

<div class="site-title faux-heading">

    <?php bloginfo( 'name' ); ?>

</div>

注意：我上面使用的类是特定于 20 20 的。编辑它们以反映您的主题。

如果您的主题以比二十二十更标准的方式工作，您可能会发现此代码已经存在。您所要做的就是删除其周围的任何 <a> 元素，以便网站标题或徽标仍然存在，但它们不会充当链接。

删除导航菜单

现在是时候删除导航菜单了。在头文件管理器中找到它的代码。在《二十二》中，它位于一个如下所示的元素内：

<div class=“header-navigation-wrapper">

</div><!-- .header-navigation-wrapper —>

如果您正在使用“二十二十”，请删除它以及其中的所有内容。如果没有，您需要找到具有相似名称的 div、aside 或 section。

Twenty Twenty 在这些元素内还有两个用于移动设备的切换导航按钮：

<button class="toggle search-toggle mobile-search-toggle">

</button>

<button class="toggle nav-toggle mobile-nav-toggle">

</button>

删除这些内容，确保不要删除它们之间的网站标题和说明。如果您的主题有类似的内容，请将其删除。

删除任何小部件区域或其他带有链接的代码

《二十二十》也有搜索代码，我也将删除它。您的主题可能在小部件中包含此内容，在这种情况下，请删除头文件中的所有小部件区域。

最后，在《二十二十》中，文件末尾有一个模式菜单，我也想将其删除。同样，您的主题可能没有这个 - 《二十二十》比许多主题更复杂！

我的header-landing.php文件现在看起来简单多了：

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

    <head>

        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >

    	<link rel="profile" href="https://gmpg.org/xfn/11">

    	<?php wp_head(); ?>

    </head>

	<body <?php body_class(); ?>>

		<?php
		wp_body_open();
		?>

		<header id="site-header" class="header-footer-group" role="banner">

			<div class="header-inner section-inner">

				<div class="header-titles-wrapper">

					<div class="header-titles">

						<?php
							// Site title or logo.
							bloginfo( 'name' );

							// Site description.
							twentytwenty_site_description();
						?>

					</div><!-- .header-titles -->

				</div><!-- .header-titles-wrapper -->
			

			</div><!-- .header-inner -->

		</header><!-- #site-header —>

保存文件并返回到您的模板文件。找到调用标题的行：

get_header();

编辑它，以便它调用新的头文件：

get_header( ‘landing’ );

现在保存您的文件。

为着陆页创建页脚

现在是时候为您的目标网页创建页脚了。

复制 footer.php 并将其命名为 footer-landing.php。打开您的新文件。

找到小部件区域的任何代码并将其删除。 《二十二十》在 footer.php 文件中没有小部件区域；它们位于一个包含文件中，我已经删除了对该文件的调用。

您还需要编辑版权页以删除链接。这是《二十二十分》的版权页：

<div class="footer-credits">

    <p class="footer-copyright">&copy;
		<?php
		echo date_i18n(
			/* translators: Copyright date format, see https://www.php.net/date */
			_x( 'Y', 'copyright date format', 'twentytwenty' )
		);
		?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
	</p><!-- .footer-copyright -->

	<p class="powered-by-wordpress">
		<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
			<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
		</a>
	</p><!-- .powered-by-wordpress -->

</div><!-- .footer-credits -->

删除代码中的所有链接。我的现在是这样的：

<div class="footer-credits">

    <p class="footer-copyright">&copy;
		<?php
		echo date_i18n(
			/* translators: Copyright date format, see https://www.php.net/date */
			_x( 'Y', 'copyright date format', 'twentytwenty' )
		);
		?>
		<?php bloginfo( 'name' ); ?>
	</p><!-- .footer-copyright -->

	<p class="powered-by-wordpress">
			<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
	</p><!-- .powered-by-wordpress -->

</div><!-- .footer-credits -->

现在保存页脚文件并返回到您的模板文件。找到对页脚的调用：

<?php get_footer(); ?>

编辑它以调用新的页脚文件：

<?php get_footer( 'landing' ); ?>

我的模板文件现在已被精简，内容如下：

<?php
/**
* Template Name: Landing Page
*
*/

get_header();
?>



    



<?php get_footer( 'landing' ); ?>

保存您的模板文件，如果您正在使用子主题，请在 WordPress 管理员中激活它。

使用模板创建您的目标网页

为您的目标网页创建一个新的静态页面，并为其指定一个适合您希望其执行的操作的标题。

创建内容，然后在右侧文档窗格的页面属性部分中，选择着陆页 >模板 下拉菜单。

Page de publication.

Maintenant, lorsque vous y accéderez sur le front-end, vous remarquerez qu'il ne contient ni liens ni navigation et que la seule chose sur laquelle les gens peuvent cliquer sur la page est votre bouton d'appel à l'action.

Résumé

Votre page de destination sera beaucoup plus puissante si vous vous assurez que la seule action que les gens peuvent entreprendre lorsqu'ils y arrivent est de cliquer sur votre bouton « Acheter ». En créant un modèle de page de destination dans votre thème WordPress, vous rendrez votre page de destination plus efficace et obtiendrez plus de ventes ou d'abonnements.

Suivez ce guide et vous obtiendrez une page de destination puissante qui correspond à votre thème !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!