首页 视频课程 WordPress开发文档后台功能及美化 登录界面
会员300元,登录后自助购买

登录界面

2020-04-02 / 2385阅

本视频需要登录以后才能播放

登录

WordPress的神奇在于自由,后台登录界面可以定义,今天我们来定义后台登录界面。先看下代码

改造以后的样式

使用CSS覆盖的方式重置LOGO

function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/logo.png) !important;background-size: 265px !important;width:265px !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');  

使用JS方式删除LOGO

function custom_loginlogo()
{
       ?>
       <script>
              jQuery(document).ready(function($) {
                     $("#login h1").remove();
              })
       </script>
       <?php
}
add_action('login_footer', 'custom_loginlogo',1000); 

修改默认登录界面的LOGO的链接地址为自己网站的地址;

function custom_loginlogo_url($url) {
       return get_bloginfo('url'); //在此输入你需要链接到的URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url');
function custom_register_url($url) {
       return get_bloginfo('url');//在此输入你需要链接到的URL地址
}
add_filter( 'login_registerurl', 'custom_register_url'); 

修改默认登录界面的LOGO的TITLE标签内容

// 修改LOGO的title文字
function custom_headertitle ( $title ) {
       return __( '悠然自学网' );
}
add_filter('login_headertitle','custom_headertitle'); 

添加登录注册界面的背景图片,修改登录,注册框的样式及按钮样式

 // 添加背景图片
function custom_loginlogo() {
echo '<style type="text/css">
body{background: url('.get_bloginfo('template_directory').'/images/bg2.jpg) center center no-repeat;}
#login{position:absolute;bottom:10%;right:5%;}
.login #nav{font-size:16px;}
.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {height: 35px;width: 100%;margin: 10px auto;line-height: 32px;padding: 0 12px 2px;}
#backtoblog{display:none;}
</style>';
}
add_action('login_head', 'custom_loginlogo');  

阅读文章或者观看视频过程中有任何问题,请下方留言或者联系我Q248758228

大家谈论
  • 匿名

    匿名网友 / 2021-02-15 17:38:44

    12赞同 4否定
  • 最后一个代码是错误的

  • 悠然自学

    站长 / 2021-02-16 15:13:17

    12赞同 4否定
  • 好的,我检测下
我的见解
目录