首页
友链
壁纸
直播
留言
归档
关于
推荐
百度一下
腾讯视频
Search
1
linux免费WEB管理面板:AMH
16,484 阅读
2
为主题添加前台删除文章及评论功能
5,071 阅读
3
欢迎使用Typecho
3,882 阅读
4
创建WordPress多站点网络
2,582 阅读
5
代码高亮 - SyntaxHighlighter 0.0.5
1,872 阅读
网络杂记
Wordpress
Typecho
VPS教程
主题模板
登录
Search
标签搜索
Typecho
WordPress
主题
Linux
VPS
LNMP
MySQL
管理面板
nginx
面板
升级
Apache
php函数
缓存
gravatar
404错误
评论
删除
命令
kloxo
CludeChn
累计撰写
119
篇文章
累计收到
13
条评论
首页
栏目
网络杂记
Wordpress
Typecho
VPS教程
主题模板
页面
友链
壁纸
直播
留言
归档
关于
推荐
百度一下
腾讯视频
搜索到
1
篇与
的结果
2014-09-05
WordPress 自定义后台登录页面
这几天在折腾关于全背景登录的页面。效果类似于 @Lofter 登录的效果,刚开始觉得没啥技术含量,最后觉得里面还是有点内容的。主要难点在于后面的背景如何自适应和窗口大小改变等比例缩放图片适应窗口。至于怎样实现大家还是看Demo吧,Demo里的JS有注释和说明。 Demo:http://demo.webjyh.com/full-bg-login-form/ Demo做好了,于是想想干脆把WordPress后台的登录界面换一下。换成这样全背景的多好看。于是就成就了我现在的登录页面各位请看地址。 效果图:WordPress Login:http://webjyh.com/wp-login.php 至于怎样改我就不一一细说了,我把资料地址发一份给大家,地址请看 @如何自定义WordPress的登录页面 。为了大家方便,我把我这里的登录页面打包共享给大家,怎样安装呢。将下载下来的压缩包解压。然后大家把这几个文件夹(css,images,js) Copy到 你现在当前使用主题根目录下。请各位注意文件重名的问题,别把主题文件内容给替换了。functions.php 此文件不用Copy,后面用来添加你主题的代码的。 当以上步骤做完了。下面我们来修改主题代码。将当前使用的主题 找到 functions.php 打开。在文件的最下方添加以下代码,代码就是刚刚下载的压缩包里的 functions.php 代码。直接Copy 过去就可以了。还是把代码贴出来吧。 //Login Page function custom_login() { echo ' <link href="' . get_bloginfo('template_directory') . '/css/login.css" rel="stylesheet" type="text/css" />'."\n"; echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>'."\n"; } add_action('login_head', 'custom_login'); //Login Page Title function custom_headertitle ( $title ) { return get_bloginfo('name'); } add_filter('login_headertitle','custom_headertitle'); //Login Page Link function custom_loginlogo_url($url) { return esc_url( home_url('/') ); } add_filter( 'login_headerurl', 'custom_loginlogo_url' ); //Login Page Footer function custom_html() { echo '</pre> <div class="footer">'."\n"; echo ' Copyright © '.date('Y').' All Rights | Author by <a href="http://webjyh.com" target="_blank">M.J</a> '."\n"; echo '</div> <pre> '."\n"; echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/resizeBg.js"></script>'."\n"; echo '<script type="text/javascript">// <![CDATA[ '."\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 ''."\n"; 将其改成 //echo ''."\n"; 这样就可以了,到此大家美化WordPress后台登录界面已经完成,赶紧去看看吧!!!最重要的一点忘记说了,页面不兼容IE,一个IE我都没测试,测试了Chrome 和 FireFox。坑爹的IE我测试不起啊! 附件下载:http://webjyh.com/wp-content/uploads/2013/12/wordpress-login-page.zip 本文转自:http://webjyh.com/wordpress-login-page/
2014年09月05日
389 阅读
0 评论
0 点赞