wake-up-neo.com

Entfernen von Labels und <br> Tags im Standard-Login-Formular von WordPress

Ich passe das Anmeldeformular so an, dass es dem minimalistischen Formular von Google ohne Formularbeschriftung ähnlicher ist. Stattdessen werden Platzhalter verwendet, um Benutzer zur Eingabe der Eingabefelder aufzufordern. Das Formular sieht zunächst so aus:

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

WordPress hat keine Methode, um Platzhalter in die Anmeldung einzufügen, aber ich habe eine einfache jQuery-Lösung gefunden, um dies zu tun hier .

Wenn Sie das WordPress-Login in Ihrem eigenen Formular aufrufen, können Sie Werte übergeben, um die Standardeinstellungen zu überschreiben, wie im Codex beschrieben. Wenn Sie leere Werte in Ihre Argumente einfügen, wird die entsprechende Bezeichnung entfernt, z.

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

Durch diese Verwendung werden das Label und das <br />-Tag nach dem Label sauber entfernt, sodass es so aussieht:

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

Die WordPress-Standardwerte für die Anmeldeseite (z. B. die Seite unter /wp-login.php) können jedoch anscheinend nicht geändert werden, da sie nicht von Ihrer eigenen Funktion aufgerufen werden.

Ich habe eine Methode für Ändern der Bezeichnungen in der Standardform gefunden, die von einem Stapelbenutzer angeboten wird hier . Diese Methode kann geändert werden, um die Beschriftungen zu entfernen, wie ich es so gemacht habe:

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

Leider, möglicherweise, weil der Filter später im Prozess angewendet wird, hat WordPress bereits <br /> Tags nach den (jetzt leeren) Labels hinzugefügt:

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

HINWEIS - Mir ist gerade aufgefallen, dass WordPress diese beiden Formulare leicht unterschiedlich formatiert - das Etikett im Standardformular enthält das Eingabefeld, während in der vom Benutzer aufgerufenen Funktion (wp_login_form()) der Etikettencontainer vor dem Eingabefeld geschlossen ist dieses Problem, wird aber erklären, warum Code-Schnipsel anders aussehen

Ich könnte das zusätzliche Tag <br> mit CSS umgehen, aber das ist problematisch. Gibt es eine Möglichkeit, dieses <br /> -Tag zu entfernen oder zumindest einen Bezeichner in das Tag zu bekommen, um es mit CSS zu vertiefen?

2
Bob Diego

Vielen Dank an @dalbaeb, der mich in die richtige Richtung geleitet hat. Ich wusste nicht, dass Sie ein Beschriftungselement mit seinem Attributwert als Ziel festlegen können. Der resultierende Stil für das Targeting des <br> -Tags nach dem Label lautet wie folgt:

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

Die MDN-Dokumentation für Attributselektoren finden Sie hier .

2
Bob Diego