WordPress中的自定義登錄和註冊頁面

鑰匙要點

• > WordPress默認登錄和註冊頁可以使用ProfilePress等插件來定制，以更好地與整體網站設計集成。
• >使用ProfilePress，自定義WordPress登錄，註冊和密碼重置頁面，而無需編寫任何PHP代碼，而是使用快速代碼。
創建自定義頁面後，可以將默認的WordPress登錄，註冊和密碼重置頁面重定向到這些自定義替代方案。 >
• profilePress插件還允許為這些自定義表單創建小部件，可以輕鬆地將其添加到網站上的任何窗口窗口或側邊欄中。
>
• WordPress
啟動了生命作為博客引擎，用於創建博客的Web軟件。多年來，它已經演變成內容管理系統（CMS），即使某些開發人員可能不同意它被視為CMS。

>對WordPress默認登錄和註冊頁面存在健康的不尊重，因為它們不符合網站設計。 在為客戶創建網站時，您可能需要一個更自定義的登錄頁面，以便它與整個網站設計很好地集成。還有許多插件可以擴展WordPress，其中最終用戶使用註冊和登錄頁面，而不僅僅是站點管理員。

>一些開發人員發布了幾種插件，用於自定義WordPress中的默認登錄和註冊表格，例如自定義登錄頁面自定義。

默認帳戶頁面的gripe不是主要是因為它不是很漂亮，而是因為它與網站外觀沒有連接。

>用於構建WordPress的自定義註冊和登錄頁面的Google快速搜索揭示了針對高級PHP/WordPress開發人員的教程。如果您有經驗，這是可以的，但是作為寫很多開發人員教程的人，我知道還有一個受眾需要更簡單的東西。

> 在本教程中，我們將學習如何使用我開發的名為ProfilePress的插件來構建自定義WordPress登錄，註冊和密碼重置頁面，而無需編寫單行PHP代碼。當然，如果您是開發人員，也歡迎您查看代碼。

>

下面的表單設計是本教程中將使用的。

請參閱codepen上的agbonghama collins（@collizo4sky）WordPress的筆sp profilePress登錄。

請參閱Agbonghama Collins（@collizo4sky）在Codepen上的WordPress的筆SP profilePress註冊。

請參閱codepen上的agbonghama collins（@collizo4sky）的筆SP密碼重置。

如果您想跳到教程前，則可以查看登錄，註冊和密碼重置頁面的演示。

介紹ProfilePress

profilePress是一個WordPress插件，它使構建用戶帳戶（登錄，註冊，密碼重置和編輯配置文件）表單和前端配置文件愚蠢地簡單，而無需對服務器端的任何PHP驗證，身份驗證和授權系統進行編碼。這是我看到的需要的東西，所以我創建了它。這是一個有趣的項目，我將在以後的文章中分享更多信息。

對於一個典型的示例，它可以將簡單的HTML登錄表單轉換為功能性的WordPress登錄，而無需編寫任何PHP。 ProfilePress不是一種拖放的插件，而是利用短代碼作為建築帳戶形式和前端配置文件的模板系統。

短碼是為了分別用於javaScript和php的車把和樹枝。如果您使用了諸如重力表格之類的插件，請聯繫7或NextGen Gallery，您可能已經熟悉了短代碼。它們非常易於使用。

>不進一步的ADO，讓我們開始構建登錄，註冊和密碼重置WordPress表單。

>自定義登錄頁

首先，請在WordPress插件目錄中免費安裝和激活ProfilePress插件的Lite版本。

單擊下圖中所示的登錄表單菜單，然後添加新按鈕開始該過程。

將向您介紹表格。填寫如下的字段。

在模板名稱字段中輸入登錄表單的名稱。

> >將codepen登錄表單代碼上述複製到登錄設計tinymce編輯器，然後替換文本，密碼並提交輸入字段，並及其各自的短代碼等價。

這是登錄表單的最終HTML代碼。

>

注意：允許使用表格標籤 。它們在渲染表單時由插件自動添加它們。

>

>將登錄CSS粘貼到CSS樣式表文本區域中。

注意：ProfilePress登錄表格生成的錯誤包裹在DIV中，class profilepress-login-status，因此在登錄樣式中存在類的存在。

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

>

要查看登錄表單的預覽，請單擊“預覽設計”按鈕。

最後，點擊“保存更改”按鈕以創建登錄表單。

>

>使登錄表單可作為WordPress小部件可用，可以將其拖動並掉入窗口欄 /側邊欄中；檢查將此設備為小部件複選框。保存更改後，轉到WordPress Widget Admin頁面，將ProfilePress登錄小部件拖到所需的位置，然後選擇登錄表單並保存。

。

>導航返回登錄目錄，複製生成的登錄快捷代碼，然後將其粘貼到您希望製作自定義登錄頁面的頁面上。

自定義註冊頁

>使用ProfilePress構建自定義註冊表格幾乎遵循了“登錄表”的步驟，除了表單設計和成功消息（在成功註冊上顯示的文本）。

>

單擊“註冊”表單菜單，然後添加新按鈕。 >

>將CodePen註冊表格代碼複製到註冊設計Tinymce編輯器。

>替換錶單組件（用戶名，密碼，電子郵件，名字，姓氏字段和提交按鈕）及其各自的ProfilePress短碼等價。

>

註冊表格的代碼最終將看起來像：

>

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

>將註冊CSS粘貼到CSS樣式表文本區域。

注意：ProfilePress註冊表格生成的錯誤包裹在Div中，class Name ProfilePress-Reg-STATUS，因此在樣式表中的類。

輸入代碼以顯示成功的用戶註冊的自定義消息。

>

也可以選擇將註冊表格作為小部件可用，我發現這可能非常有用。

>

<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編輯器。

>替換用用戶名/電子郵件字段和提交按鈕，其短碼等效物。

>

密碼重置表格的最終代碼將如下所示：>

>在成功的密碼重置文本區域上輸入下面的代碼，以在用戶成功使用表格重置其密碼後顯示自定義消息。

<span><span><span><div</span> class<span>="profilepress-reg-status"</span>></span>Registration Successful.<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>Reset Password<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [user-login ]
      <span><span><span><label</span> for<span>="userlogin"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username / Email"</span>></span>Username / Email<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>      [reset-submit  value="Reset"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

>將默認的WordPress帳戶頁面重定向到自定義替代

>最後，我們現在需要做的就是將默認的WordPress登錄，註冊和密碼重置頁面重定向到使用ProfilePress創建的自定義替代方案，因此，當用戶訪問以下以下默認URL時，它們將被重定向到自定義頁面。

http://example.com/wp-login.php
http://example.com/wp-login.php?action=Register
http://example.com/wp-login.php?action=lostPassword
為了實現此目的，請單擊“設置插件”菜單。

>在“全局設置”部分中，選擇並保存自定義登錄，註冊和密碼重置頁面。

摘要

在本教程中，我們學習瞭如何在WordPress插件目錄中使用我編寫的名為ProfilePress的插件輕鬆構建自定義登錄，註冊和密碼重置頁面。我們還學會瞭如何將默認的WordPress帳戶頁面重定向到自定義帳戶頁面。

如果您有任何疑問，建議或貢獻，請在評論中告訴我。

在WordPress中構建自定義登錄和註冊頁面的經常詢問的問題

>如何自定義WordPress登錄頁面的外觀？

>可以使用插件或手動編碼來自定義WordPress登錄頁面的外觀。插件（例如主題我的登錄名，自定義登錄頁自定義器）和登錄名提供易於使用的自定義接口。如果您喜歡編碼，則可以通過在主題目錄中創建新的PHP文件並使用WP_LOGIN_FORM函數來創建自定義登錄頁面。然後，您可以使用CSS來對錶格進行樣式。

我可以在我的自定義註冊表單中添加額外字段嗎？這可以通過在WordPress中使用“ register_form”操作掛鉤來完成。您可以在function.php文件中添加添加額外字段的函數。註冊？

>您可以使用“ login_redirect”過濾器掛鉤在登錄或註冊後重定向用戶。此掛鉤允許您指定重定向到的URL。您可以將函數添加到您的function.php文件中，該文件返回要重定向到的URL。可以在沒有插件的情況下創建自定義登錄頁面。這可以通過在主題目錄中創建新的PHP文件並使用WP_LOGIN_FORM函數顯示登錄表單來完成。然後，您可以使用CSS對錶格進行樣式。

>如何將記住我的複選框添加到我的自定義登錄表單？ >

我可以使用短代碼顯示我的自定義登錄表單嗎？ ，您可以使用短代碼顯示自定義登錄表單。 WP_LOGIN_FORM函數返回一個包含形式HTML的字符串，您可以在短代碼函數中使用該字符串。然後，您可以使用帖子或頁面中的短代碼顯示表單。

>如何更改自定義登錄表單上的錯誤消息？

您可以在自定義上更改錯誤消息使用“ login_errors”過濾器掛鉤登錄表單。此掛鉤允許您在顯示錯誤消息之前修改它們。

>我可以將社交登錄添加到我的自定義登錄頁面嗎？

是的，您可以將社交登錄添加到您的自定義登錄頁面。有幾個可提供社交登錄功能的插件，例如NextEnd社交登錄和WP社交登錄。如果您喜歡編碼，則可以使用Hybridauth庫來添加社交登錄。

>如何保護我的自定義登錄頁面免受蠻力攻擊？

>

您可以保護您的自定義登錄頁面免受野蠻的保護通過使用插件（例如限制登錄嘗試或登錄鎖定）來強制攻擊。這些插件限制了從單個IP地址的登錄嘗試次數。

>可以在我的自定義登錄表單中添加驗證碼嗎？

是的，您可以在自定義登錄表單中添加驗證碼。有幾個可提供驗證碼功能的插件，例如非常簡單的驗證碼和Google Captcha（recaptcha）。如果您喜歡編碼，則可以使用Google recaptcha API添加驗證碼。

>

以上是WordPress中的自定義登錄和註冊頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！