自定义wordpress登陆界面全屏渐变图片轮播

你如果想 wordpress的登陆页面换成一个个性的,动感,自定义的logo,那么请随我一起来完成下面的过程。效果你可以看看本站的登陆界面。

自定义登陆LoGo图

在functions.php中添加

function custom_loginlogo() {
echo'<style type="text/css">.login h1 a {background-image: url('.get_stylesheet_directory_uri().'/img/logo.svg) !important;-webkit-background-size: 120px;background-size: 120px;width: 120px;height: 120px; }body{background:none;}#nav,#backtoblog{display:none;} </style>';

说明:
1、logo图可以是png,Svg,jpg,官方使用的是svg,因为它是矢量图,好处百度。
2、img文件夹的位置是主题的根目录。
3、其实就是一段css,大小你完全可以自己修改。

修改logo图的链接为你自己的网站

在functions.php中添加

 add_action('login_head', 'custom_loginlogo');
function custom_loginlogo_url($url) {
 return 'http://www.511yj.com';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

'http://www.511yj.com';换成你自己的网站

加载背景全屏图片轮播

在functions.php中添加

function custom_loginbg() {
echo '<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js?v1.12.4"></script>';
echo '<script src="'.get_stylesheet_directory_uri().'/js/jquery.backstretch.min.js"></script>';
echo'<script>jQuery(function(){var imgsrc = "'.get_stylesheet_directory_uri().'/img/loginbg";
var listArr = [imgsrc+"/1.jpg",imgsrc+"/2.jpg",imgsrc+"/3.jpg",imgsrc+"/4.jpg"];
jQuery(\'.login\').backstretch(listArr, {fade: 1000,duration: 5000});});</script>';
}
add_action('login_footer', 'custom_loginbg');

说明:
1、自定义 custom_loginbg() 函数,加载两个js。
2、jquery.js?v1.12.4是wordpress自带的jquery库,我们的版本是WP4.53,jquery库是V 1.12.4,你需要查看一下
3、jquery.backstretch.min.js这个是特效,这里我打包了,百度网盘下载:http://pan.baidu.com/s/1nu7k1h3。js是你主题根目录下的一个文件夹。
4、你需要在img文件里建立一个文件夹loginbg放背景图片,这里放了四张,格式是jpg,大小控制一下。
5、你想放个更多图片的话,修改listArr=[]里面的图片

自定义css的加载

在functions.php文件加入以下代码即可:

function custom_login() { echo'

<link href="' . get_bloginfo('template_directory') . '/login.css"rel="stylesheet"type="text/css"/>'; }

add_action('login_head', 'custom_login');

login.css是你自定义的css样式,你可以修改登录表单样式,注意css文件的位置。


发布日期:

所属分类: Wordpress 综合 标签: