编写自定义 WordPress 登录页面的简单步骤

不需要太多的网页设计经验就知道创建一个好的登录页面并不容易。 您需要清楚地了解您的目标网页应该是关于什么的。 您需要了解您的访问者并将他们的注意力引向转化。 幸运的是，如果您熟悉 Web 编码的基础知识，您将拥有必要的自由来优化您认为合适的页面。 考虑到这一点，让我们看看编写自定义 WordPress 登录页面的全部内容。

登陆页面的重要性

在我们详细介绍编码的具体步骤之前，让我们首先详细说明为什么拥有一个好的目标网页很重要。 几乎没有一个网站建设的在线指南不会提到拥有一个体面的目标网页的至关重要性。 无论您的网站是关于销售产品、提供服务还是收集数据，您都需要有一个好的目标网页。

不幸的是，创建一个好的目标网页并不容易。 您需要清楚地了解您的着陆应该是什么样的。 您需要了解您的受众，以引导他们进行转化。 优化不佳的目标网页会大大降低您的表现，并可能破坏您原本出色的在线形象。 请记住，着陆页通常是您的访问者转化为客户之前的最后一步。 所以，尽你所能，让它尽可能好。 幸运的是，如果您了解 Web 编程的基础知识，您可以轻松编写自定义登录页面。 这为您提供了相当大的自由度，这对于真正实用的页面通常是必需的。 因此，考虑到这一点，让我们逐步了解创建 WP 登录页面的必要代码。

编写自定义 WordPress 登录页面

虽然我们将概述的步骤相当简单，但您应该始终考虑咨询专业的网页设计师。 某些网站可能非常复杂，后台运行着许多插件。 如果您不确定自己在做什么，其中一些插件可能会导致或遇到问题。 虽然您可以在不访问管理区域的情况下禁用插件，但您确实应该避免给自己带来太多麻烦。 如果您遇到任何困难，请联系专业的网页设计师来帮助您。

创建子主题

虽然理论上您可以创建一个全新的父主题，但您应该使用子主题。 它们更适合自定义，这使您可以更自由地创建独特的登录页面。 由于我们已经介绍了如何创建子主题，因此我们不会在这里再次讨论。 我们唯一要提到的是，您需要在子主题目录中同时拥有 style.css 和 functions.php 文件才能继续。

构建 Style.css 文件

在 style.css 文件中，您只需添加以下代码：

/*

主题名称：登陆页面主题

描述：带有自定义登录页面的子主题

作者：默认作家

作者 URI：https://www.wpfullcare.com

*/

构建 Functions.php 文件

在functions.php 文件中，您需要添加以下代码。 这样做将允许您注册您的子样式表文件。

<?php

// 父主题样式 //

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

功能主题入队样式（）{

$parent_style = '父样式';

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

wp_enqueue_style('儿童风格',

get_stylesheet_directory_uri() 。 '/style.css',

数组（$parent_style）

);

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

安装并激活您的子主题

完成此操作后，您可以继续安装和激活您的子主题。 一般来说，当谈到 WordPress 主题时，您希望在不同的 WP 网站上进行本地测试。 正如我们所提到的，事故确实会发生。 你真的应该避免禁用你的网站。 设置本地 WordPress 站点后，继续上传您的主题。 激活它后，请确保您的子主题正在运行并且您可以添加样式。 转到 style.css 文件并更改代码的某些部分，以查看它是否正常工作。

构建自定义页面

如果一切正常，您可以继续在您的子主题中创建自定义页面。 为此，您需要在您孩子的主题中创建一个新文件。 完成后，将其保存为 page-landing.php。 在该文件中，您需要添加以下代码：

<?php

/**

模板名称：登陆页面

**/

?>

现在，前往模板下拉菜单并从菜单中选择您的登录页面。 您需要选择一张特色图片作为背景（现在选择大而简单的图片，您可以稍后进行试验）。 然后添加您的副本并发布添加的页面。 现在尝试查看您的页面只会让您进入黑屏。 这是因为您还没有在 page-landing.php 中添加以下标记。

<div id=”landing-page” class=”hfeed 网站”>

<div class=”网站品牌”>

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

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

添加并预览页面后，您应该会看到站点标题以及白色背景和大背景图像。

显示内容

要在登录页面上显示其余内容，您需要将以下标记添加到 page-landing.php。 您需要在 <!– .site-branding –> 行下方执行此操作，以使其正常运行。

<div class="sidebar sidebar-bribe">

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

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

<h1 class=”登陆标题”><?php the_title(”); ?></h1>

<?php the_content(); ?>

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

<?php 结束； ?>

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

</div>

编写自定义 WordPress 登录页面几乎完成。 您所要做的就是为其设置样式。 最简单的方法是只使用 style.css 文件和必要的代码。 由于您的页面外观实际上有无限的选择，因此我们不会为您提供严格的示例。 相反，我们会建议您找到您喜欢的样式并复制它。 这样你就会弄清楚它的功能有多么不同的方面。