如果您想销售商品或吸引访问者注册，WordPress 网站上的登陆页面是一个非常宝贵的工具。在这篇文章中，您将了解如何在 WordPress 中免费创建登陆页面并鼓励人们购买或注册您的服务。
我们将通过自定义第三方 WordPress 主题来创建着陆页。这是免费创建 WordPress 登陆页面的最佳方式，并为您提供最大的灵活性，但它需要一些编码知识。如果您想创建一个无需编码的登陆页面，请查看我们的其他一些帖子。
着陆页是关键页面，旨在促使用户采取行动。该操作的具体内容取决于您的业务，但可能是以下两种情况之一：
买一些东西，可能是大件商品，因为您会使用产品页面来购买较小的产品。 注册某项内容，可能是服务或课程的订阅，也可能是邮件列表。您需要尽可能多地吸引此页面的流量，因为它将对您的网站非常重要。您可以通过搜索引擎优化、广告或直接营销（或者两者的结合）来做到这一点。
但是，一旦人们到达该着陆页，您就需要确保他们购买或注册。
页面的内容将成为您执行此操作的一部分 - 不仅是内容本身，还有您的布局方式。一般来说，商品越贵，您需要的文字和号召性用语就越多。
但这不仅仅是内容的问题。您还需要确保当有人登陆该页面时，他们唯一可用的选项是单击购买按钮。如果有导航菜单、某些小部件或可点击的徽标，他们就有可能点击离开以调查网站的其余部分，并且永远不会返回到着陆页。
这就是在主题中创建登陆页面的用武之地。登陆页面不会有内容之外的链接。不会有菜单，没有小部件，页眉、页脚或其他任何地方都没有可点击的链接。它通常是全宽的（因为您不需要侧边栏小部件），并且它有一个干净的布局，旨在将注意力集中在内容上。
在本教程中，我将向您展示如何为您的主题创建登陆页面模板。这包括四件事：
为您的目标网页创建页面模板 为没有链接的着陆页创建标头 为着陆页创建一个不带链接的页脚 使用模板创建目标网页您需要什么
要学习本教程，您需要：
WordPress 的测试或开发安装 代码编辑器 已安装主题那么让我们开始吧。
创建子主题
如果您正在开发自己的主题，则可以跳过此部分。但是，如果您使用从主题目录下载的第三方主题或从 ThemeForest 或其他来源购买的第三方主题，则需要一个子主题。
按照我们的指南创建子主题，并将新主题保存在您网站的 wp-content/themes 目录中。
创建登陆页面模板文件
现在您需要创建一个页面模板作为您的登陆页面模板。您需要复制主题中页面使用的任何模板并重命名新文件。对于许多主题来说，就是 page.php。对于二十二十，那就是singular.php。您可以使用 WordPress 模板层次结构来确定正在使用哪个模板文件。
如果您使用子主题，您可以将副本复制到子主题。如果您正在使用主主题，请将副本保存在主主题中。注意：不要在您的实时网站上执行此操作！
如果您的主题有全角页面模板，请使用它而不是 page.php，因为页面布局已经设置为没有侧边栏，并且侧边栏将有已被删除。
我已将文件命名为landing-page-template.php。不要给它一个以 page 开头的名称。如果您随后使用该名称创建页面，WordPress 会自动将模板分配给该页面。最好保持手动操作，以便您拥有更多控制权。
这是我的新 landing-page-template.php 文件的完整内容。如果您使用不同的主题，您的主题看起来会有所不同。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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(); ?>
现在是时候编辑文件了。从顶部注释掉的文本开始。将其替换为页面模板所需的文本：
1
2
3
4
<?php /**
* Template Name: Landing Page
*
*/
下一步是删除对侧边栏或页脚的任何调用。如何执行此操作取决于您的主题以及您是否首先使用全角模板。
在《二十二十分》中，没有对侧边栏的调用，所以我不需要删除它。如果您的模板中有此行，则需要将其删除：
1
<?php get_sidebar(); ?>
注意：编辑完此模板文件后，您可能会发现布局在侧边栏应有的位置留下了间隙。编辑模板的 CSS 或更改内容部分中的类以使其全宽。
现在是页脚。您不想完全删除页脚，因为您仍然需要版权页和对 wp_footer 的调用，因此您不必删除 get_footer() 调用，而是将其保留在那里并为您的目标网页创建一个新的页脚文件。
在《二十二十分》中，页脚无法以标准方式工作。我的模板文件中有两个调用：
1
<?php get_template_part( template-parts/footer-menus-widgets ); ?><?php get_footer(); ?>
第一个调用一个包含文件，该文件只包含小部件。第二个调用我需要的页脚，但我们稍后会对其进行编辑。所以我删除这一行：
1
<?php get_template_part( template-parts/footer-menus-widgets ); ?>
现在保存您的文件。我们很快就会回来讨论这个问题。
为您的目标网页创建标头
现在是时候为您的目标网页创建一个没有导航、小部件或链接的标题了。
复制主题的 header.php 文件（在主主题或子主题中）并将其命名为 header-landing.php。
删除徽标或网站标题中的链接
在头文件中查找站点名称或徽标。我的由一个函数组成：
1
twentytwenty_site_logo();
我不会尝试编辑该函数，而是将其替换为对徽标的调用：
1
2
3
4
<img src="<?php%20echo%20get_stylesheet_directory_uri();%20?>/images/xxx.jpg%E2%80%9D%20>%0A</pre>%0A<p>%E5%B0%86%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E4%B8%AD%E7%9A%84xxx.jpg%E6%9B%BF%E6%8D%A2%E4%B8%BA%E6%82%A8%E8%87%AA%E5%B7%B1%E7%9A%84%E5%BE%BD%E6%A0%87%E5%90%8D%E7%A7%B0%EF%BC%8C%E5%B9%B6%E7%A1%AE%E4%BF%9D%E4%BD%BF%E7%94%A8%E6%AD%A3%E7%A1%AE%E7%9A%84%E8%B7%AF%E5%BE%84%E3%80%82</p>%0A<p>%E5%A6%82%E6%9E%9C%E6%82%A8%E7%9A%84%E7%BD%91%E7%AB%99%E5%9C%A8%E6%A0%87%E9%A2%98%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%BD%91%E7%AB%99%E6%A0%87%E9%A2%98%E8%80%8C%E4%B8%8D%E6%98%AF%E5%BE%BD%E6%A0%87%E5%9B%BE%E5%83%8F%EF%BC%8C%E8%AF%B7%E4%BD%BF%E7%94%A8%E4%BB%A5%E4%B8%8B%E5%86%85%E5%AE%B9%EF%BC%9A</p>%0A<pre%20class=" brush:php alt="创建 WordPress 登陆页面：分步指南" ><div class="site-title faux-heading">
<?php bloginfo( name ); ?>
</div>
注意：我上面使用的类是特定于 20 20 的。编辑它们以反映您的主题。
如果您的主题以比二十二十更标准的方式工作，您可能会发现此代码已经存在。您所要做的就是删除其周围的任何 元素，以便网站标题或徽标仍然存在，但它们不会充当链接。
删除导航菜单
现在是时候删除导航菜单了。在头文件管理器中找到它的代码。在《二十二》中，它位于一个如下所示的元素内：
1
2
3
<div class=“header-navigation-wrapper">
</div><!-- .header-navigation-wrapper —>
如果您正在使用“二十二十”，请删除它以及其中的所有内容。如果没有，您需要找到具有相似名称的 div、aside 或 section。
Twenty Twenty 在这些元素内还有两个用于移动设备的切换导航按钮：
1
2
3
<button class="toggle search-toggle mobile-search-toggle">
</button>
1
2
3
<button class="toggle nav-toggle mobile-nav-toggle">
</button>
删除这些内容，确保不要删除它们之间的网站标题和说明。如果您的主题有类似的内容，请将其删除。
删除任何小部件区域或其他带有链接的代码
《二十二十》也有搜索代码，我也将删除它。您的主题可能在小部件中包含此内容，在这种情况下，请删除头文件中的所有小部件区域。
最后，在《二十二十》中，文件末尾有一个模式菜单，我也想将其删除。同样，您的主题可能没有这个 - 《二十二十》比许多主题更复杂！
我的header-landing.php文件现在看起来简单多了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?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 -->
<!-- .header-titles-wrapper -->
<!-- .header-inner -->
<!-- #site-header —>
保存文件并返回到您的模板文件。找到调用标题的行：
1
get_header();
编辑它，以便它调用新的头文件：
1
get_header( ‘landing’ );
现在保存您的文件。
为着陆页创建页脚
现在是时候为您的目标网页创建页脚了。
复制 footer.php 并将其命名为 footer-landing.php。打开您的新文件。
找到小部件区域的任何代码并将其删除。 《二十二十》在 footer.php 文件中没有小部件区域；它们位于一个包含文件中，我已经删除了对该文件的调用。
您还需要编辑版权页以删除链接。这是《二十二十分》的版权页：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="footer-credits">
<p class="footer-copyright">©
<?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%20echo%20esc_url(%20__(%20https://wordpress.org/,%20twentytwenty%20)%20);%20?>">
<?php _e( Powered by WordPress, twentytwenty ); ?></a>
</p><!-- .powered-by-wordpress -->
<!-- .footer-credits -->
删除代码中的所有链接。我的现在是这样的：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="footer-credits">
<p class="footer-copyright">©
<?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 -->
现在保存页脚文件并返回到您的模板文件。找到对页脚的调用：
1
<?php get_footer(); ?>
编辑它以调用新的页脚文件：
1
<?php get_footer( landing ); ?>
我的模板文件现在已被精简，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php /**
* Template Name: Landing Page
*
*/
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_footer( landing ); ?>
保存您的模板文件，如果您正在使用子主题，请在 WordPress 管理员中激活它。
使用模板创建您的目标网页
为您的目标网页创建一个新的静态页面，并为其指定一个适合您希望其执行的操作的标题。
创建内容，然后在右侧文档窗格的页面属性部分中，选择着陆页 >模板 下拉菜单。
发布页面。
现在，当您在前端访问它时，您会发现它没有链接或导航，人们在页面上唯一可以点击的就是您的号召性用语按钮。
摘要
如果您确保人们到达目标网页时可以采取的唯一操作是点击您的“购买”按钮，那么目标网页就会更加强大。通过在 WordPress 主题中创建着陆页模板，您将使着陆页更加有效并获得更多销售或订阅。
按照本指南操作，您将拥有适合您的主题的强大登陆页面！
以上就是创建 WordPress 登陆页面：分步指南的详细内容，更多请关注php中文网其它相关文章！