wordpress教程:WordPress 自定义后台登录页面

搜刮好东西分享说明:首先这个方法是很赞的,效仿Lofter 的登陆效果,样子很美,很酷,全背景的大图效果一向都很带冲击力的噱头,为了大家方便,我把我这里的登录页面打包共享给大家,怎样安装呢。将下载下来的压缩包解压。

wordpress教程:WordPress 自定义后台登录页面 wordpress教程 第1张

然后大家把这几个文件(css,images,js)  Copy到 你现在当前使用主题根目录下。请各位注意文件重名的问题,别把主题文件内容给替换了。functions.php 此文件不用Copy,后面用来添加你主题的代码的。

看看下面的代码

<?php/*** @Author M.J* @Date 2013-12-24*///将以下代码添加到 functions.php 主题文件里即可//Login Pagefunction custom_login() {echo \'<link rel=\"stylesheet\" type=\"text/css\" href=\"\'%20.%20get_bloginfo(\'template_directory\')%20.%20\'/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 Titlefunction custom_headertitle ( $title ) {return get_bloginfo(\'name\');}add_filter(\'login_headertitle\',\'custom_headertitle\');//Login Page Linkfunction custom_loginlogo_url($url) {return esc_url( home_url(\'/\') );}add_filter( \'login_headerurl\', \'custom_loginlogo_url\' );//Login Page Footerfunction custom_html() {echo \'<div class=\"footer\">\'.\"\\n\";echo \'<p>Copyright &copy; \'.date(\'Y\').\' All Rights | Author by <a href=\"http://webjyh.com\" target=\"_blank\">M.J</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\');?>关于自定义后台的其他方法

自定义Logo图片

制作一个名为 login_logo.png 的图片,放在主题下的images文件夹里(也可以根据自己的实际修改,只要下面的代码引用的Logo地址正确即可)。

//自定义登录页面的LOGO图片function my_custom_login_logo() { echo \'<style type=\"text/css\"> h1 a { background-image:url(\'.get_bloginfo(\'template_directory\').\'/images/logo.png) !important; } </style>\';}add_action(\'login_head\', \'my_custom_login_logo\');

自定义Logo链接

将Logo的链接改为网站首页链接:

//自定义登录页面的LOGO链接为首页链接add_filter(\'login_headerurl\', create_function(false,\"return get_bloginfo(\'url\');\"));

将Logo的链接改为任意链接

//自定义登录界面LOGO链接为任意链接function custom_loginlogo_url($url) { return \'http://www.soomai.com\'; //修改URL地址}add_filter( \'login_headerurl\', \'custom_loginlogo_url\' );

自定义Logo提示信息(tltle)

自定义为网站名称:

//自定义登录页面的LOGO提示为网站名称add_filter(\'login_headertitle\', create_function(false,\"return get_bloginfo(\'name\');\"));

自定义为其他任何文本:

//自定义登录页面LOGO提示为任意文本function custom_loginlogo_desc($url) { return \'WordPress大学\'; //修改文本信息}add_filter( \'login_headertitle\', \'custom_loginlogo_desc\' );

自定义登录框内容

//在登录框添加额外的信息function custom_login_message() { echo \'<p>欢迎来到\'.get_bloginfo(\'name\').\',请登录后下载本站资源</p><br />\';}add_action(\'login_form\', \'custom_login_message\');

自定义底部内容

//自定义底部信息function custom_html() { echo \'<p>© \' . get_bloginfo(url).\'</p>\';}add_action(\'login_footer\', \'custom_html\');

自定义CSS

要更加灵活地修改登录页面的显示样式,建议添加一个自定义的CSS文件,然后查看登录页面的源代码的html结构,撰写自己的CSS样式。你可以使用下面的代码引入自己的CSS,注意修改代码中的css地址,以下调用的是主题根目录下的login_style.css:

//添加自定义CSSfunction custom_login() { echo \'<link rel=\"stylesheet\" type=\"text/css\" href=\"\'%20.%20get_bloginfo(\'template_directory\')%20.%20\'/login_style.css\" />\';}add_action(\'login_head\', \'custom_login\');
wordpress教程

WordPress教程:禁用Google Fonts解决WordPress加载速度缓慢的问题

2020-10-30 7:52:47

wordpress教程

技术教程:纯代码免插件实现WordPress添加主题演示功能

2020-10-30 7:52:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  客服QQ:169403068