如何在WordPress中创建着陆页

如果你正在建设你的第一个网站，你可能想知道什么是着陆页。着陆页基本上是为了呈现一种场景，即访问者来到你的WordPress网站并着陆在那个特定页面上——实际上使其成为你网站的入口点。

那么，WordPress中的着陆页就是为了吸引访问者并说服他们采取某个预定义的操作。在大多数情况下，这是为了让他们订阅邮件列表、点击特定链接/按钮、购买产品，或执行某种与社交媒体相关的活动（如点击转发按钮）。

换句话说，这里的目标是将新访问者立即引导到你的WordPress网站上进行某些营销流程，而不是让他们四处游荡，寻找要做的事情。

那么WordPress上的着陆页有什么特别之处？

当然，你实际上不需要像着陆页这样的东西来尝试说服访问者采取某些特定操作。你可以从WordPress平台内可以构建的任何类型的页面，甚至从网站本身的主页来做到这一点。

然而，这里的区别在于着陆页（如果执行得当）总是会带来更好的结果，因为它的单一目的性质，而标准主页通常是以试图展示大量不同内容和信息的方式构建的。

关于着陆页最有趣的事情是它们的设计，或者更准确地说，缺乏设计。大多数WordPress着陆页，至少以目前实现的方式，都非常极简主义。它们通常与网站的其余部分完全分开构建，并保留很少的原始设计元素。

简而言之，出现在着陆页上的每个元素都应该强化页面的主要目标（让访问者采取特定操作），其他一切都应该被删除。

因此，总结一下，构成了一个好的WordPress着陆页的要素，也是我们将在本文中重点关注的要素是：

简单的结构，最小化的设计。
没有侧边栏。侧边栏会使设计分散注意力。
没有页脚。
最小化的页头。以便访问者可以直接看到文案。
如果你要使用Logo，请使其不可点击。

返回顶部

方法一：显而易见的选择——插件

现在几乎所有东西都有插件，WordPress着陆页也不例外。如果你想要一种在WordPress中快速构建着陆页的方式，并且目前不太关心代码优化，那么插件是你应该去的地方。

也就是说，市面上免费的东西不多。我的意思是，当然官方目录中有一些着陆页插件，但你会很快发现它们的功能要么非常有限，要么几乎没有什么免费的东西可用，你必须进行某种应用内购买（我想这是现在的一种方式）才能获得实际功能。

你可能也有兴趣阅读：

返回顶部

方法二：拖放主题构建器

在WordPress网站上构建着陆页的整个理念是让它与所有其他页面不同，因为着陆页与网站不同。但大多数WordPress主题的问题在于，在设计方面你能做什么和不能做什么是非常有限的。

例如，每个主题都允许你在页面模板的主内容区域中放置任何你想要的内容。然而，如果你想在这个区域之外做些什么，那就没那么幸运了。

那么，一些更成熟的主题中集成的拖放构建器有什么不同呢？你基本上可以随心所欲地设计任何页面，这种定制可以通过一个非常易于使用的界面来实现。

我们之前讨论过拖放主题构建器，列出了最流行的20个。

简而言之，建议是这样的：如果你正在建设的网站需要创建一些着陆页模板以及主设计，考虑完全改用拖放构建器。这可能会让你的工作速度快得多。

返回顶部

方法 #3：LeadPages

（注意：这是一个付费解决方案。）

LeadPages已经席卷了在线营销领域！它是构建优质着陆页、与选择加入表单集成、以及其他数十种功能的绝佳工具，可以让您的WordPress网站适合做着陆页。

套餐起价为每月37美元。

我把它列在这里是因为它是一款非常易于使用的工具。所以，如果你愿意投资金钱而不是时间，LeadPages就是适合你的解决方案。无论如何，你可以在这里阅读ClickFunnels vs LeadPages的直接对比。

返回顶部

方法 #4：LeadPages破解

等一下。我接下来要描述的不是什么坏事，也不是违法的。完全可以这样做，据我所知，LeadPages的人对这种方法没有异议。话虽如此，这不是最WordPress优化的解决方案，因此我主要在这里提到它作为一个快速修复方法，你应该只用作占位符，直到你集成一个更易于管理和功能更强大的解决方案。

事情是这样的。LeadPages时不时会发布新的模板作为HTML下载。任何人都可以从官方网站获取这些模板，然后在他们的项目中使用。

唯一的困难是这些着陆页是纯HTML，所以它们不能直接与WordPress兼容。那么我们需要做的是让它们与WordPress兼容。

要处理这个问题，请按照以下步骤操作：

1. 首先去LeadPages的这个汇总选择一个你喜欢的模板。

2. 浏览可用的内容并下载看起来最有希望的模板。（注意：需要选择加入才能下载。）

3. 解压归档文件并将index.html文件重命名为，例如page-landing-template.php

4. 编辑文件并执行以下操作：

在最顶部放置这一行：<?php /* Template Name: Landing Page */ ?>
更改每个外部文件的路径，添加当前主题的路径。例如，像<link rel="stylesheet" href="css/style.css">这样的行会变成<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/css/style.css">

在闭合的</body>标签之前添加：<?php wp_footer(); ?>

5. 将模板文件上传到FTP服务器，直接放入当前主题的文件夹中。

(注意。你可能已经注意到，在上面的例子中，样式和JS文件都被硬编码到头部。这不是WordPress的最佳解决方案，在构建自己的主题时应该尽量避免。然而，在这里，我们使用的是LeadPages模板中的内容，并试图尽快在WordPress中启用这个着陆页，所以我们就保持这样。)

现在，你已经拥有了一个可以在WordPress中使用的LeadPages模板。但是，它仍然无法在WordPress中直接编辑，这意味着如果需要更改任何内容，你需要通过编辑实际的.php文件来实现。

返回顶部

方法 #5：手动创建自定义页面模板

这是我们讨论WordPress时最传统的方法。

基本上，无论你使用什么主题，你都可以为其创建一个自定义页面模板，并在这个模板中做任何你想做的事情。

注意。本列表中的方法 #4 基本上就是关于创建一个自定义页面模板，然后将标准的LeadPages模板放入其中。

通过自定义页面模板在WordPress中手动构建着陆页的最佳方式，就是直接使用默认的 page.php 模板，并调整其 CSS/HTML 结构。

例如，使用之前的默认WordPress主题——Twenty Fourteen，你可以轻松地移除默认的左侧侧边栏、头部、页脚以及其他所有内容。我在这里的做法是：

我拿默认的 page.php 文件，复制一份并命名为 page-lp-example.php。
然后我拿默认的 header.php 和 footer.php 文件，也复制一份（header-lp-example.php 和 footer-lp-example.php）。
在 page-lp-example.php 中，我将默认的 get_header 和 get_footer 调用改为使用我的新模板：get_header('lp-example'); 和 get_footer('lp-example');。
同时在 page-lp-example.php 中，我删除了对 get_sidebar(); 的调用。
最后，我从所有三个文件中删除了着陆页上不需要的所有HTML块。
我将模板命名为"LP Example"。

效果如下：

以下是最终文件的代码。header-lp-example.php：

<!DOCTYPE html>
<!--[if IE 7]>
<html <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width">
      <title><?php wp_title( '|', true, 'right' ); ?></title>
      <link rel="profile" href="http://gmpg.org/xfn/11">
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
      <!--[if lt IE 9]>
      <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
      <![endif]-->
      <?php wp_head(); ?>
</head>

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

page-lp-example.php：

<?php /* Template Name: LP Example */
get_header('lp-example'); ?>
            <div>
                   <div>
                   <div role="main">
                   <?php
                   // Start the Loop.
                   while ( have_posts() ) : the_post();
                         // Include the page content template.
                         get_template_part( 'content', 'page' );
                   endwhile;
                   ?>
                   </div><!-- #content -->
                   </div><!-- #primary -->
             </div><!-- #main-content -->
<?php get_footer('lp-example');

footer-lp-example.php：

小狸科技

如何在WordPress中创建着陆页

那么WordPress上的着陆页有什么特别之处？

方法一：显而易见的选择——插件

你可能也有兴趣阅读：

方法二：拖放主题构建器

方法 #3：LeadPages

方法 #4：LeadPages破解

方法 #5：手动创建自定义页面模板

附加：如何在WordPress上美化你的着陆页

结论

留下评论取消回复

那么WordPress上的着陆页有什么特别之处？

方法一：显而易见的选择——插件

你可能也有兴趣阅读：

方法二：拖放主题构建器

方法 #3：LeadPages

方法 #4：LeadPages破解

方法 #5：手动创建自定义页面模板

附加：如何在WordPress上美化你的着陆页

结论

相关文章

WordPress 中的 Blade 模板：使用 Kinsta 上的 Radicle 进行现代模板开发

使用 HTTP API 构建可靠的远程请求

WPBeginner 聚焦 20：WordPress 存储清理、更智能的预览和自动化更新

留下评论取消回复