キーテイクアウト

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

デフォルトのアカウントページに関する不満は、主にきれいではないためではなく、ウェブサイトのルックアンドフィールに接続していないためです。

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

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

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

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

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

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

profiLepressの導(dǎo)入

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

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

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

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

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

カスタムログインページ

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

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

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

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

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

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

注：フォームタグ は許可されていません。フォームをレンダリングすると、プラグインによって自動(dòng)的に追加されます。

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

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

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

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

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

カスタム登録ページ

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

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

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

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

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

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

注：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>

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

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

パスワードリセットメニューをクリックして、パスワードリセット設(shè)定ページに移動(dòng)します。

[ページの上部にある[新しい]ボタンの追加をクリックして、フォームビルディングプロセスを開始します。

<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エディターにコピーします。

ユーザー名/電子メールフィールドと送信ボタンをショートコードに相當(dāng)するボタンを交換します。

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

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

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

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

デフォルトの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

これを達(dá)成するには、[設(shè)定プラグイン]メニューをクリックします

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

要約

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

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

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

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

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

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

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

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

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

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

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

以上がWordPressでカスタムログインと登録ページを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。