Concevoir un écran de connexion WordPress personnalisé stylisé

Ce guide vous montre comment personnaliser considérablement votre écran de connexion WordPress avec quelques étapes simples, en utilisant des CSS personnalisés et une petite fonction PHP. Nous allons au-delà d'un simple changement de logo et créerons une expérience de connexion entièrement de marque.

(cliquez pour voir la version complète)

Téléchargez l'image d'arrière-plan utilisé dans ce tutoriel ici:

Ce tutoriel est divisé en sections, vous permettant de personnaliser uniquement les aspects dont vous avez besoin. Que vous souhaitiez des ajustements subtils ou une refonte complète, ce guide vous a couvert.

Étape 1: Modifier functions.php

Tout d'abord, vous devez ajouter du code au fichier functions.php de votre thème pour dire à WordPress d'utiliser une feuille de style personnalisée pour l'écran de connexion. Collez le code suivant dans votre fichier 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');

Ce code s'accroche à l'action login_head et inclut votre fichier stylized-login.css. Assurez-vous que la fonction et le add_action sont incluses. Le chemin d'accès vers votre fichier CSS est relatif au répertoire de votre thème. Ajuster si nécessaire.

Étape 2: Créer stylized-login.css

Créez un fichier nommé stylized-login.css dans le répertoire de votre thème (le même dossier que votre style.css). C'est là que vous ajouterez tous vos CSS personnalisés.

Étape 3: Personnalisez votre écran de connexion (CSS)

Maintenant, ajoutons le CSS à votre fichier stylized-login.css. Le code suivant fournit une personnalisation complète, mais vous pouvez utiliser sélectivement uniquement les pièces dont vous avez besoin.

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

N'oubliez pas de remplacer les espaces réservés comme 'logo.png' et 'bg.png' par les noms de fichiers réels de vos images. Votre logo devrait idéalement être de 247x63 pixels pour un ajustement optimal.

Étape 4: Modifiez le lien de logo (facultatif)

Pour modifier le lien associé au logo, ajoutez ceci à votre fichier 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');

Cela redirige le logo Cliquez sur la page d'accueil de votre site.

Après avoir apporté ces modifications, effacez votre cache de navigateur et testez votre écran de connexion personnalisé. N'oubliez pas de toujours sauvegarder votre site Web avant d'apporter des modifications de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!