web-dev-qa-db-fra.com

Suppression des étiquettes et de la balise <br> dans le formulaire de connexion par défaut de WordPress

Je personnalise le formulaire de connexion pour qu'il ressemble davantage au formulaire minimaliste de Google, qui n'a pas d'étiquette de formulaire et s'appuie plutôt sur des espaces réservés aux utilisateurs de type Invite pour les champs de saisie. Le formulaire commence par ressembler à ceci:

    <p>
        <label for="user_login">Username<br />
        <input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
    </p>

WordPress n'a pas de méthode pour insérer des espaces réservés dans la connexion, mais j'ai trouvé une solution simple jQuery pour le faire ici .

Lorsque vous appelez le nom de connexion WordPress dans votre propre formulaire, vous pouvez transmettre des valeurs pour remplacer les valeurs par défaut, comme décrit dans le Codex . Placer des valeurs vides dans vos arguments supprimera l’étiquette appropriée, par exemple:

    <?php
        $args = array(
            'label_username' => __( '' ),
            'label_password' => __( '' ),
            'label_log_in'   => __( 'Sign In' ),
        );
     ?>
    <?php wp_login_form( $args ); ?>

Cette utilisation supprimera proprement l’étiquette et la balise <br />après l’étiquette, de sorte qu’elle ressemble à ceci:

    <p class="login-username">
        <label for="user_login"></label>
        <input type="text" name="log" id="user_login" class="input" value="" size="20" />
    </p>

Cependant, les valeurs de la page de connexion par défaut de WordPress (par exemple, la page située à l’adresse /wp-login.php) ne peuvent apparemment pas être modifiées, car elles ne sont pas appelées par votre propre fonction.

J'ai trouvé une méthode pour changer les étiquettes dans le formulaire par défaut, offert par un utilisateur de pile ici . Cette méthode peut être modifiée pour supprimer les étiquettes, comme je l'ai fait ainsi:

    function empty_login_labels() {
        add_filter( 'gettext', 'username_change', 20, 3 );
        function username_change( $translated_text, $text, $domain ) 
        {
            if (preg_match("/Username|Password/", $text)) {
                $translated_text = '';
            }
            return $translated_text;
        }
    }
    add_action( 'login_head', 'empty_login_labels' );

Malheureusement, probablement parce que le filtre est appliqué plus tard dans le processus, WordPress a déjà ajouté des balises <br /> après les étiquettes (maintenant vides):

    <p>
        <label for="user_login"><br />
        <input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
    </p>

NOTE - Je viens de remarquer que WordPress formate ces deux formulaires légèrement différemment - l'étiquette dans le formulaire par défaut contient le champ de saisie, alors que dans la fonction utilisateur appelée (wp_login_form()), le conteneur d'étiquettes est fermé avant le champ de saisie. à ce problème, mais expliquera pourquoi les extraits de code ont une apparence différente}

Je pourrais styler autour de la balise <br> supplémentaire avec CSS, mais c'est problématique. Existe-t-il un moyen de supprimer cette balise <br /> ou au moins d’obtenir un identifiant pour l’utiliser en profondeur avec css?

filtersjqueryhookslogin
2
Bob Diego

Merci à @dalbaeb de m'avoir orienté dans la bonne direction - je n'avais pas réalisé que vous pouviez cibler un élément label avec sa valeur d'attribut. Le style résultant du ciblage de la balise <br> après le libellé est le suivant:

label[for=user_login] > br, label[for=user_pass] > br
{
    display: none;
}

La documentation MDN pour les sélecteurs d'attributs peut être trouvée here .

2
Bob Diego