国内更专业
计算机技术平台

WordPress自定义后台登录页面

通知!

站长发福利啦,打开支付宝首页搜索“7960561”,即可领红包!机会不容错过哦!

后台登录页面展示:


首先,下载文章下方的附件,解压,把这几个文件夹(css,images,js)复制到你当前使用主题根目录下。请各位注意文件重名的问题,别把主题文件内容给替换了。

注意:functions.php 文件不用复制,后面用来添加你主题的代码的。

当以上步骤做完了。下面我们来修改主题代码。在当前使用的主题找到 functions.php打开,在文件的最下方添加functions.php中的代码。仅复制开始与结束中间的部分,如下:

//开始
	//登录页面
	function custom_login() {
		echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/login.css" />'."\n";
		echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>'."\n";
	}
	add_action('login_head', 'custom_login');

	//登录页面标题
	function custom_headertitle ( $title ) {
		return get_bloginfo('name');
	}
	add_filter('login_headertitle','custom_headertitle');

	//登录页面链接
	function custom_loginlogo_url($url) {
		return esc_url( home_url('/') );
	}
	add_filter( 'login_headerurl', 'custom_loginlogo_url' );

	//登录页面底部版权等
	function custom_html() {
		echo '<div class="footer">'."\n";
		echo '<p>Copyright © '.date('Y').' All Rights | Author by <a href="http://pydyun.com" target="_blank">东云网</a></p>'."\n";
		echo '</div>'."\n";
		echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/resizeBg.js"></script>'."\n";
		echo '<script type="text/javascript">'."\n";
		echo 'jQuery("body").prepend("<div class=\"loading\"><img src=\"'.get_bloginfo('template_directory').'/images/login_loading.gif\" width=\"58\" height=\"10\"></div><div id=\"bg\"><img /></div>");'."\n";
		echo 'jQuery(\'#bg\').children(\'img\').attr(\'src\', \''.get_bloginfo('template_directory').'/images/login_bg.jpg\').load(function(){'."\n";
		echo '	resizeImage(\'bg\');'."\n";
		echo '	jQuery(window).bind("resize", function() { resizeImage(\'bg\'); });'."\n";
		echo '	jQuery(\'.loading\').fadeOut();'."\n";
		echo '});';
		echo '</script>'."\n";
	}
	add_action('login_footer', 'custom_html');
//结束

关于这个登录界面的jQuery问题,因为这个后台的效果是使用jQuery库来实现的,所以说,如果说没修改之前的后台登录界面主题就带了这个jQuery库,大家可以把以上代码中的jQuery 库给注释了。关于肿么看呢,右击查看源代码。如何注释jQuery代码呢?大家找到以下代码

echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>'."\n";

将其改成

//echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>'."\n";

这样就可以了,到此大家美化WordPress后台登录界面已经完成,赶紧去看看吧。小编测试了Chrome、360安全浏览器、、QQ浏览器、UC浏览器、搜狗浏览器、谷歌浏览器、IE、EDGE和FireFox等,均显示正常!

下载地址

文件名称:WordPress 自定义后台登录页面附件文件下载

文件大小:493KB    发布日期:2017-03-10

赞(0) 打赏
未经允许不得转载:东云网 » WordPress自定义后台登录页面
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

东云科技,与您偕行!

免责声明联系我们

觉得文章有用就打赏一下文章作者吧,么么哒~

支付宝扫一扫打赏

微信扫一扫打赏