2020.03.22

WordPressログインフォームのinput項目にplaceholderを設定する方法

こんにちは、webエンジニアのゾノ( @ozonosho )です。

今日のブログではWordPressログインフォームのinput項目にplaceholderを設定する方法を紹介したいと思います。

先に実装例をご紹介すると、こんな感じです。

▽ログインフォーム

ユーザー名のinput項目にplaceholderを設定してみました。

ユーザーやスタッフが自分でログインできるサイトの場合、ユーザー名には自分の表示名(ニックネームなど)を入力するものだと勘違いしてしまうケースが多いです。実際に、僕の運営するサイトでは過去に「ログインできなくなった」という問い合わせが多く届きました。

そういったミスを防ぐため、placeholderを設定してあげると親切です。

WordPressログインフォームのinput項目にplaceholderを設定する方法

実装は簡単で、下記のようなコードをfunctions.phpに追加いただければ実装できます。

ユーザー名とパスワードそれぞれの「表示させたい内容」の箇所を変更してご利用ください。

管理画面でjQueryを利用するためには、別途jQueryを読み込んだり、WordPress用にコードをカプセル化したりしないといけないのでちょっと面倒ですが、これでplaceholderの値を自由に設定できます。

おわりに

以上、今回の記事ではWordPressログインフォームのinput項目にplaceholderを設定する方法を紹介させていただきました。

当サイトではWordpressのカスタマイズ制作依頼を請け負っています。運営中のサイトで何かお困りのことがある方は、下記の記事を参照のうえ気軽にご相談ください。

どんな機能・要望でもOK!『Wordpressのカスタマイズ制作』はじめました。

こんにちは、webエンジニアのゾノ( @ozonosho )です。 このたびWordpressのカスタマイズ制作をはじめました。......

→この記事を読む
チャレンジを応援する無料オンラインコミュニティ運営中!

生きづらさを抱える人のチャレンジを応援する無料オンラインコミュニティ『Cree』をスタートしました。ただいま参加者70名!お互いの目標を共有したり、就労・就職のサポートするサービスを無料で提供しています。

オンラインコミュニティの詳細はこちら

ゾノについて

お仕事のご相談はこちら