この記事は最後に更新してから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_site_option(2018年5月27日 更新)

mixed get_site_option( string $option [ , mixed $default = false [ , bool $use_cache$deprecated = true ] ] )
サイトオプションの値を取得する。

bloginfo_rss(2014年4月1日 更新)

void bloginfo_rss( [ string $show = '' ] )
フィード向けのブログ情報を出力する。

wp_insert_term(2020年8月31日 更新)

mixed wp_insert_term( string $term, string $taxonomy [ , mixed $args = array() ] )
ターム(カテゴリや投稿タグ)を登録する。

get_post_type_labels(2018年12月7日 更新)

object get_post_type_labels( object|WP_Post_Type $post_type_object )
投稿タイプのラベルを取得する。

nocache_headers(2018年5月27日 更新)

void nocache_headers( )
ブラウザのキャッシュを無効にするHTTPヘッダーを出力する。