検索

ホームページ >CMS チュートリアル >＆＃＆プレス >WordPressフォームのより良いパスワードマスキング

WordPressフォームのより良いパスワードマスキング

Christopher Nolan
Christopher Nolanオリジナル
2025-02-16 08:58:15495ブラウズ

WordPressフォームのより良いパスワードマスキング

パスワードマスキングは、ユーザーがパスワードを入力している間に誰かが画面上でパスワードを読むことを防ぐために開発者が使用する手法です。ただし、パスワードのマスキングは、ユーザーエクスペリエンスに関して多くの問題を引き起こすことになります。この記事では、パスワードのマスキングといくつかのソリューションによって引き起こされるこれらの問題のいくつかの概要を説明します。

特に、WordPress管理者のログインとパスワードリセットフォームのパスワードマスキングに関連するユーザーエクスペリエンスの問題に焦点を当てます。また、WordPressプラグインを作成し、ログインにチェックボックスを追加し、パスワードリセットフォームをリセットして、マスクされたパスワードフィールドにテキストを表示または非表示にします。

キーテイクアウト

パスワードマスキングは、セキュリティを強化しながら、特にキーやタッチスクリーンを備えたデバイスでユーザビリティの問題につながる可能性があります。 > パスワードマスキングの使いやすさを改善するためのさまざまなソリューションには、最後の文字を型とした文字のマスキングを解除し、カーソルがフィールド上に移動したときにパスワードをマスキングし、ユーザーがチェックボックスを使用してパスワードフィールドをマスクしてマスクできるようにすることが含まれます。
    WordPressプラグインを作成して、パスワードを表示または非表示にするためにチェックボックスを追加することにより、ログインとパスワードリセットフォームのパスワードマスキングを改善できます。これには、ディレクトリとファイルの作成、JavaScriptファイルをenqueueするスクリプトの追加、フォームにチェックボックスを追加することが含まれます。
  • パスワードフィールドのマスクフィールドをクリックすると、パスワードフィールドのタイプ属性をテキストに変更することで達成されます。この機能は、JavaScriptコードを使用して追加されます
  • パスワードマスキングとは？
  • パスワードマスキングは、パスワードフィールドのすべての文字を不明瞭にする練習です。これは、ユーザーが入力している間に誰かが画面上でパスワードを読むことを防ぐために行われます。
    • マスクされたパスワードフィールドの外観が次のとおりです
    • しかし、実際には、これは、タイピング用の小さなキーを備えた、またはタッチスクリーンを使用している多くの最新のコンピューティングデバイスでユーザビリティの問題を引き起こす可能性があります。 パスワードのマスキングによって引き起こされるユーザビリティの問題

ユーザーは、タイピングするときに指が簡単にフィットするため、より大きなキーを持つデバイスでの入力ミスを減らす傾向があります。また、ユーザーは、指が入力するのに適していないため、キーが小さいデバイス（モバイルやタブレットなど）を使用して、より多くのタイピングミスを作成する傾向があります。

モバイル画面にマスクされたパスワードフィールドがあり、ユーザーがタイプされたパスワードとは何かを確認する方法がない場合（ユーザーが入力する意図したもの）、ユーザーがイライラして離れることができます。サイトは、キーが小さいため、ユーザーが意図せずに間違ったパスワードを複数回入力できる可能性があるためです。

Jakob Nielsen、博士号を取得したWebユーザビリティコンサルタントヒトとコンピューターの相互作用では、かつて言った：

ユーザーがパスワードを入力すると
ユーザビリティが苦しみ、彼らが得る唯一のフィードバックは弾丸の行です。通常、パスワードのマスキングはセキュリティを増加させることさえありませんが、ログインの障害によりビジネスに費用がかかります。
それ以来、開発者はこの問題とそれに対処する潜在的な解決策を再考し始めています。 パスワードのマスキングによって引き起こされる使いやすさの問題のソリューション

携帯電話でのパスワードマスキングのユーザビリティの問題に取り組むために、いくつかの開発者が提案したいくつかのソリューションがあります。ここに人気のあるものがいくつかあります：

最後のキャラクターのマスクを解除：ユーザーが入力している間にパスワードファイルの最後の文字をマスクすることができます。 フィールドフォーカスのマスキングを解除する：ユーザーがパスワードフィールドの上にカーソルを移動するときにパスワードをマスクするだけです。この方法は、マウスポインターを備えたデバイスのみのソリューションであるため、モバイルデバイスのソリューションではありません。 チェックボックスを使用して

マスキングを解除する：チェックボックスを使用して、ユーザーがパスワードフィールドをマスクしてマスクすることもできます。以前のソリューションは良好でしたが、コンピューターのみに制限されていました。しかし、このソリューションはすべてのデバイスで機能し、この問題の断然最良の解決策です。
    このチュートリアルでは、WordPressのログインとパスワードリセットフォームのパスワードのマスキングを改善するために、フォームにチェックボックスを追加してパスワードを非表示または表示します。
  1. プラグインのディレクトリとファイル
    2. プラグインの開発を開始するには、
  2. wp-content/plugins
    3. ディレクトリで
  3. パスワードマスキング
    4. と呼ばれるディレクトリを作成し、
パスワードマスキングと呼ばれるファイルを作成します。 php

および inhide。

と呼ばれる別のファイル

outディレクトリ構造は次のようになります

ファイルで、次のテキストを追加してプラグインをインストール可能にします。 ログインとパスワードリセットページでパスワードmasking.jsファイルをenceueする必要があります。スクリプトファイルをenqueueするには、このコードを password-masking.php

ファイルに追加します。 

--password-masking
	-password-masking.php
	-password-masking.js
ここで、最初にwp_register_script関数を使用してスクリプトを登録し、次にwp_enqueue_scriptを使用してenquedを登録しました。

login_enqueueスクリプトアクションフックは、管理者ログイン、登録、パスワードリセットページへのスクリプトとスタイルシートをenqueueするために使用されます。 ログインフォームにチェックボックスを追加します

ログインフォームにチェックボックスを追加するには、login_formアクションフックを使用する必要があります。このフックは、新しいフィールドを追加できるようにすることにより、組み込みのWordPressログインフォームをカスタマイズするために使用されます。 このコードを< ?php /** * Plugin Name: Password Masking * Plugin URI: https://www.sitepoint.com/ * Description: A plugin to add "show password checkbox" to Login and Password Reset Forms. * Author: Narayan Prusty */ ファイルに配置して、[ログイン]フォームにチェックボックスを追加します。
--password-masking
	-password-masking.php
	-password-masking.js

ここでは、ID PasswordMaskを含むチェックボックスを追加しました。チェックをクリックすると、passwordmasking_loginform（）関数が呼び出されます。

これで、ログインフォームは次のようになります。 WordPressフォームのより良いパスワードマスキング チェックボックスをクリックすると、その機能のJavaScriptコードをまだ作成していないため、パスワードフィールドのマスクはありません。

パスワードリセットフォームにチェックボックスを追加します

チェックボックスをパスワードリセットフォームに追加するには、resetPass_formアクションフックを使用する必要があります。このフックは、新しいフィールドを追加できるようにすることにより、組み込みのWordPressパスワードリセットフォームをカスタマイズするために使用されます。 このコードをファイルに配置して、パスワードリセットフォームにチェックボックスを追加します。

また、ここでは、ID PasswordMaskを含むチェックボックスを追加しました。チェックをクリックすると、passwordmasking_resetform（）関数が呼び出されます。

今、パスワードリセットフォームは次のようになります

ただし、チェックボックスをクリックすると、その機能のJavaScriptコードをまだ記述していないため、パスワードフィールドをマスクしません。 
< ?php

/**
 * Plugin Name: Password Masking
 * Plugin URI: https://www.sitepoint.com/
 * Description: A plugin to add "show password checkbox" to Login and Password Reset Forms.
 * Author: Narayan Prusty
 */
ログインフォームのパスワードフィールドのマスキング

ログインフォームのパスワードフィールドをマスクするには、ユーザーが[パスワードを表示]をクリックすると、パスワード

チェックボックスが[パスワード]フィールドの型属性をテキストに変更する必要があります。 この機能を追加するには、このコードをパスワードmasking.jsファイルに配置します。

WordPressフォームのより良いパスワードマスキングここで、passwordmasking_loginform（）は、ユーザーがチェックボックスをクリックすると呼び出されます。

ここで、パスワードフィールドがマスクされていない場合は、チェックボックスのトグルにマスクしています。その逆も同様です。ログインフォームのマスクされていないパスワードフィールドがどのように見えるかを次に示します。

パスワードリセットフォームのパスワードフィールドをマスする

パスワードリセットフォームのパスワードフィールドをマスクするには、ユーザーが[パスワードを表示]をクリックすると、パスワードチェックボックスがテキストにパスワードフィールドのタイプ属性を変更する必要があります。 この機能を追加するには、このコードをパスワードmasking.jsファイルに配置します。

ここで、ユーザーがチェックボックスをクリックすると、passwordmasking_resetform（）が呼び出されます。

ここで、パスワードフィールドがマスクされていない場合は、チェックボックスのトグルにマスクしています。その逆も同様です。パスワードリセットフォームのマスクされていないパスワードフィールドの外観は次のとおりです。 

function pm_enqueue_scripts() 
{
    wp_register_script("pm-js", plugins_url("password-masking/password-masking.js"));
    wp_enqueue_script("pm-js");
}

add_action("login_enqueue_scripts", "pm_enqueue_scripts");
結論

この記事では、ログインとパスワードのリセットフォームにパスワードを表示する

を表示するためのプラグインを簡単に構築する方法を紹介しました。また、パスワードフィールドをマスキングする可能性のある問題と、この問題に対するさまざまな解決策も見られました。

これで、サイトのWordPress FrontEndフォームでこの手法を使用できます。

ここでプラグインの完全なコピーを入手できます。以下のコメントであなたがどう思うか教えてください。

WordPressフォームでのパスワードマスキングの改善に関するよくある質問（FAQ）

パスワードマスキングは、WordPressフォームのセキュリティをどのように強化しますか？

パスワードマスキングは、ユーザーがフォームに入力するときにパスワードの実際の文字を隠すセキュリティ機能です。実際の文字を表示する代わりに、フォームには一連のドットまたはアスタリックが表示されます。この機能は、見物人がパスワードを入力するときにあなたのパスワードを見ることを防ぐことにより、WordPressフォームのセキュリティを強化します。また、キーストロークをキャプチャしようとする悪意のあるソフトウェアに対する追加の保護レイヤーを追加します。 WordPressフォームのマスキング機能。マスキング文字をデフォルトのアスタリスクから選択した他のキャラクターに変更できます。マスキング文字が表示される前の遅延時間を調整することもできます。このカスタマイズにより、高レベルのセキュリティを維持しながら、ウェブサイトでユーザーエクスペリエンスを強化できます。 WordPressフォームには、フォームのHTMLおよびJavaScriptコードの変更が含まれます。フォームのHTMLコードにパスワード入力フィールドを追加し、JavaScriptを使用してマスキング動作を制御する必要があります。このプロセスでは、Webプログラミングの知識が必要になる場合がありますが、タスクを簡素化できるプラグインもあります。

WordPressフォームでのパスワードマスキングで役立つプラグインはありますか？ 、WordPressフォームのパスワードマスキングを支援できるいくつかのプラグインがあります。これらのプラグインは、パスワードマスキング機能をカスタマイズするためのユーザーフレンドリーなインターフェイスを提供します。また、パスワード強度インジケーターや2因子認証などの追加のセキュリティ機能も提供しています。 WordPressフォームでのマスキングには、いくつかの利点があります。まず、パスワードマスキング機能を実装およびカスタマイズするプロセスを簡素化します。フォームのコードを手動で変更する必要はありません。第二に、ウェブサイトの全体的なセキュリティを強化できる追加のセキュリティ機能を提供します。最後に、パスワードマスキング機能がさまざまなブラウザーとデバイスで正しく機能することを保証します。

WordPressフォームでパスワードマスキング機能を無効にすることはできますか？ただし、ユーザーのパスワードを見物人や悪意のあるソフトウェアに公開できるため、これは推奨されません。何らかの理由でパスワードマスキング機能を無効にする必要がある場合は、ユーザーに通知し、パスワードを入力するときに安全な環境を使用するように勧めてください。

パスワードマスキングは、セキュリティ感覚を提供することにより、ウェブサイトでユーザーエクスペリエンスを向上させることができます。ユーザーは、見物人が実際の文字を見ることができないことを知って、自信を持ってパスワードを入力できます。ただし、パスワードのマスキングは、ユーザーが入力している文字を表示できないため、不便を引き起こす可能性もあります。この問題を軽減するために、ユーザーがマスキングのオンとオフを切り替えることができる「パスワードを表示」オプションを提供できます。 passwordパスワードマスキング機能がWordPressフォームで正しく動作していない場合は、最初にフォームのコードを確認して、正しく実装されていることを確認する必要があります。コードが正しい場合、問題は別のプラグインまたはテーマとの競合によって引き起こされる可能性があります。この場合、他のプラグインを無効にしたり、デフォルトのテーマに切り替えて競合のソースを識別してみてください。 >はい、WordPress Webサイトのあらゆる種類のフォームでパスワードマスキングを使用して、ユーザーが機密情報を入力する必要があります。これには、パスワードをリセットするためのログインフォーム、登録フォーム、フォームが含まれます。これらの形式でパスワードマスキングを使用すると、セキュリティを強化し、ユーザーの情報を保護できます。

ユーザーのパスワードが安全であることを確認するにはどうすればよいですか？ユーザーのパスワードが安全であることを確認するために、他のいくつかの測定を行うことができます。最小の長さと異なるタイプの文字の組み合わせを必要とするなど、強力なパスワードポリシーを実施できます。また、ユーザーが強力なパスワードを選択するように促すパスワード強度インジケーターを提供することもできます。さらに、2要素認証を実装して、追加の保護層を追加できます。

以上がWordPressフォームのより良いパスワードマスキングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript less html if for while checkbox include require try Directory using Length Interface finally Attribute pointer copy JS function default this input issue WordPress Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WordPressでWebフォントを使用する方法次の記事：WordPressでWebフォントを使用する方法

関連記事

続きを見る