彻底改造WordPress登录注册界面及LOGO链接
2018-11-02 来源：学做网站论坛
一些使用WP程序建网站的学员，发现WORDPRESS程序很好用，但程序后台的登录功能实在有些单调。如下图：
今天学做网站论坛就来讲一下如何在自己建网站时去彻底改造wordpress登录注册界面，达到一个高大上的登录注册界面【相关知识：如何制作WP网站的登录功能】。改造后的登录注册界面效果如下图：
彻底改造WordPress登录注册界面包括以下三个部分：
- 修改默认登录界面的LOGO图片；
- 修改默认登录界面的LOGO的链接地址为自己网站的地址；
- 修改默认登录界面的LOGO的TITLE标签内容；
- 添加登录注册界面的背景图片，修改登录，注册框的样式及按钮样式。
方法/步骤
将以下代码复制粘贴到wordpress模板的functions.php文件里；（如果你不了解WORDPRESS模板，可先学习wordpress模板制作教程。）
修改默认登录界面的LOGO图片（也可以使用这个方法：https://www.xuewangzhan.com/wpbbs/3836.html）
// 去登录界面的默认图片
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');
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');
修改默认登录界面的LOGO的链接地址为自己网站的地址；
// 去链接
function custom_loginlogo_url($url) {
return'https://www.xuewangzhan.com/'; //在此输入你需要链接到的URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url');
function custom_register_url($url) {
return'https://www.xuewangzhan.com/'; //在此输入你需要链接到的URL地址
}
add_filter( 'login_registerurl', 'custom_register_url');
function custom_loginlogo_url($url) {
return'https://www.xuewangzhan.com/'; //在此输入你需要链接到的URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url');
function custom_register_url($url) {
return'https://www.xuewangzhan.com/'; //在此输入你需要链接到的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_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');
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');
注意：要放一张大尺寸的背景图片在images文件夹下，取名为bg2.jpg，才能正常显示背景图片。
通过以上几个步骤的修改，我们就可以在自己做网站时彻底改造wodpress程序默认的登录注册界面了。
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐