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

tech2022-09-16  69

你如果想 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数据库已经是最新的了-后台登录跳转首页

▪ 使用Better WordPress Minify合并压缩WordPress的js和css 文件

▪ 图片类Wordpress网站必备响应式灯箱插件WF Magnific Lightbox

▪ WordPress过滤器(Filters):apply_filters和add_filter 用法和实例

▪ mod_rewrite缓存模式WP Super Cache最快的加速模式

▪ wordpress页面生成二维码

▪ WordPress 一键置顶文章插件推荐

▪ wordpress主题插件的汉化工具poedit最新汉化版使用步骤方法

▪ Youpzt-optimizer插件你的WordPress网站优化利器

▪ wordpress统计某个标签下的文章总数 

最新回复(0)