設計風格化的自定義WordPress登錄屏幕

本指南向您展示瞭如何使用自定義CSS和一個小的PHP功能，通過幾個簡單的步驟來顯著自定義WordPress登錄屏幕。 我們將超越簡單的徽標更改，並創建一個完全品牌的登錄體驗。

（單擊以查看完整版）>

>在此處下載本教程中使用的背景圖像：

>

本教程分為部分，使您只能自定義所需的方面。 無論您是要微妙的調整還是進行完整的大修，本指南都可以覆蓋您。

>

>步驟1：修改

functions.php

首先，您需要將代碼添加到主題的

文件中，以告訴WordPress使用自定義樣式表作為登錄屏幕。 將以下代碼粘貼到您的functions.php>文件中：functions.php

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

此代碼將其連接到

>操作中，並包含您的login_head文件。 確保包含功能和stylized-login.css。 CSS文件的路徑相對於主題目錄。 如有必要，請調整。 add_action

步驟2：創建

stylized-login.css>

>在主題目錄中創建一個名為

的文件（與您的stylized-login.css>相同的文件夾）。 這是您將添加所有自定義CSS的地方。 style.css

步驟3：自定義您的登錄屏幕（CSS）

>現在，讓我們將CSS添加到您的文件中。 以下代碼提供了全面的自定義，但是您可以選擇性地使用所需的零件。

stylized-login.css記住將佔位符替換為

>和

/* Logo above login form */
.login h1 a {
  background-image: url('logo.png'); /* Replace 'logo.png' with your logo */
}

/* Background image */
body.login {
  background-image: url('bg.png'); /* Replace 'bg.png' with your background image */
}

/* Background of form */
.login form {
  background: rgba(0, 0, 0, .6); /* Adjust transparency as needed */
}

/* Border for the form */
#loginform {
  border-color: #33d42a; /* Change border color */
}

/* Labels for the form */
.login label {
  font-family: "Courier New", Courier, monospace;
  font-size: 28px;
  color: #33d42a; /* Change label color */
}

/* Username text box */
.login input[type="text"] {
  font-family: "Courier New", Courier, monospace;
  font-size: 24px;
  background-color: rgba(0, 0, 0, .6); /* Adjust transparency */
  border-color: #33d42a; /* Change border color */
}

/* Password text box */
.login input[type="password"] {
  background-color: rgba(0, 0, 0, .6); /* Adjust transparency */
  border-color: #33d42a; /* Change border color */
}

/* Login button */
.wp-core-ui .button-primary {
  background-color: #000;
  background-image: none;
  border-color: #33d42a;
  border-bottom-color: #13f278;
  color: #33d42a; /* Change button text color */
}

/* Login button hover */
.wp-core-ui .button-primary:hover {
  background-color: #33d42a;
  background-image: none;
  border-color: #33d42a;
  color: #000; /* Change hover text color */
}

/* Lost password and 'Back to' links */
.login #nav a, .login #backtoblog a {
  color: #33d42a !important;
  text-shadow: none;
}

/* Lost password and 'Back to' hover links */
.login #nav a:hover, .login #backtoblog a:hover {
  color: #33d42a !important;
  text-shadow: 0 1px 0 #33d42a;
}

的佔位符，並用圖像的實際文件名替換。 理想情況下，您的徽標應為247x63像素，以實現最佳擬合。 >

步驟4：更改徽標鏈接（可選）

要更改與徽標關聯的鏈接，將其添加到您的functions.php>文件：>

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

這將徽標重定向到您的網站的主頁。

> 進行這些更改後，清除瀏覽器緩存並測試您自定義的登錄屏幕。請記住，在更改任何代碼之前，請始終備份您的網站。

>

以上是設計風格化的自定義WordPress登錄屏幕的詳細內容。更多資訊請關注PHP中文網其他相關文章！