专栏首页许都博客如何轻松自定义WordPress登录页面

如何轻松自定义WordPress登录页面

Ø版本的WordPress的多年发展中,默认的登录屏幕设计没有改变,仍然是简单和干净是在不同屏幕尺寸的作品。但是,在为特定客户(特别是公司)构建网站时,如果您可以更改登录屏幕的颜色方案以及与网站主题相匹配的徽标,那会很好看,对吗?


好的,它可以轻松完成。关于WordPress的好处是后端的每个部分都可以通过使用php 函数进行自定义。

在今天的教程中,我将向您展示如何以您希望的方式自定义WordPress登录屏幕。首先,我们将更改徽标,然后更改配色方案和其他一些元素。让我们开始吧。

默认的WordPress登录屏幕

我们要建立什么

更改徽标

WordPress使用CSS来显示背景图像。它通常插在H1和锚标签之间。但是,对于本教程,我们将在二十四个WordPress默认主题中使用functions.php文件。

首先,将您喜欢的徽标(png文件格式)放在图像文件夹中的二十四个WordPress默认主题目录中(对于本教程,我使用了custom-login-logo.png徽标)。请注意,徽标的最大尺寸应为80 x 80px; 但是,您也可以更改自定义CSS文件中的维度。

接下来,打开二十四个WordPress默认主题里面的functions.php文件。我们将使用login_enqueue_scripts钩子将CSS插入我们的登录页面的头部以加载我们的首选徽标。在functions.php文件的最后一行之后插入以下代码,然后将首选徽标文件名放在目录路径中。

function login_logo() { ?>
	<style type="text/css">
    	body.login div#login h1 a {
        	background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png);
    	}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'login_logo' );

更改图标的链接

默认情况下,图标链接到WordPress.org网站。您还可以将此链接更改为首选图标,并将其重定向到您自己的网站。为此,请使用下面的挂钩并在登录图标挂钩后立即将其粘贴到functions.php中

function login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'login_logo_url' );

更改登录屏幕的设计

要自定义默认WordPress登录屏幕的样式,我们需要添加登录页面的样式。为此,我们需要为我们自己的CSS文件使用钩子。这将覆盖默认登录屏幕的样式。

首先,我们需要在二十四个WordPress默认主题的CSS文件夹中创建样式表(对于本教程,我将样式表命名为custom-login-styles.css),然后在functions.php文件中添加以下钩子。

function login_custom_stylesheet() { ?>
	<link rel="stylesheet" id="custom_wp_admin_css"  href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' );

接下来,打开您在默认的二十四个WordPress主题的CSS文件夹下创建的CSS文件。我们首先使用以下代码自定义登录屏幕的背景颜色和字体。

body.login {
	background-color: #3d3d3d;
	font-family: Helvetica;
}

现在我们已经更改了登录屏幕的背景颜色和字体,让我们在登录表单的持有者上放置一个漂亮的灰色背景。

.login form {
	background: #f3f3f3;
}

接下来,为正常,焦点和悬停状态自定义表单文本框的外观。

.login form .input,.login input[type=text],.login form input[type=checkbox] {
	background: #fff;
	border: 1px solid #b7b7b7;
            	padding: 5px;
}
.login form .input:hover,.login form .input:focus,.login input[type=text]:hover,.login input[type=text]:focus,.login form input[type=checkbox]:hover,.login form input[type=checkbox]:focus {
	background: #fff;
	outline: none;
}

然后,更改登录按钮的背景颜色,并在左侧和右侧给它一些填充。我还将字体大小设置为13px,使其看起来像一个平面按钮。

body.login div#login form#loginform p.submit input#wp-submit {
	border-radius: 0;
	background: #ffab00;
	outline: none;
	border: none;
	padding: 0 25px;
	text-align: center;
	font-size: 13px;
}

最后,让我们更改正常和悬停状态的链接文本(忘记密码返回登录链接),然后将两者都定位到屏幕中心。

body.login div#login p#nav {
	margin: 20px auto;
	text-align: center;
}
body.login div#login p#backtoblog {
	margin: 0 auto;
	text-align: center;
}
.login #nav a:hover,.login #backtoblog a:hover {
	color: #ffab00;
}

最后的话

我们希望现在您可以看到WordPress的巨大优势以及使用它的可能性。我们同意,它可能不适合您想要构建的每个可能的项目,但对于大多数项目而言。欢迎在下方分享你的意见。

本文作者为许都,未经作者授权,禁止转载。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 自定义WordPress后台登录页面

    如果你看腻了 wordpress 默认登录界面,或者想将 WordPress 的 logo 替换为自己网站 logo,并改变其外观,可以参考此文,打造一个个性化...

    许都博客
  • WordPress 自定义 login (登录页面)CSS 样式

    WordPress 中的登录页面wp-login.php 的默认样式是如此简陋,如果你有兴趣想自定义一下样式,可以参考以下的例子来进行。以下的代码将通过添加过滤...

    Jeff
  • Springsecurity搭建自定义登录页面

    WebSecurityConfigurerAdapter是security中浏览器登录设置的主类 这里我们继承后重写以下的三个方法:

    Dream城堡
  • WordPress如何自定义后台登陆地址?

    梦想家路飞
  • 如何使用XAMPP搭建本地环境的WordPress网站

    您是否使用XAMPP在计算机上搭建建本地环境WordPress网站?在电脑上搭建本地环境的WordPress可帮助您试用WordPress,测试主题和插件以及学...

    晓得博客
  • Spring security笔记3/4: 自定义登录页面

    重命名 Case2Application.java 为 Case3Application.java

    tonglei0429
  • 【玩转腾讯云】WordPress Typecho Hexo 实现消息的及时 QQ 微信 推送

    WordPress 在有新评论的时候,可以有邮件推送,但是长老平时也不是时时刻刻都会打开邮箱看着,所以希望能够将新评论及时地推送到自己的 QQ 或者微信,以便及...

    凝神长老
  • WordPress Typecho Hexo 实现消息的及时 QQ 微信 推送

    WordPress 在有新评论的时候,可以有邮件推送,但是长老平时也不是时时刻刻都会打开邮箱看着,所以希望能够将新评论及时地推送到自己的 QQ 或者微信,以便及...

    凝神长老
  • WordPress文章目录插件LuckyWP Table of Contents设置教程

    LuckyWP Table of Contents插件, wordpress建站, wordpress插件, 文章目录插件

    晓得博客
  • 5分钟玩转Lighthouse|零基础也能拥有WordPress个人博客

    【5分钟玩转Lighthouse】系列文章将为大家分享轻量应用服务器使用教程,提供丰富的实践指南,帮助大家快速上手并获得最佳产品体验。本期主要介绍如何借力 L...

    腾讯云计算产品团队
  • 如何在WordPress网站中添加Cookie弹出窗口(不使用插件)

    如果你是使用WordPress建站的用户,那么有可能你的网站已经在使用Cookie来收集访问者的数据,如果您没有在网站上显示任何同意Cookie的通知,您可能会...

    晓得博客
  • 【5分钟玩转Lighthouse】搭建WordPress博客

    我们本期【5分钟玩转Lighthouse】系列教程中,将为大家介绍如何借力腾讯云Lighthouse实例,快速搭建基于WordPress的个人博客网站。

    溪歪歪
  • 腾讯云轻量服务器快速搭建WordPress

    WordPress 是全球最流行的开源的博客和内容管理网站的建站平台,具备使用简单、功能强大、灵活可扩展的特点,提供丰富的主题插件。腾讯云轻量应用服务器 Lig...

    幻影龙王
  • 如何为WordPress网站添加双因素身份验证

    不管你是使用 WordPress建站, Magento 建站,在网站上线后,都不可避免的会受到各种恶意软件来登录你的网站后台,是不是有些提心吊胆呢?

    晓得博客
  • WordPress主题插件严重漏洞修复,影响将近20万个网站

    WordPress的ThemeGrill Demo Importer程序的开发人员已更新了该插件,删除一个严重漏洞,该漏洞为未经身份验证的用户提供了管理员特权。...

    FB客服
  • WordPress开发人员犯的12个最严重的错误

    原本之前还有篇ruby的,拖得时间有点久了,同时本身没想过去过多接触ruby,所以暂且就不再祸害那篇文章了,有兴趣的可自己去看Creating a Ruby D...

    WindCoder
  • 【译】WordPress 中的50个过滤器(3):第11-20个过滤器

    本文为系列第三篇,原文:50 Filters of WordPress: Filters 11-20 原文地址 不多说,直接进入正题。 本系列文章翻译自tut...

    Jeff
  • 【5分钟玩转Lighthouse】用Umami做博客站点统计

    最近跟着Bilibili上的UP主溪歪歪_BILI的教学视频“如何搭建第一个博客站点”,用轻量应用服务器搭建了一个WordPress博客站点。主要有以下5个步骤...

    风之泪
  • 《个人网站篇》WordPress与Hexo建站如何选型?

    Hexo是一个基于Node.js的建站工具,可以用来生成静态网站,Hexo配套的最棒主题为Next,Next主题使用效果实例 https://zhaoolee....

    zhaoolee

扫码关注云+社区

领取腾讯云代金券