検索

ホームページ >CMS チュートリアル >＆＃＆プレス >WordPressでカスタムログインと登録ページを構築します

WordPressでカスタムログインと登録ページを構築します

Christopher Nolan
Christopher Nolanオリジナル
2025-02-17 11:59:09704ブラウズ

WordPressでカスタムログインと登録ページを構築します

キーテイクアウト

  • WordPressデフォルトのログインと登録ページは、ProfiLePressなどのプラグインを使用してカスタマイズして、Webサイト全体のデザインとより適切に統合できます。 PREPILEPRESSを使用して、カスタムWordPressログイン、登録、およびパスワードリセットページをPHPコードを作成せずに作成できます。代わりにショートコードを使用してください。
    • カスタムページを作成した後、デフォルトのWordPressログイン、登録、およびパスワードリセットページをこれらのカスタム代替案にリダイレクトできます。
  • ProfilEpressプラグインでは、これらのカスタムフォームにウィジェットを作成することもできます。これは、Webサイト上の任意のウィジェットエリアまたはサイドバーに簡単に追加できます。
  • WordPressは、ブログエンジン、ブログを作成するためのWebソフトウェアとして生活を始めました。長年にわたり、一部の開発者はCMSと見なされることに反対するかもしれませんが、コンテンツ管理システム（CMS）に進化してきました。
    • WordPressのデフォルトのログインと登録ページには健全な無礼があります。これは、サイトの設計に準拠することなくウェブサイトの外に住んでいるためです。
  • クライアント向けのWebサイトの作成に関しては、よりカスタマイズされたログインページが必要になる場合があり、Webサイトのデザイン全体とうまく統合されます。また、サイト管理者だけでなく、エンドユーザーが登録とログインページを使用するWordPressを拡張する多数のプラグインもあります。
    • いくつかの開発者が、カスタムログインページカスタマイザーなどのWordPressでデフォルトのログインと登録フォームをカスタマイズするためのいくつかの種類のプラグインをリリースしました。
デフォルトのアカウントページに関する不満は、主にきれいではないためではなく、ウェブサイトのルックアンドフィールに接続していないためです。

WordPressのカスタム登録とログインページの構築に関する簡単なGoogle検索では、高度なPHP/WordPress開発者向けのチュートリアルが明らかになりました。経験がある場合は大丈夫ですが、多くの開発者のチュートリアルを書いている人として、もう少しシンプルなものが必要な視聴者もいることも知っています。 このチュートリアルでは、PROFILEPRESSと呼ばれるプラグインを使用して、カスタムWordPressログイン、登録、パスワードリセットページをすべてPHPコードの1行を記述せずに作成する方法を学びます。もちろん、開発者の場合は、コードもチェックしていただけます。

以下のフォームデザインは、このチュートリアルで使用されるものです。

agbonghama Collins（@collizo4sky）によるWordPressのPEN SP PREPILEPRESSログインを参照してください。

codepenのAgbonghama Collins（@collizo4sky）によるWordPressのPEN SP PREPILEPRESS登録を参照してください。

agbonghama Collins（@collizo4sky）によるペンSPパスワードリセットを参照してください。

チュートリアルの前にジャンプしたい場合は、ログイン、登録、パスワードのリセットページのデモを表示できます。

profiLepressの導入

ProfilEpressは、ユーザーアカウントの構築（ログイン、登録、パスワードリセット、編集プロファイル）のフォームとフロントエンドプロファイルを、サーバー側のPHP検証、認証、承認システムをコーディングすることなく、愚かにシンプルにするWordPressプラグインです。 。それは私が必要だと思ったものなので、私はそれを作成しました。取り組むのは興味深いプロジェクトでした。今後の記事でもっと共有するものです。

典型的な例では、PHPを記述せずに単純なHTMLログインフォームを機能的なWordPressログインに変えることができます。

ProfilEpressはドラッグアンドドロップのプラグインではなく、アカウントフォームとフロントエンドプロファイルを構築するためのテンプレートシステムとしてショートコードを使用します。

ショートコードは、それぞれJavaScriptとPHPにハンドルバーと小枝が何であるかをプロフィールすることです。 Gravity Forms、Form 7、NextGenギャラリーなどのプラグインを使用した場合、ショートコードに既に精通している可能性があります。非常に使いやすいです。

これ以上苦労せずに、ログイン、登録、パスワードの構築を始めましょうWordPressフォーム。

カスタムログインページ

最初に、WordPressプラグインディレクトリで無料で利用できるProfilEpressプラグインのLiteバージョンをインストールしてアクティブにします。

下の画像に示すようにログインフォームメニューをクリックしてから、プロセスを開始するために新しいボタンを追加します。

フォームが表示されます。次のようにフィールドを入力します

テンプレート名フィールドにログインフォームの名前を入力します。

上記のCodePenログインフォームコードをログインデザインのTinymceエディターにコピーし、テキスト、パスワードを交換し、入力フィールドをそれぞれのショートコードに相当する

これがログインフォームの最終的なHTMLコードです。

WordPressでカスタムログインと登録ページを構築します注：フォームタグ は許可されていません。フォームをレンダリングすると、プラグインによって自動的に追加されます。

ログインCSSをCSSスタイルシートテキスト領域に貼り付けます。

注：ProfilEpressログインフォームによって生成されたエラーは、クラスProfiLePress-Login-Statusを備えたDIVに包まれているため、ログインStyleSheetにクラスの存在が存在します。

ログインフォームのプレビューを表示するには、[プレビュー設計]ボタンをクリックします。

最後に、[変更変更]ボタンを押してログインフォームを作成します。ログインフォームをWordPressウィジェットとして使用できるようにするには、ドラッグしてウィジェット領域 /サイドバーにドロップできるようにします。これをWIDGETチェックボックスにすることを確認してください。変更を保存したら、WordPressウィジェット管理ページに移動し、ProfilEpressログインウィジェットを目的の場所にドラッグし、ログインフォームを選択して保存します。

ログインカタログに戻り、生成されたログインショートコードをコピーして、カスタムログインページを作成するページに貼り付けます。 WordPressでカスタムログインと登録ページを構築します

カスタム登録ページ

WordPressでカスタムログインと登録ページを構築しますプロファイルを使用したカスタム登録フォームの構築は、フォームデザインと成功メッセージ（登録の成功に表示されるテキスト）のログインフォームとしてのほとんどの手順に従います。

[登録]メニューをクリックし、その後に新しいボタンを追加します。

上記のCodepen登録フォームコードを登録設計TINYMCEエディターにコピーします。

フォームコンポーネント（ユーザー名、パスワード、電子メール、名、姓フィールド、送信ボタン）をそれぞれのProfilEpressショートコードに置き換えます。

登録フォームのコードは最終的に次のようになります：

登録CSSをCSSスタイルシートテキスト領域に貼り付けます。

注：ProfilEpress登録フォームによって生成されたエラーは、クラス名ProfilEpress-Reg-StatusのDIVに包まれているため、スタイルシートのクラス。

コードを入力して、成功したユーザー登録に関するカスタマイズされたメッセージを表示します。

登録フォームをウィジェットとして利用できるようにするオプションもあります。これは非常に便利であることがわかりました。 
<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Sign In<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [login-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [login-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>       [login-submit  value="Log In"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

登録カタログに戻り、生成されたショートコードをコピーして、カスタム登録ページを作成するページに貼り付けてください。

カスタムパスワードリセットページ

パスワードリセットメニューをクリックして、パスワードリセット設定ページに移動します。

[ページの上部にある[新しい]ボタンの追加をクリックして、フォームビルディングプロセスを開始します。 
<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Create a new account<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [reg-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [reg-email ]
      <span><span><span><label</span> for<span>="email"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="E-mail Address"</span>></span>E-mail Address<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __third"</span>></span>
</span>      [reg-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __fourth"</span>></span>
</span>      [reg-first-name ]
      <span><span><span><label</span> for<span>="first-name"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="First Name"</span>></span>First Name<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __fourth"</span>></span>
</span>      [reg-last-name ]
      <span><span><span><label</span> for<span>="last-name"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Last Name"</span>></span>Last Name<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>      [reg-submit  value="Create Account"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
CodePenパスワードリセットフォームコードをパスワードリセットデザインTINYMCEエディターにコピーします。

ユーザー名/電子メールフィールドと送信ボタンをショートコードに相当するボタンを交換します。WordPressでカスタムログインと登録ページを構築します

パスワードリセットフォームの最終コードは次のようになります：

WordPressでカスタムログインと登録ページを構築します

ユーザーがフォームを正常に使用してパスワードをリセットした後にカスタマイズされたメッセージを表示するために、パスワードリセットのテキスト領域をリセットするパスワードリセットの成功したメッセージに以下のコードを入力します。

変更を保存して、カタログに戻ります。

生成されたショートコードをコピーして、カスタムパスワードを作成するページに貼り付けます。

デフォルトのWordPressアカウントページをカスタムの代替案にリダイレクトする

最後に、今すぐ行う必要があるのは、デフォルトのWordPressログイン、登録、パスワードリセットページをProfilEpressで作成したカスタムの代替案にリダイレクトすることです。そのため、ユーザーが以下のデフォルトURLにアクセスすると、カスタムページにリダイレクトされます。

  1. http://example.com/wp-login.php
  2. http://example.com/wp-login.php？action = register
  3. http://example.com/wp-login.php？action = lostpassword
これを達成するには、[設定プラグイン]メニューをクリックします

グローバル設定セクションで、カスタムログイン、登録、パスワードのリセットページを選択して保存します。

要約

このチュートリアルでは、WordPressプラグインディレクトリで利用可能なProfilEpressと呼ばれるプラグインを使用して、WordPressでカスタムログイン、登録、パスワードリセットページを簡単に作成する方法を学びました。また、デフォルトのWordPressアカウントページをカスタムアカウントページにリダイレクトする方法も学びました。 WordPressでカスタムログインと登録ページを構築します質問、提案、または貢献がある場合は、コメントでお知らせください。

WordPressのカスタムログインと登録ページの構築に関するよくある質問 WordPressログインページの外観をカスタマイズするにはどうすればよいですか？

WordPressログインページの外観をカスタマイズすることで、プラグインまたは手動コーディングを使用して実行できます。テーマのようなプラグイン私のログイン、カスタムログインページカスタマイザー、ログインプレスは、カスタマイズのための使いやすいインターフェイスを提供します。コーディングを好む場合は、テーマディレクトリに新しいPHPファイルを作成し、wp_login_form関数を使用してログインフォームを表示することにより、カスタムログインページを作成できます。その後、CSSを使用してフォームをスタイリングできます。

カスタム登録フォームに追加のフィールドを追加できますか？これは、WordPressで「Register_Form」アクションフックを使用して実行できます。 functions.phpファイルに関数を追加して、追加フィールドを追加してから、「登録_errors」と「user_register」フックを使用してフィールドデータを検証および保存します。登録？

「login_redirect」フィルターフックを使用して、ログインまたは登録後にユーザーをリダイレクトできます。このフックを使用すると、リダイレクトするURLを指定できます。 functions.phpファイルに関数を追加することができます。これは、リダイレクトするURLを返します。プラグインなしでカスタムログインページを作成することができます。これは、テーマディレクトリに新しいPHPファイルを作成し、wp_login_form関数を使用してログインフォームを表示することで実行できます。その後、CSSを使用してフォームをスタイリングできます

カスタムログインフォームにチェックボックスを覚えておくにはどうすればよいですか？

wp_login_form関数には、覚えているチェックボックスを含めるように設定できる「覚えておいてください」パラメーターが含まれています。プラグインを使用している場合は、プラグインの設定をチェックして、覚えているチェックボックスを含めるオプションがあるかどうかを確認してください。

ショートコードを使用してカスタムログインフォームを表示できますか？ 、ショートコードを使用して、カスタムログインフォームを表示できます。 WP_LOGIN_FORM関数は、ショートコード関数で使用できるForm HTMLを含む文字列を返します。その後、投稿またはページのショートコードを使用してフォームを表示できます。

カスタムログインフォームのエラーメッセージを変更するにはどうすればよいですか？ 「login_errors」フィルターフックを使用してフォームをログインします。このフックを使用すると、エラーメッセージが表示される前にエラーメッセージを変更できます。

カスタムログインページにソーシャルログインを追加できますか？ 。 NextEnd Social LoginやWP Social Loginなど、ソーシャルログイン機能を提供するいくつかのプラグインがあります。コーディングを好む場合は、Hybridauthライブラリを使用してソーシャルログインを追加できます。制限ログインの試行やログインロックダウンなどのプラグインを使用して攻撃を強制します。これらのプラグインは、単一のIPアドレスからのログイン試行の数を制限します。

カスタムログインフォームにCaptchaを追加できますか？本当にシンプルなCaptchaやGoogle Captcha（Recaptcha）など、Captchaの機能を提供するいくつかのプラグインがあります。コーディングを好む場合は、Google Recaptcha APIを使用してCaptchaを追加できます。

以上がWordPressでカスタムログインと登録ページを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript css html String if for select checkbox include Directory Error Filter register using class finally copy number function default this location display input kind http cms WordPress
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ハッカーやDDOの攻撃に対するWordPressを確保します次の記事：ハッカーやDDOの攻撃に対するWordPressを確保します

関連記事

続きを見る