wordpress自定义后台登录页面(修改Logo/链接/文本/底部/CSS)

其实网上早已经有关于自定义WP后台登录页面的文章了,比如:自定义logo图片,logo链接,底部文本,css等,正好今天写主题的时候要用到,就顺便记录一下。

下面,分别说一下如何用代码实现自定义的功能~

1、自定义Logo图片

首先你得有一个比如:login_logo.png 的图片,放在主题下的images文件夹里(也可以根据自己的实际修改,只要下面的代码引用的Logo地址正确即可)。

1
2
3
4
5
6
7
8
9
10
11
12
13
//~ 自定义登录页面的LOGO图片
function hbao_custom_login_logo() {
    echo '
        .login h1 a {
            background-image:url("这里添加logo图片网址") !important;
            height: 60px; //修改为图片的高度
            width: 250px; //修改为图标的宽度
            -webkit-background-size: 250px; //修改为图标的宽度
            background-size: 250px; //修改为图标的宽度
        }
    '
;
}
add_action('login_head', 'hbao_custom_login_logo');

2、自定义Logo链接

将Logo的链接改为网站首页链接:

1
2
3
4
5
//~ 自定义登录页面的LOGO链接为首页链接
function hbao_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'hbao_login_logo_url' );

3、自定义Logo提示信息(title)

1
2
3
4
5
//~ 自定义Logo提示信息(title)
function hbao_login_logo_url_title() {
    return get_bloginfo('name'); // 你也可以自己任意写一个文案
}
add_filter( 'login_headertitle', 'hbao_login_logo_url_title' );

4、自定义登录框内容

1
2
3
4
5
//~ 在登录框添加额外的信息
function hbao_login_message() {
    echo '<p>欢迎来到'.get_bloginfo('name').',请登录后下载本站资源</p><br />';
}
add_action('login_form', 'hbao_login_message');

5、自定义底部内容

1
2
3
4
5
//~ 自定义底部信息
function hbao_custom_html() {
    echo '<p style="text-align:center">© copyright ' . get_bloginfo('name').'</p>';
}
add_action('login_footer', 'hbao_custom_html');

6、自定义CSS

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

1
2
3
4
5
//~ 添加自定义CSS
function hbao_custom_login() {
    echo '';
}
add_action('login_head', 'hbao_custom_login');

小结

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

本篇完,感谢您的阅读!

本站所有资源由作者收集发布,如有侵犯您的权益,请联系我们,我们将尽快处理!
淘码汇 » wordpress自定义后台登录页面(修改Logo/链接/文本/底部/CSS)

发表评论

淘码汇可信交易平台,为你的产品带来更多流量!

立即入住 了解详情