この記事は最後に更新してから1年以上経過しています。

5.3の機能強化:ユーザーパスワードの表示と非表示

説明

WordPress 5.3 Beta 1」に記載されていた「Toggle password view」という項目。「Other Changes for Developers」の見出しの中ということもあり、ちょっと調べてみた。

wp-login.phpが機能拡張

はじめに、この記事は公開された5.3 Beta1をもとにしており、正式リリースの際に変更される可能性があることを予めお断りする。

今回の対象となるページはログインページで、パスワード入力欄に「目」アイコンが追加されている。

パスワード入力欄に「目」アイコン

「目」アイコンをクリックすることで、パスワード入力欄の表示が切り替わる仕組みである。この機能強化は、22か月前に「Add a "Show" button next to password fields on mobile」として投稿されており、実装までの苦労がうかがえる。

具体的な実装内容を確認するため、バージョン5.2.3のパスワード入力欄部分のHTMLを見てみる。

<p>
	<label for="user_pass">Password<br />
	<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
</p>

これに対して5.3 Beta1では次のようなマークアップに変更されている。

<div class="user-pass-wrap">
	<label for="user_pass">Password</label>
	<div class="wp-pwd">
		<input type="password" name="pwd" id="user_pass" aria-describedby="login_error" class="input password-input" value="" size="20" />
		<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="Show password">
			<span class="dashicons dashicons-visibility" aria-hidden="true"></span>
		</button>
	</div>
</div>

「目」アイコンはbutton要素で「dashicons」が使用されている。

このbutton要素がクリックされた時の動作については、このログインフォーム部分を表示する前に wp_enqueue_script関数で/wp-admin/js/user-profile(.min).jsが指定されている。

wp_enqueue_script( 'user-profile' );

個人的にwp_enqueue_script関数をこのようなタイミングで使ったことがなかったので、これにはちょっと驚いた。なおuser-profile(.min).jsについては、この後で実行される'login_footer'アクションで出力される仕組みである。

wp_login_form関数への影響は?

今回の機能強化で気になったのは、ログインフォームを表示する wp_login_form関数への影響である。現時点でこの関数は変更されていないが、テーマやプラグインでwp_login_form関数を使用している場合は注視しておくとよいだろう。


最終更新 : 2019年09月30日 13:24


お勧め

get_bookmark_field(2011年6月11日 更新)

mixed get_bookmark_field( string $field, int $bookmark [ , string $context = 'display' ] )
リンク情報の要素値を取得する。

remove_filter(2022年11月8日 更新)

bool remove_filter( $tag, mixed $function_to_remove [ , int $priority = 10 [ , int $accepted_args = 1 ] ] )
WordPressタグに登録されているフィルターを削除する。

get_user_locale(2023年3月30日 更新)

string get_user_locale( [ mixed $user_id = 0 ] )
ユーザの言語を取得する。

add_plugins_page(2022年6月27日 更新)

mixed add_plugins_page( string $page_title, string $menu_title, mixed string $capability, string $menu_slug [ , mixed $function = '' [, int $position = null ] ] )
プラグインメニューにサブメニューを登録する。

wp_list_bookmarks(2018年5月27日 更新)

string wp_list_bookmarks( [ mixed $args = '' ] )
ブックマーク(管理画面の「リンク」)をパラメータ$argsのecho値が1ならば表示する。echo値が0ならばその文字列を取得する。