关闭

自定义WordPress登陆后台

标签: wordpressjquery界面
920人阅读 评论(0) 收藏 举报
分类:

一开始使用的插件来修改的admin的后台登陆界面,后来wordpress升级到了4.5.2之后和插件不兼容,所以直接将插件delete掉了。
又换回了原始的登陆界面, 但是怎么看都不顺眼…于是用jQuery库来实现了一个简易的自定义登陆界面。
关于如何具体修改Wordpress登陆界面,大家可以移步:如何自定义WordPress的登录页面(Logo/链接/文本)
这个界面,就像你看到的一样,背景图片使用了bing壁纸的api,每天保持新心情~(fighting)

效果:

效果

食用方法:

下载:Github

将css、js、image文件夹复制到主题目录下。
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');

//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 '<div class="footer">'."\n";
echo '<p>Copyright &copy; '.date('Y').' All Rights | <a href="https://blog.mayuko.cn" target="_blank">Hades</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/bing.php\').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库的话,大家将

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

注释掉就可以啦。
退出wp的登录,就可以查看到效果啦。

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:217667次
    • 积分:5241
    • 等级:
    • 排名:第5202名
    • 原创:303篇
    • 转载:4篇
    • 译文:0篇
    • 评论:145条
    博客

    这是我的个人博客Coda

    会和大家分享很多好玩的开源作品

    微信公众号

    这是我的微信公众号

    mayu_stack

    我会在上面与大家分享各种有趣的事物


    最新评论