使用平面 UI 构建自定义 WordPress 登录表单

最后更新 - 2021 年 7 月 8 日

WordPress 已经存在了相当长的一段时间。 最初是博客的门户，现在已成为负责运营全球近一半网站的内容管理系统。 其简单而直观的界面和可定制的设计使其成为全球 Web 开发人员和设计师从头开始构建网站的首选。

任何使用 WordPress 的人都会关注细节和原创性，以增强用户体验并提高点击率。 大多数开发人员主要只关注主题，但对于会员网站和其他平台，起点是登录页面。 想象一下，如果您是网站上的新注册会员，并且登录到与非注册会员类似的屏幕，则影响会略微减弱，让您感到相当不满意。 但是，拥有一个定制的 WordPress 登录页面以适应您的业务的要求和美学，会给访问者留下更好的印象并激起他们的兴趣。

为了帮助解决这个问题，我们总结了一些简单的指南，以包含您的自定义 WordPress 登录页面的样式，该页面在视觉上与您的网站设计方案集成。

构建没有插件的自定义 WordPress 登录页面

可以通过更新所选主题的 function.php 文件中的源代码来对 WordPress 登录页面进行多项更改。 但是，一旦您更新 WordPress，这些更改就会丢失。 这是因为登录页面的主题样式表不是 WordPress 主题设置的一部分，这需要您为自定义登录页面创建另一个样式表。

首先在您的主题文件夹中创建一个名为“Login”的文件夹，然后添加一个名为custom-login-style.css的 .txt 文件。 从那里开始，您可以继续进行一些基本修改，以自定义登录页面并为其添加唯一性。

更改背景

要更新页面或特定按钮的背景颜色，您将选择背景颜色：#222222并将十六进制代码更改为您选择的颜色。 借助调色板来选择一种与您的商业审美相得益彰且具有视觉吸引力的颜色。

此外，如果您想改变登录页面的背景图片，请选择代码行background-image: url(logo_login.png')并将logo_login.png替换为您更新后的图片文件 URL 的文件名.

希望客户记住其品牌的企业可以将 WordPress 徽标更改为他们的自定义徽标。 将自定义徽标图像文件保存到登录文件夹后，将文件名替换为background-image: url('logo_login')代码中的自定义徽标。

通过调整填充和边距自定义登录表单

开发人员可以调整登录表单以使他们的页面具有吸引力并适当地适合其站点的外观。 从按钮的内边距到标签的颜色和字体大小等。您可以在按钮内添加更多空间，通过增加内边距，文本不会显得挤压； 只需增加代码填充中的数字：12px 12px 12px 12px。 如果您希望在按钮外部创建更多空间以使周围元素不紧密排列，您可以通过增加代码边距中的边距空间来实现：12px 12px 12px 12px。 即使像添加一些空白这样简单的事情也会共同影响登录页面的最终外观，并使其看起来更加统一。

更改字体大小和颜色

您可以使用代码font-size: 15px通过将数字调整为您喜欢的大小来更改段落文本、链接或表单字段的字体大小。 通过更新代码颜色中的颜色：#222222并替换颜色，可以对字体颜色进行相同的操作。

修改登录错误信息

随着互联网上网络犯罪和诈骗的增加，Web 开发人员和企业主不能在他们的网站上冒险并丢失机密数据。 当用户匆忙输入错误的登录凭据时，会自动生成默认错误消息。 虽然这是向用户发出此错误的信号，但黑客可能会尝试破解登录数据。 因此，阻止黑客的最佳方法是更改​​ function.php文件中的错误消息。

总而言之，那些拥有丰富 CSS 知识的人可以最终控制其 WordPress 登录表单的样式和自定义。 但是，如果您缺乏编码技能并且它限制了您创建自定义登录页面的能力，那么请不要担心！ WordPress 存储库中有多种插件选项可供您使用，以简化WordPress Web 开发过程，我们为您列出了最受欢迎的选项。

登录定制器插件

Login Customizer 是最用户友好的插件之一，它允许您直接从 WordPress Customizer 进行更改。 经过简单的安装过程后，您可以从外观选项卡中的WordPress 仪表板轻松访问它。 单击开始定制，它会将您重定向到定制器屏幕，您可以在其中根据自己的喜好重新设计所有区域。

Colorlib 登录定制器

Colorlib 登录定制器是一个足智多谋且灵活的工具，它具有高级插件中的所有功能，但免费提供。 其广泛的独特功能使其成为希望为其用户构建自定义解决方案的 Web 开发人员的最终选择。 这也允许通过 WordPress Customizer 进行自定义，因此您可以轻松导航并重新构建您的登录页面。

总之

最后，自定义登录页面的方法不止一种，欢迎所有经验水平的开发人员尝试。 重要的是自定义 WordPress 登录页面与实际站点的美学相匹配和补充，以增强用户体验。 自定义您网站的登录页面是取悦客户和建立品牌形象的一种简单而有效的方式。 从简单开始并在基础上进行构建可以将简单的屏幕变成壮观的画面，并为客户提供他们从未见过的个性化在线体验。