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

string get_the_post_thumbnail_caption( mixed $post = null )
投稿ページのサムネイル(アイキャッチ画像)キャプションを取得する。

wp_enqueue_style(2019年11月25日 更新)

void wp_enqueue_style( string $handle [ , string $src = false [ , array $deps = array() [ , string $ver = false [ , string $media = 'all' ] ] ] ] )
使用するスタイルシート(CSS)を出力用のキューに入れる。パラメータ$srcが指定された場合は、グローバル変数$wp_stylesに登録してから出力用のキューに入れる。

post_class(2018年5月27日 更新)

void post_class( [ string $class = '' [ , int $post_id = null ] ] )
投稿情報の種別に応じたクラス属性(class="post-?? post ...")を表示する。具体的なクラス名は、投稿ID(post-番号)、投稿種別(postやpage)、カテゴリー(category-名前)、タグ(tag-名前)などがある。これらクラス名に合わせたCSSを準備することで、投稿ページのユニークなデザインが表現可能になる。

get_header(2020年8月18日 更新)

void | false get_header( [ string $name = null [ , array $args = array() ] ] )
ヘッダパーツを記述したメインヘッダファイルheader.php(またはサブヘッダファイルheader-???.php)を読み込む。

get_the_excerpt(2018年5月27日 更新)

string get_the_excerpt( [ mixed $post = null$deprecated = '' ] )
投稿情報の抜粋記事を取得する。