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


お勧め

wp_get_nocache_headers(2019年9月3日 更新)

array wp_get_nocache_headers( )
ブラウザのキャッシュを無効にするHTTPヘッダー情報(配列)を取得する。

get_post_status_object(2014年10月9日 更新)

object get_post_status_object( string $post_status )
投稿ステータス情報を取得する。

the_excerpt_rss(2014年11月16日 更新)

void the_excerpt_rss( )
RSSフィード用の抜粋記事を出力する。

the_post_thumbnail(2018年5月27日 更新)

void the_post_thumbnail( [ mixed $size = 'post-thumbnail' [ , mixed $attr = '' ] ] )
アイキャッチ画像(サムネイル)を表示する。

is_home(2018年5月27日 更新)

bool is_home( )
要求されているページが、ホーム(トップ)ページか調べる。