彭家二少

2020年3月07日星期六站长/

WordPress 后台登录页面设计

一直都在修改前端页面模版，昨晚在登录后台的时候有些嫌弃系统自带的模板了，决定修改一下。

修改模板不需要更改太多东西，只需要替换下原模板的CSS就好了。因为后台需要用到的元素只有那么7个，自己也用不着添加，当然个人如果有些特殊的需要可以更改后台登录模板涉及到的系统文件，当然这个要到WordPress根目录去修改，详细的可以查看下 wp-login.php 文件。

对二少来说，系统自带的已经够用了，只是登录界面不好看而已。

调用后台模板CSS

将需要用到的CSS文件放到主题模板里（放哪里全看你的心情），在到主题配置文件 functions.php 中将CSS文件链接调用，这样才能在后台页面中调用到新的CSS文件。

  1. // 主题登录CSS  
  2. function enqueue_for_login(){  
  3. 　　wp_enqueue_style( 'core', get_template_directory_uri() . '/assets/login.css', false ); // CSS文件地址  
  4. }  
  5. add_action( 'login_enqueue_scripts', 'enqueue_for_login' );    

编辑CSS文件

这一步就不细讲了，因为各自的风格不同，所以喜好也不一样。也许有人喜欢简洁的、有人喜欢炫酷的、有人喜欢神秘的（用特定方式隐藏登录，自己知道登录方式）。

看你的怎么改了，CSS文件中修改的样式，上传到FTP空间后，刷新你的浏览器就能看到效果了，当然这里二少就不提供演示了，因为二少也是喜欢神秘的，所以把后台登录地址隐藏了，就不提供了（黑客大哥就不要探秘了，留点隐私吧）。

Ps:2020年5月16日添加 Wordpess 后台登录隐藏地址保护 代码

  1. //保护后台登录  
  2. add_action('login_enqueue_scripts','login_protection');  
  3.     function login_protection(){  
  4.     if($_GET['lvnn'] != '@admin')header('Location: https://penghong.name/');  
  5. }  

将此代码添加到 functions.php 文件中，后台登录地址改变为：

https://penghong.name/wp-login.php?lvnn=@admin

Ps：有些需要注意到的地方给大家说下，这些事二少设计时遇到的：

1、要使用自适应模板，一定要先从低分辨率开始铺垫，不能直接从高分辨率弄。不然你在PC浏览器显示正常，但是在手机和平板中的显示会出现异常，一定要用低分辨率做铺垫，切换到高分辨率时将其覆盖。

2、CSS中使用透明度的时候，在手机上验证时。不要开启夜间显示模式，二少是晚上编辑的CSS，结果上传后发现没有登录框周围无透明底，直接黑色一片，难看至极。结果捣鼓好久，还以为是透明度在移动端的体验不好，结果是自己开启了夜间模式，调回日间模式就恢复正常了。

成品效果图

WordPress 后台登录页面设计

The End