Entwerfen Sie einen stilisierten benutzerdefinierten WordPress -Anmeldebildschirm

Diese Anleitung zeigt, wie Sie Ihren WordPress -Anmeldebildschirm mit einigen einfachen Schritten mit benutzerdefinierten CSS und einer kleinen PHP -Funktion drastisch anpassen. Wir werden über eine einfache Logo -Änderung hinausgehen und ein vollständig Marken -Loginerlebnis erstellen.

(Klicken Sie hier, um die Vollversion zu sehen)

Laden Sie hier das in diesem Tutorial verwendete Hintergrundbild herunter:

Dieses Tutorial wird in Abschnitte unterteilt, sodass Sie nur die benötigten Aspekte anpassen können. Egal, ob Sie subtile Verbesserungen oder eine vollständige Überholung wünschen, in diesem Leitfaden werden Sie abgedeckt.

Schritt 1: Ändern Sie functions.php

Zunächst müssen Sie der functions.php -Datei Ihres Themas Code hinzufügen, um WordPress zu sagen, dass sie ein benutzerdefiniertes Stylesheet für den Anmeldebildschirm verwenden sollen. Fügen Sie den folgenden Code in Ihre functions.php -Datei ein:

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');

Dieser Code befasst sich in die Aktion login_head und enthält Ihre stylized-login.css -Datei. Stellen Sie sicher, dass sowohl die Funktion als auch die add_action enthalten sind. Der Pfad zu Ihrer CSS -Datei ist relativ zum Verzeichnis Ihres Themas. Bei Bedarf anpassen.

Schritt 2: Erstellen Sie stylized-login.css

Erstellen Sie eine Datei mit dem Namen stylized-login.css im Verzeichnis Ihres Themas (der gleiche Ordner wie Ihr style.css). Hier fügen Sie alle Ihre benutzerdefinierten CSS hinzu.

Schritt 3: Passen Sie Ihren Login -Bildschirm (CSS)

an

an stylized-login.css Lassen Sie uns nun die CSS zu Ihrer

-Datei hinzufügen. Der folgende Code bietet eine umfassende Anpassung. Sie können jedoch nur die benötigten Teile selektiv verwenden.

/* 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;
}

'logo.png' Denken Sie daran, Platzhalter wie 'bg.png' und

durch die tatsächlichen Dateinamen Ihrer Bilder zu ersetzen. Ihr Logo sollte idealerweise 247x63 Pixel für optimale Anpassung sein.

Schritt 4: Ändern Sie den Logo -Link (optional)

Um den dem Logo zugeordneten Link zu ändern functions.php

Dies leitet das Logo um. Klicken Sie auf die Startseite Ihrer Website.

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');

Löschen Sie nach diesen Änderungen Ihren Browser -Cache und testen Sie Ihren angepassten Anmeldebildschirm. Denken Sie daran, Ihre Website immer zu sichern, bevor Sie Code ändern.

Das obige ist der detaillierte Inhalt vonEntwerfen Sie einen stilisierten benutzerdefinierten WordPress -Anmeldebildschirm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!