自定义wordpress的登录页面

发布时间:2018-09-19 8:47:17

想法

阿里云备案好了,注册了自己名字的域名,准备搭建个简单的博客,就是随便写写,没有教程,没有下载,就是简简单单的写写,用的是默认的wordpress主题twentyfifteen,想把默认登陆页面的logo更改下,于是,便有了“自定义wordpress的登陆页面”的想法!

实现

对于此类教程,百度一搜很多,其实实现“自定义wordpress的登陆页面”是通过WordPress内置的挂钩(Hook),在主题的 functions.php 添加一些简单的代码,即可完成自定义修改!

效果

自定义wordpress的登录页面

自定义LOGO

首先需要制作一个名为 admin-logo.png 的图片,放在主题下的/css/img文件夹里(也可以根据自己的实际修改,只要下面的代码引用的Logo地址正确即可)。

//自定义登录页面的LOGO图片
function my_custom_login_logo() {
    echo '<style type="text/css">
        .login h1 a {
            background-image:url("https://shaozhiwei.com/wp-content/themes/twentyfifteen/css/img/admin-logo.png") !important;
        height: 87px; //修改为图片的高度
        width: 87px; //修改为图标的宽度
        -webkit-background-size: 84px; //修改为图标的宽度
        background-size: 84px; //修改为图标的宽度
        }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));

自定义LOGO链接

//自定义登录页面的LOGO链接为首页链接
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));

自定义LOGO链接为指定链接

//自定义登录界面LOGO链接为任意链接
function custom_loginlogo_url($url) {
	return 'https://jszbug.com'; //修改URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

自定义Logo提示信息(tltle)

自定义为网站名称:

//自定义登录页面的LOGO提示为网站名称
add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

自定义为其他文本:

//自定义登录页面LOGO提示为任意文本
function custom_loginlogo_desc($url) {
    return '技术宅'; //修改文本信息
}
add_filter( 'login_headertitle', 'custom_loginlogo_desc' );

自定义登录框内容

//在登录框添加额外的信息
function custom_login_message() {
    echo '<p>欢迎来到'.get_bloginfo('name').',请登录后进行评论</p><br />';
}
add_action('login_form', 'custom_login_message');

自定义底部内容

//自定义底部信息
function custom_html() {
    echo '<p style="text-align:center">© ' . get_bloginfo(url).'</p>';
}
add_action('login_footer', 'custom_html');

自定义CSS

要更加灵活地修改登录页面的显示样式,建议添加一个自定义的CSS文件,然后查看登录页面的源代码的html结构,撰写自己的CSS样式。你可以使用下面的代码引入自己的CSS,注意修改代码中的css地址,以下调用的是主题根目录下的login_style.css:

//添加自定义CSS
function custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/login_style.css" />';
}
add_action('login_head', 'custom_login');

小结

通过WordPress的挂钩(hook),可以做很多自定义修改,不仅仅是登录页面哦。对于WordPress主题或插件开发者来说,掌握WordPress的各种挂钩,你就可以很自由地自定义WordPress各种功能了!

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”营销推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质 量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体营销推广吧,我们和你一起,开创互联网营销大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。