浏览大神博客的时候无意中发现了这么一个有趣的个性化定制,如图:
即当鼠标切换到登陆密码一栏时,那只萌萌的猫头鹰就害羞的遮挡住了双眼。设置具体方法:
1、编辑WordPress根目录下的/wp-login.php文件
在文件最后面的
<?php login_footer(); break; } // end action switch
代码之前添加下面js代码:
<script src="https://img.54xavier.cn/jquery.js"></script> <script> $(function() { $('#login #user_pass').focus(function() { $('#owl-login').addClass('password'); }).blur(function() { $('#owl-login').removeClass('password'); }); }); </script>
然后继续在该文件中搜索下面代码:
<div id="login"> <h1><a href="<?php echo esc_url( $login_header_url ); ?>" title="<?php echo esc_attr( $login_header_title ); ?>" tabindex="-1"><?php bloginfo( 'name' ); ?></a></h1>
全部替换为:
<div id="login"> <div id="owl-login"> <div class="hand"></div> <div class="hand hand-r"></div> <div class="arms"> <div class="arm"></div> <div class="arm arm-r"></div> </div> </div>
2、编辑/wp-admin/css
目录下的login.min.css
文件
用编辑工具打开该文件后依次选择菜单:文档-自动换行,再将下面的文件粘帖到最后面:
#login #owl-login { position: absolute; left: 50%; margin-left: -111px; background-image: url("http://pic.dedewp.com/wp-content/uploads/owl-login.png"); height: 108px; width: 211px; margin-top: -79px; } #login #owl-login .hand { width: 34px; height: 34px; border-radius: 40px; background-color: #472D20; transform: scaleY(0.6); transition: all 0.3s ease-out 0s; position: absolute; left: 14px; bottom: -8px; } #login #owl-login .hand.hand-r { left: 170px; } #login #owl-login .hand { width: 34px; height: 34px; border-radius: 40px; background-color: #472D20; transform: scaleY(0.6); transition: all 0.3s ease-out 0s; position: absolute; left: 14px; bottom: -8px; } #login #owl-login .arms { top: 58px; position: absolute; width: 100%; height: 41px; overflow: hidden; } #login #owl-login.password .hand{ -webkit-transform: translateX(42px) translateY(-15px) scale(0.7); -moz-transform: translateX(42px) translateY(-15px) scale(0.7); -o-transform: translateX(42px) translateY(-15px) scale(0.7); -ms-transform: translateX(42px) translateY(-15px) scale(0.7); transform: translateX(42px) translateY(-15px) scale(0.7); } #login #owl-login.password .hand.hand-r { -webkit-transform: translateX(-42px) translateY(-15px) scale(0.7); -moz-transform: translateX(-42px) translateY(-15px) scale(0.7); -o-transform: translateX(-42px) translateY(-15px) scale(0.7); -ms-transform: translateX(-42px) translateY(-15px) scale(0.7); transform: translateX(-42px) translateY(-15px) scale(0.7); } #login #owl-login .arms .arm{ width: 40px; height: 65px; position: absolute; left: 20px; top: 40px; background-image: url("http://pic.dedewp.com/wp-content/uploads/owl-login-arm.png"); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; transition: 0.3s ease-out; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } #login #owl-login .arms .arm.arm-r { -webkit-transform: rotate(20deg) scaleX(-1); -moz-transform: rotate(20deg) scaleX(-1); -o-transform: rotate(20deg) scaleX(-1); -ms-transform: rotate(20deg) scaleX(-1); transform: rotate(20deg) scaleX(-1); left: 158px; } #login #owl-login.password .arms .arm{ -webkit-transform: translateY(-40px) translateX(40px); -moz-transform: translateY(-40px) translateX(40px); -o-transform: translateY(-40px) translateX(40px); -ms-transform: translateY(-40px) translateX(40px); transform: translateY(-40px) translateX(40px); } #login #owl-login.password .arms .arm.arm-r{ -webkit-transform: translateY(-40px) translateX(-40px) scaleX(-1); -moz-transform: translateY(-40px) translateX(-40px) scaleX(-1); -o-transform: translateY(-40px) translateX(-40px) scaleX(-1); -ms-transform: translateY(-40px) translateX(-40px) scaleX(-1); transform: translateY(-40px) translateX(-40px) scaleX(-1); } #login_error, .login .message { margin-top: 20px; }
下面是上述代码中所需的两个图片素材,右键另存为下载后上传到自己的服务器替换其中的图片地址。
1、素材一
2、素材二
由于WordPress自动更新后相关设置会被重置,所以每次更新都需要手动更改以上代码。