如何在 WordPress 註冊表中通過 Select2 添加選擇字段?
已發表: 2023-02-27如果您想創建高級註冊表單,您可以使用 Select2 WordPress 字段而不是 Select 字段。
想知道如何做到這一點? 好吧,你來對地方了!
在本文中,您將了解什麼是 WordPress Select2 字段、它的意義以及它與標準 Select 字段的區別。
我們還將逐步完成將字段添加到註冊表單的過程。 所以,一定要看完文章!
目錄
什麼是 Select2? 它與標準選擇有何不同?
簡單來說,Select2 技術為您提供了可自定義的選擇字段。 這意味著您可以將搜索、標記、無限滾動等功能添加到“選擇”字段。
現在,您一定想知道 Select2 字段與標準 Select 字段有何不同。 讓我們找出答案!
選擇與選擇 2
標準選擇字段在下拉列表中顯示可用選項列表。 用戶可以通過滾動查找選項來選擇這些選項之一。
Select2 字段具有標準 Select 字段提供的所有操作。 因此,它還允許用戶選擇可用選項之一。
然而,Select2 提供了更多的靈活性和定制化。
它為用戶提供了一個搜索框,他們可以在其中輸入選項。 然後自動向用戶顯示匹配選項。
此外,與標準 Select 字段不同,Select2 字段還有助於標記和無限滾動。
Select2 與 Multi Select2
Select2 技術支持單值和多值選擇框。 單值選擇框簡稱為 Select2 字段。
另一方面,多值選擇框稱為多選 2 字段或 Pillbox。
它們的工作方式非常相似; 它們都支持可定制的選擇框。
唯一的主要區別是 Multi Select2 允許用戶從可用選項中選擇多個選項。 用戶選擇的所有選項都出現在框內,就像藥丸盒一樣,因此得名。
此功能不存在於常規 Select2 字段中。
為什麼要在註冊表中添加 Select2 WordPress 字段?
Select2 字段的介紹幫助您更好地理解這項技術。
但是它給註冊表增加了什麼價值呢? 為什麼不直接使用標準的 Select 字段進行註冊呢?
好吧,讓我們看看您應該將 Select2 WordPress 字段添加到註冊表單的幾個原因:
- Select2 字段可幫助用戶使用搜索框輕鬆找到正確的選項。
- 用戶不需要滾動整個列表來找到他們正在尋找的選擇。
- 您可以讓用戶搜索並選擇多個選項。
- 該字段支持無限滾動,因此當用戶向下滾動時選項會繼續加載。
- Select2 字段使用戶可以快速輕鬆地完成註冊過程。
- 出色的用戶體驗鼓勵用戶填寫並提交註冊表。
這就是為什麼我們建議您將 Select2 字段添加到註冊表單而不是標準的 Select 字段。
將 Select2 字段添加到自定義表單的最佳方式是什麼? 讓我們在下一節中探討它。
在註冊表中添加 Select2 字段的最佳方式
WordPress 不允許您在沒有大量編碼的情況下將 Select2 字段添加到默認註冊表單。
但是,當您可以更輕鬆地使用 Select2 字段時,為什麼還要依賴編碼呢?
用戶註冊插件可幫助您在註冊表單中插入和自定義 Select2 和 Multi Select2 字段,而無需編碼。
您所需要的只是其高級字段擴展。 這就是為什麼它是將 Select2 字段添加到註冊表單的最佳方式。
此外,User Registration 是一個註冊表插件。
因此,您可以為您的站點創建帶有 Select2 字段的無限自定義註冊表單。 拖放式構建器界面使過程超級快!
此外,用戶註冊是 WooCommerce 網站的完美補充。 這個令人難以置信的 WordPress 插件可幫助您創建自定義 WooCommerce 註冊表格並將它們與結帳頁面同步。
這些只是用戶註冊插件的幾個亮點。 如果您想了解有關此插件的更多信息,請訪問官方頁面。
現在,讓我們繼續分步指南,其中我們將使用用戶註冊來演示該過程。
如何在 WordPress 註冊表中添加 Select2 字段?
這是在註冊表中添加 WordPress Select2 字段的完整指南。
仔細執行所有步驟,您應該立即準備好帶有 Select2 字段的自定義註冊表單!
第 1 步:設置用戶註冊專業版
在您的網站上安裝和激活 User Registration Pro 是第一步。 它是免費用戶註冊插件的高級版本。
要獲得 pro 插件,請從 User Registration 的官方網站購買三種定價計劃中的任何一種。
然後,在您的網站上設置 User Registration Pro。 如果您需要幫助,請按照我們關於如何正確安裝用戶註冊的指南進行操作。
成功設置插件後,您可以繼續下一步。
第 2 步:安裝並激活 Advanced Fields 插件
User Registration Pro 讓您可以訪問 Advanced Fields 插件。
顧名思義,它向表單構建器添加了幾個高級字段,包括 Select2 和 Multi Select2 字段。
因此,要使用它們,您必須安裝並激活Advanced Fields插件。
您可以從 WordPress 儀表板上的用戶註冊 >> 擴展頁面輕鬆完成此操作。
在這裡,搜索插件並單擊其安裝插件按鈕。 安裝完成後,點擊激活按鈕。
現在,您已準備好在註冊表中使用 Select2 WordPress 字段。
第 3 步:使用 Select2 字段創建一個新的註冊表單
在第三步中,讓我們創建一個新的註冊表單,您可以在其中添加 Select2 字段。
首先導航到用戶註冊 >> 添加新的。
如您所見,您可以選擇一個預先設計的模板來快速啟動。
用戶註冊提供各種模板,例如學生註冊表、廣告提交表單等。
否則,您可以從頭開始構建註冊表單。 單擊從頭開始並為表單命名。
按Continue後,您將被帶到拖放式表單生成器。
該表單有四個默認字段: Username 、 User Email 、 User Password和Confirm Password 。
您可以將所需的其餘字段從左側拖到右側的表單中。 您還可以通過簡單地四處拖動來重新排列字段的位置。
最重要的是,確保您還將 Select2 字段添加到表單中。
用戶註冊帶有兩種類型的 Select2 字段: Select2和Multi Select2 。 您可以根據需要將這些字段中的任何一個添加到表單中。
完成後,按頂部的更新表單按鈕。
因此,您已經使用 Select2 WordPress 字段創建了一個新的註冊表單。
第 4 步:自定義 Select2 和 Multi Select2 字段
用戶註冊的最大好處是您可以自定義添加到表單中的所有字段。
您所要做的就是單擊要編輯的字段,其字段選項將在左側打開。
因此,單擊您添加的 Select2 字段。 從其Field Options ,您可以編輯以下設置:
常規設置
在此部分中,您可以編輯字段標籤、說明等。您還可以將字段設置為必填字段、隱藏其標籤或啟用工具提示。
此外,選項部分可幫助您添加、編輯和刪除選項。 單擊+添加一個選項,單擊–將其刪除。 您可以通過編輯文本框來更改選項名稱。
此外,您可以通過向上或向下拖動來重新排列選項。 如果您有很長的選項列表,該插件可以讓您批量添加它們。
高級設置
高級設置允許您為該字段添加自定義 CSS 類。 您還可以通過提供參數名稱允許動態填充該字段。
請務必注意,每個表單域的域選項都不同。
例如, Multi Select2字段具有類似的General Settings 。 但是,高級設置提供了兩個新選項:
- Choice Limit:設置用戶可以選擇的最大選項數。
- 全選:使用戶能夠選擇列表中的所有可用選項。
因此,相應地自定義每個字段並點擊更新表單按鈕。
第 5 步:配置註冊表單設置
在您配置表單設置之前,您的註冊表單是不完整的。
為此,請轉到構建器中的“表單設置”選項卡。 在這裡,您可以配置兩種類型的設置: General和Extras 。
General部分允許您選擇User Approval And Login Option 、 Default User Role 、 Form Template等。
您還可以啟用強密碼和驗證碼支持。 除此之外,您還可以設置Redirect URL 、 Submit Button Text 、 Form Class等等。
Extras設置允許您啟用鍵盤友好表單、激活蜜罐垃圾郵件保護、啟用白名單/黑名單域等。
完成配置後,請按“更新表單”按鈕。
第 6 步:在您的網站上顯示自定義註冊表
最後,您的帶有 Select2 字段的註冊表已準備好發佈到您的網站上。
為此,請打開現有頁面或張貼您要顯示自定義表單的位置。
這樣做會將您帶到古騰堡編輯器。 在這裡,單擊塊插入器並將用戶註冊塊添加到頁面。
然後,選擇註冊表單選按鈕並從下拉列表中選擇您之前創建的表單。
最後,點擊頂部的更新按鈕,使表單在您的網站上生效。
如果您要創建新頁面或帖子,請按照與上述相同的步驟操作。 然後,點擊最後的發布按鈕。
恭喜! 現在,您的網站有一個帶有 Select2 WordPress 字段的自定義註冊表單。
包起來!
我們關於如何在註冊表單中添加 Select2 WordPress 字段的文章到此結束。
總而言之,您可以添加 Select2 字段而不是標準的 Select 字段來創建更高級的註冊表單。
用戶註冊插件可以幫助您輕鬆做到這一點。 您需要做的就是將 Select2 和 Multi Select2 字段添加到您的表單並自定義它們。
除此之外,用戶註冊同樣有助於防止垃圾郵件註冊、將默認登錄 URL 更改為自定義 URL 等。
通過我們的博客了解有關此強大插件的更多信息。 您還可以在我們的 YouTube 頻道上查看視頻教程。
此外,請在 Twitter 和 Facebook 上關注我們,隨時了解新文章的最新動態。