web-dev-qa-db-ja.com

WordPressのデフォルトログインフォームからラベルと<br>タグを削除する

私はログインフォームをカスタマイズして、フォームラベルを持たず、代わりに入力フィールドをユーザーに確認するためのプレースホルダーに依存している、Googleのミニマリストフォームにさらに似ています。フォームは次のようになります。

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

WordPressにログインにプレースホルダを挿入する方法はありませんが、そのための簡単なjQueryソリューション をここで見つけました 。

自分のフォームでWordPressログインを要求するとき、 Codex で説明されているように、デフォルトをオーバーライドするための値を渡すことができます。引数に空の値を入力すると、関連するラベルが削除されます。

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

この使用法では、ラベルとラベルの後の<br />タグをきれいに削除するので、このようになります。

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

しかし、WordPressのデフォルトのログインページの値（/wp-login.phpのページなど）は、独自の関数によって呼び出されないため、変更することはできません。

私はデフォルト形式のラベルを変更する方法を見つけました。これはスタックユーザ によって提供されます 。私がこのようにしたように、このメソッドはラベルを削除するために修正することができます：

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

残念ながら、おそらくフィルタがプロセスの後半で適用されるため、WordPressはすでに（今は空の）ラベルの後に<br />タグを追加しています。

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

注 - WordPressはこれら2つの形式のフォーマットが若干異なることに気付きました。デフォルトフォームのラベルには入力フィールドが含まれていますが、function（wp_login_form()）というユーザーではラベルコンテナは入力フィールドの前に閉じられます。おそらくこの問題と密接な関係はありませんが、コードスニペットの外観が異なる理由について説明します

CSSを使って余分な<br>タグをスタイルすることもできますが、それは問題があります。この<br />タグを削除する、または少なくともcssでそれを深くするためにそれに識別子を入れる方法はありますか？

filtersjqueryhookslogin
2
Bob Diego

正しい方向を示してくれた@dalbaebに感謝します - label要素をその属性値でターゲットにできるとは思わなかった。ラベルの後に<br>タグをターゲティングするための結果のスタイルは、次のとおりです。

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

属性セレクタのMDNドキュメントはこちら にあります 。

3
Bob Diego