为了定制Wordpress登录，我不久前放弃了插件。我现在创建了一个插件，可以将自定义CSS链接到我的主题中，并自己编辑所有内容，从而可以更好地控制登录样式。回到过去，大多数人会增加functions.php 文件，但现在我更喜欢使用插件，因为如果你对你的网站造成任何实际损害，只需禁用插件即可。

创建插件

首先通过标题创建插件wp-content/plugins/ 并创建一个名为my-custom-login. 在此文件夹中创建一个名为my-custom-login.php

打开文件并粘贴：

<?php
/**
 * Plugin Name: My Custom Login
 * Plugin URI: http://mycustom.login
 * Description: Login page CSS modifications.
 * Version: 1.0.0
 * Author: Joe Bloggs
 * Author URI: http://joe.bloggs
 * License: GPL2
 */

这是Wordpress用来收集插件详细信息的评论部分，插件显示在Plugins ==> Installed Plugins Wordpress管理区域的一部分。

现在，我们将插入我们将在下一节中创建的CSS文件。

在插件信息注释下方添加：

function my_custom_login() {
echo \'<link rel="stylesheet" type="text/css" href="\' . get_bloginfo(\'stylesheet_directory\') . \'/custom-login/custom-login.css" />\';
}
add_action(\'login_head\', \'my_custom_login\');

创建CSS现在让我们转到位于的当前主题目录wp-content/themes/your-theme-folder 更换your-theme-folder 使用当前主题名称。在主题目录中，我们将创建一个名为custom-login.

现在在custom-login 文件夹创建名为custom-login.css

Now lets change everything :)

/* This changes the background color */
body.login {
  background-color: #191919;
 }
/* Additionally I added this because on the registration page the color only covers half the page */
body, html {
  background-color: #191919;
}

/* This changes the logo */
.login h1 a {
  background-image: url(\'login-logo.png\');
}

/* This changes the login form box */
.login form {
  background-color: #000000;
}

/* This changes the message box above the login form */
.login .message {
  background-color: #000000;
  border-left: 4px solid #9548e2;
}

/* This changes the paragraph text color */
p {
  color: #FFFFFF;
}

/* This changes the label (i.e Username / Password text */
.login label {
  font-size: 12px;
  color: #FFFFFF;
}

/* This changes the username and password input boxes */
.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

/* This changes the color of the login button */
.login .button-primary {
  width: 120px;
  float:right;
  background-color:#ad78e2 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#ad78e2), to(#9548e2));
  background: -webkit-linear-gradient(top, #ad78e2, #9548e2);
  background: -moz-linear-gradient(top, #ad78e2, #9548e2);
  background: -ms-linear-gradient(top, #ad78e2, #9548e2);
  background: -o-linear-gradient(top, #ad78e2, #9548e2);
  background-image: -ms-linear-gradient(top, #9548e2 0%, #ad78e2 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid #bd98e2;
}

.login .button-primary:hover {
  background-color:#ad78e2 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#ad78e2), to(#9548e2 ));
  background: -webkit-linear-gradient(top, #ad78e2, #9548e2 );
  background: -moz-linear-gradient(top, #ad78e2, #9548e2 );
  background: -ms-linear-gradient(top, #ad78e2, #9548e2 );
  background: -o-linear-gradient(top, #ad78e2, #9548e2 );
  background-image: -ms-linear-gradient(top, #ad78e2 0%, #9548e2 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #bd98e2;
}

.login .button-primary:active {
  background-color:#ad78e2 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#9548e2), to(#ad78e2));
  background: -webkit-linear-gradient(top, #9548e2, #ad78e2);
  background: -moz-linear-gradient(top, #9548e2, #ad78e2);
  background: -ms-linear-gradient(top, #9548e2, #ad78e2);
  background: -o-linear-gradient(top, #9548e2, #ad78e2);
  background-image: -ms-linear-gradient(top, #9548e2 0%, #ad78e2 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #bd98e2;
}

/* This changes links hover color */
.login #nav a:hover{
  color: #9548e2 !important;
}

/* This changes the back to blog link color */ 
.login #backtoblog a, .login #nav a, .login h1 a {
  color: #ad78e2 !important;
  text-decoration: none;
}

/* This changes the back to blog hover link color */
.login #backtoblog  a, .login #nav a, .login h1 a:hover {
  color: #9548e2 !important;
}

The/* comments */ 将让您了解到底发生了什么变化，您可以更改十六进制颜色，例如#ad78e2 你喜欢什么都行。

如果要更改其他内容，最好的方法是安装firebug Firefox的附加组件。安装后，您可以right-click 并选择Inspect element with Firebug 这将带来HTML 但是，如果您查看左侧窗格，您可以看到Style 显示CSS的选项卡。例如，您可以在此窗格中临时更改CSS颜色，以便在实现更改之前查看更改的外观。

现在转到Plugins ==> Installed Plugins 在Wordpress管理区域中，激活插件。

我知道你在问一个特定的Wordpress插件，但有时学习自己深入到CSS本身会让你获得所需的控制。记住，如果你认为自己破坏了某些东西，只需禁用你创建的插件即可。如果你犯了一个大错误，Wordpress应该自己禁用这个插件，但是如果你发现自己的站点坏了，只需将ftp或ssh发送到wp-content/plugins/ 并重命名或删除您创建的插件文件夹。