您想为您的网站创建自定义WordPress登录页面吗？
如果您运行WordPress会员网站或在线商店，那么您的许多用户通常会看到登录页面。通过自定义默认的WordPress登录页面，您可以提供更好的用户体验。
在此终极指南中，我们将向您展示创建自定义WordPress登录页面的不同方法。您也可以使用本教程创建自定义WooCommerce电商网站的登录页面。
以下是您将从本指南中学到的内容。
为什么要创建自定义WordPress登录页面？
WordPress带有强大的用户管理系统。这允许用户在电子商务商店、会员网站或博客上创建帐户。
默认情况下，登录页面显示WordPress品牌和徽标。如果您正在运行小型博客，或者您是唯一具有管理员权限的人则可以。
但是，如果您的网站允许用户注册和登录，则自定义登录页面可提供更好的用户体验。
使用您自己的徽标和设计，让您的用户有宾至如归的感觉。而将它们重定向到默认的WordPress登录屏幕，看起来与您的网站不同，可能会让您的用户感到怀疑。
最后，默认登录屏幕除了登录表单之外不包含任何内容。通过创建自定义登录页面，您可以利用它来推广其他页面或进行特殊促销。
话虽这么说，让我们来看看自定义WordPress登录页面设计的一些例子。
WordPress登录页面设计实例
网站所有者可以使用不同的样式和技术自定义WordPress登录页面。
有些人创建了一个使用其网站主题和颜色的自定义登录页面。其他人，通过添加自定义背景、颜色和自己的徽标来修改默认登录页面。
1. 我的∙文案博主
我的∙文案博主是当前市场上最好的内容营销培训和文案写作社区。它不仅仅是关于SEO、文案写作、社交媒体和内容营销的，它更是一幅数字化营销的宏大图景，是有关数字化营销和在线业务的方方面面的。
我的∙文案博主的自定义登录页面使用了简单的登录页面自定义技巧。修改了顶部默认的WordPress图标及其链接。
2. 我的婚礼摇滚
Rock My Wedding的网站使用弹出模式显示登录和注册表单。使用弹出窗口的优点是用户可以在不离开页面的情况下登录。它可以使他们免受新页面加载的影响，并提供更快的用户体验。
2. 雅克琳娜史蒂夫
Jacquelynne Steeves是一个艺术和手工艺网站，作者在该网站上发布有关装饰家居、制作被子、图案、刺绣等内容。他们的登录页面使用与其网站主题相匹配的自定义背景图像和右侧的登录表单。
4.教会动态图形
这家动态图形设计公司的登录页面使用了丰富多彩的背景，反映了他们的业务。它在登录屏幕上使用相同的站点页眉、页脚和导航菜单。登录表单本身非常简单，背景较暗。
5.麻省理工学院管理评论
MITSLoan Management Review网站使用默认的WordPress登录屏幕。它使用带有自己徽标的自定义CSS来隐藏WordPress品牌。
在WordPress中创建前端自定义登录页面
有几个WordPress插件可用于在WordPress中创建前端自定义登录页面。我们将向您展示两个不同的插件，您可以选择最适合您的插件。
使用Theme My Login创建WordPress登录页面
您需要做的第一件事是安装并激活Theme My Login插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
激活后，Theme My Login会自动为您的自定义登录、注销、注册、忘记密码和重置密码操作创建URL。
您可以通过访问Theme My Login » General页面来自定义这些WordPress登录URL 。向下滚动到“Slugs”部分，修改插件用于登录操作的这些URL。
Theme My Login还允许您使用短代码创建自定义登录和注册页面。您只需为每个操作创建一个页面，然后在图片所示位置添加页面slug，以便插件可以正确地查找和重定向用户。
让我们从登录页面开始。
转到页面»新建页面以创建新的WordPress页面。您需要为页面添加标题，然后在内容区域中输入以下短代码“[theme-my-login]”。
您现在可以发布您的页面并进行预览，以查看您的自定义登录页面。
重复此过程以使用以下短代码创建其他页面。
注册页面的[theme-my-login action =“register”]。
忘记密码页面的[theme-my-login action =“lostpassword”]。
重置密码页面[theme-my-login action =“resetpass”]。
自定义您的WordPress登录表单页面设计
默认情况下，您的自定义WordPress登录表单页面将使用主题的页面模板和样式。它将包含您主题的导航菜单、页眉、页脚和侧边栏小部件。
如果您想完全接管整个页面并从头开始设计，那么您可以使用WordPress页面构建器插件。
使用页面构建器插件，您可以创建自定义页面布局，然后添加Theme My Login或WPForms提供的登录表单窗口小部件。
在下面的屏幕截图中，我们使用了流行的Beaver Builder插件。我们在全屏布局上使用了背景图像，然后添加了两列。在一列中，我们添加了一些文本和一个按钮。在另一列中，我们添加了WPForms小部件。
Beaver Builder的好处在于它是100％拖放解决方案。
注意：由于您已经登录，因此Theme My Login和WPForms插件都可能无法显示登录表单的实时预览。WPForms插件有一个选项，您可以在表单设置中关闭它。
如果WordPress页面构建器插件不是你喜欢用的东西，那么你可以使用Custom CSS插件来设置表单和登录页面本身的样式。或者，您也可以使用CSS Hero插件轻松添加自定义CSS样式。
更改WordPress登录徽标和URL
您并不总是需要为您的网站创建一个完全自定义的WordPress登录页面。事实上，许多网站只是在使用默认登录页面时替换WordPress徽标和徽标网址，就像我们的我的∙文案博主。
如果您想使用自己的徽标替换登录屏幕上的WordPress徽标，则可以使用WordPress插件或添加自定义代码轻松完成。我们将向您展示两种方法，您可以使用最适合您的方法。
使用插件更改WordPress登录徽标和URL
您需要做的第一件事是安装并激活Colorlib登录定制器插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
激活后，该插件会向WordPress管理侧栏添加一个标有“登录自定义程序”的新菜单项。单击它将启动登录自定义程序。
登录自定义程序将加载默认的WordPress登录屏幕，左侧是自定义选项，右侧是实时预览。
要用自己的徽标替换WordPress徽标，请单击右侧的“徽标选项”选项卡。从这里，您可以隐藏WordPress徽标，上传您自己的自定义徽标，更改徽标URL和文本。
该插件还允许您完全自定义默认的WordPress登录页面。您可以添加列、背景图像、更改登录表单颜色等。
基本上，您可以创建自定义WordPress登录页面而无需更改默认的WordPress登录URL。
完成后，只需单击“发布”按钮即可保存更改。您现在可以访问WordPress登录页面以查看您的自定义登录表单。
无插件更改WordPress登录徽标和URL（代码）
此方法允许您使用自己的自定义徽标手动替换登录屏幕上的WordPress徽标。
首先，您需要将自定义徽标上传到媒体库。转到媒体»添加页面并上传您的自定义徽标。
上传图片后，点击旁边的“修改”链接。这将打开编辑媒体页面，您需要在其中复制文件URL并将其粘贴到计算机上的空白文本文件中。
接下来，您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中。
function eastfu_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(http://path/to/your/custom-logo.png);
height:100px;
width:300px;
background-size: 300px 100px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'eastfu_login_logo' );不要忘记使用之前复制的文件URL替换背景图像URL。您还可以调整其他CSS属性以匹配您的自定义徽标图像。
您现在可以访问WordPress登录页面以查看您的自定义徽标。
此代码仅替换WordPress徽标。它不会更改指向WordPress.org网站的徽标链接。
让我们改变这一点。
function eastfu_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'eastfu_login_logo_url' );
function eastfu_login_logo_url_title() {
return '你的网站名称和信息';
}
add_filter( 'login_headertitle', 'eastfu_login_logo_url_title' );只需将以下代码添加到主题的functions.php文件或特定于站点的插件中。您可以在之前添加的代码下方添加此代码。
不要忘记将“您的站点名称和信息”替换为您站点的实际名称。登录屏幕上的自定义徽标现在将指向您网站的主页。
就这样。我们希望本文能帮助您了解为您的网站创建WordPress登录页面的不同方法。您可能还希望查看我们的7款WordPress备份插件比较，以有关进行WordPress网站数据备份的提示。
发表回复