この記事は最後に更新してから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


お勧め

wp_save_post_revision(2024年1月10日 更新)

int | WP_Error | void wp_save_post_revision( int $post_id )
現状の投稿のリビジョンを作成する。

get_the_author_posts_link(2019年8月21日 更新)

string get_the_author_posts_link( )
投稿者アーカイブページのリンクを取得する。

get_year_link(2012年2月2日 更新)

string get_year_link( mixed $year )
年アーカイブのURLを取得する。

register_taxonomy(2022年6月1日 更新)

WP_Taxonomy | WP_Error register_taxonomy( string $taxonomy, array | string $object_type, array | string $args = array() )
タクソノミーを登録する。

wp_add_object_terms(2013年8月6日 更新)

mixed wp_add_object_terms( int $object_id, mixed $terms, mixed $taxonomy )
投稿情報などにタクソノミーを追加する。