Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Le formulaire d’inscription est votre passerelle pour utiliser et configurer la plate-forme de publication WordPress. Il contrôle l’accès au Écrans d’administrationCela signifie que seuls les utilisateurs enregistrés peuvent se connecter.

Comment s’identifier

Si vous avez installé WordPress à la racine de votre site Web, votre page de connexion sera:
http://example.com/wp-login.php

Si vous avez installé WordPress dans son propre sous-répertoire, par exemple /AnnuaireVotre page de connexion est:
http://example.com/directory/wp-login.php

Si vous ne parvenez pas à vous connecter, essayez Problèmes de connexion Les propositions.

Le formulaire d’inscription

En haut de la page de connexion se trouvent le logo et le lien WordPress, suivis du formulaire de connexion avec:

Capture d'écran de la page du formulaire de connexion WordPress
  • Champs de saisie pour « Nom d’utilisateur » et « Mot de passe ».
  • Une case à cocher « Se souvenir de moi ». Si cette option est activée, votre navigateur restera connecté pendant 14 jours. (Si cette option n’est pas cochée, vous serez déconnecté lorsque vous quitterez le navigateur ou après deux jours.)
  • Le bouton « S’inscrire » pour soumettre les données du formulaire.

Il y a deux liens sous le formulaire: le premier est destiné aux utilisateurs enregistrés qui ont oublié leur mot de passe. L’autre va à la page d’accueil de votre site WordPress.

Ce formulaire d’inscription unique peut faire trois choses:

  1. Connectez-vous à un site (en entrant un nom d’utilisateur et un mot de passe valides).
  2. Envoyez un mot de passe par e-mail à un utilisateur enregistré (en cliquant sur Mot de passe oublié? (Raccourci: wp-login.php? action = mot de passe perdu).
  3. Enregistrez les nouveaux utilisateurs (qui ont accédé à ce formulaire en cliquant sur un enregistrer (Raccourci: wp-login.php? action = registre).

Ajuster la connexion WordPress

Une grande partie de la page de connexion WordPress peut facilement être modifiée à l’aide de plugins WordPress (Rechercher « Login »). Il peut également être modifié en ajoutant manuellement du code au code Thèmes WordPress functions.php Déposer.

Pour changer le logo WordPress en votre propre logo, vous devrez changer les styles CSS associés à cet en-tête:

<h1><a href="https://wordpress.org/">Powered by WordPress</a></h1>

WordPress utilise CSS pour afficher une image d’arrière-plan – le logo WordPress – dans le lien () dans la balise d’en-tête (

). Vous pouvez utiliser le … login_enqueue_scripts Cochez pour mettre CSS dans l’en-tête de la page de connexion afin que votre logo se charge à la place. Remplacez le fichier nommé pour utiliser le code suivant site-login-logo.png avec le nom de fichier de votre logo et enregistrez votre logo avec vos fichiers de thème actifs dans un répertoire avec le nom / Images::

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
		height:65px;
		width:320px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

La taille de votre logo ne doit pas dépasser 80 x 80 pixels (bien que cela soit sujet à changement CSS personnalisé). Ajustez les paramètres ci-dessus Rembourrage ci-dessous Valeur sur l’espace souhaité entre votre logo et le formulaire d’inscription.

Utilisez l’exemple de crochet WordPress ci-dessous pour modifier les valeurs du lien afin que le logo pointe vers votre site WordPress. Modifiez-le et collez-le sous le précédent dans le functions.php::

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Styliser votre connexion

Vous pouvez formater n’importe quel élément HTML sur la page de connexion WordPress en utilisant CSS. Ajout de styles au Utilisez une fonctionnalité comme ci-dessus sur votre page de connexion mon_login_logo. Les styles déclarés dans l’élément head d’une page sont appelés «feuille de style incorporée» et ont priorité sur les styles des feuilles de style externes liées.

Si vous disposez de nombreux styles de page de connexion, vous pouvez créer votre propre feuille de style de connexion personnalisée. Ce code a été ajouté au vôtre functions.php File, chargerait un fichier CSS nommé style-login.css, enregistré avec vos fichiers de sujets actifs:

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

WordPress relie deux de ses propres feuilles de style externes à la page de connexion: wp-admin/css/colors.css et wp-admin/css/wp-admin.css (puisque Version 3.8, versions précédentes utilisées wp-admin / css / color / color-fresh.css, wp-admin / css / login.css). Vous pouvez remplacer les styles par défaut de WordPress en rendant votre déclaration de style « plus spécifique ». Lorsque deux styles sont appliqués au même élément, CSS a priorité sur le sélecteur plus spécifique.

Voici quelques sélecteurs CSS utiles et très spécifiques pour la page de connexion:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

WordPress utilise la feuille de style CSS wp-admin.css pour insérer le logo et masquer le texte du titre Indentation: -9999px;::

.login h1 a {
	background-image: url('../images/w-logo-blue.png?ver=20131202');
	background-image: none, url('../images/wordpress-logo.svg?ver=20131107');
	background-size: 80px 80px;
	background-position: center top;
	background-repeat: no-repeat;
	color: #999;
	height: 80px;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.3em;
	margin: 0 auto 25px;
	padding: 0;
	text-decoration: none;
	width: 80px;
	text-indent: -9999px;
	outline: none;
	overflow: hidden;
	display: block;
}

L’utilisation d’un sélecteur plus spécifique dans votre feuille de style personnalisée remplacera ce qui a été dit ci-dessus image de fond Cela vaut la peine d’ajouter votre logo à la place:

body.login div#login h1 a {
    background-image: url("images/site-logo.png");
}

Le style par défaut de la page de connexion dans Colors.css Définit la couleur du texte des liens sous le formulaire:

.login #nav a,
.login #backtoblog a {
	text-decoration: none;
	color: #999;
}

Pour contourner cela, augmentez la spécificité et incluez !important::

body.login div#login p#nav a,
body.login div#login p#backtoblog a {
    color: #0c0 !important; /* Your link color. */
}

Crochets de connexion

Capture d'écran du formulaire d'inscription avec le contenu ajouté via des crochets

Vous pouvez personnaliser votre page de connexion WordPress avec Crochet d’action et Crochet de filtrecomprenant:

  • Actions dans le du document: login_enqueue_scripts, login_head.
  • Filtrer dans le :: login_headerurl, login_headertitle, login_message, login_errors.
  • Actions en bas et en bas du formulaire: Formulaire de connexion, login_footer.

L’image de droite montre où plusieurs des crochets peuvent ajouter du contenu.

Les hooks ci-dessus sont exécutés lorsque vous utilisez le formulaire de connexion. D’autres sont pour l’enregistrement, la récupération de mot de passe et les plugins WordPress.

Le fichier WordPress wp-login.php génère le code HTML qui contient l’emplacement et l’ordre de tous les hooks de page de connexion.

Créer une page de connexion personnalisée

Jusqu’à présent, vous avez vu comment personnaliser la page de connexion intégrée de WordPress. Vous pouvez également créer votre propre page de connexion personnalisée en utilisant le wp_login_form Fonctionne dans l’un de vos thèmes WordPress Modèles de page::

<?php wp_login_form(); ?>

La fonction a plusieurs paramètres pour modifier les paramètres par défaut. Par exemple, vous pouvez spécifier: les noms d’ID du formulaire et de ses éléments (pour le style CSS), s’il faut imprimer la case à cocher « Me garder connecté » et l’URL vers laquelle un utilisateur sera redirigé après une connexion réussie ( reste par défaut cette option existe) du même côté):

<?php
if ( ! is_user_logged_in() ) { // Display WordPress login form:
    $args = array(
        'redirect' => admin_url(), 
        'form_id' => 'loginform-custom',
        'label_username' => __( 'Username custom text' ),
        'label_password' => __( 'Password custom text' ),
        'label_remember' => __( 'Remember Me custom text' ),
        'label_log_in' => __( 'Log In custom text' ),
        'remember' => true
    );
    wp_login_form( $args );
} else { // If logged in:
    wp_loginout( home_url() ); // Display "Log Out" link.
    echo " | ";
    wp_register('', ''); // Display "Site Admin" link.
}
?>
Capture d'écran de l'affichage de wp_login_form avec des filtres qui ajoutent du texte

Les paramètres fonctionnels ci-dessus:

  • Rediriger l’utilisateur vers l’administration Écran du tableau de bord après la connexion.
  • Définissez le nom d’identification du formulaire: id = "loginform-custom".
  • Modifiez les légendes de texte pour les éléments de formulaire (par exemple, de la valeur par défaut « Nom d’utilisateur » à « Texte personnalisé » Nom d’utilisateur « dans cet exemple).
  • Imprimez la case à cocher Rememeber Me.

Si l’utilisateur est déjà connecté, le formulaire ne sera pas imprimé. à la place, vous verrez deux liens: Se déconnecter | Administrateur du site.

Ce formulaire d’inscription contient les filtres: login_form_top, login_form_middle, et login_form_bottom. Tout le monde peut imprimer du texte sur le formulaire comme indiqué dans l’image de droite.

Le formulaire lui-même est généré par du code dans WordPress wp-includes/general-template.php Déposer. Parce que votre page de connexion personnalisée est différente de la page de connexion WordPress intégrée (wp-login.php) les mêmes feuilles de style CSS ne s’appliquent pas. Mais la feuille de style de votre sujet actif (style.css) s’applique, utilisez ceci pour formater ce formulaire.

Autre Balises de modèle en relation avec la fonction de connexion wp_login_url, wp_logout_url, wp_loginout, wp_lostpassword_url, login_redirect, et wp_register.

Ressources

lié

Balises de connexion::
is_user_logged_in (),
wp_login_form (),
wp_loginout (),
wp_logout (),
wp_register ()

URL de connexion::
wp_login_url (),
wp_logout_url (),
wp_lostpassword_url (),
wp_registration_url ()



Source link

Recent Posts