WordPress自定义后台登录页面

后台登录页面展示：

首先，下载文章下方的附件，解压，把这几个文件夹（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://www.dongyunit.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

本站下载

网盘下载