在WordPress中自定義和造型受密碼保護的表單

最近一個客戶需要為他們的 WordPress 頁面添加密碼保護，這本身並不復雜。然而，之後他們要求修改文本並改進頁面外觀。我欣然接受了這個挑戰，以下是我的實現方法。

如何自定義 WordPress 中的密碼保護頁面

步驟 1：編輯 functions.php 文件

打開你的 functions.php 文件並添加以下代碼塊：

<code class="language-php"><?php
add_filter( 'the_password_form', 'custom_password_form' );

function custom_password_form() {
    global $post;
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );

    $o = '
' . __( "这是您新的密码提示文本，显示在密码表单上方" ) . '
<label for="' . $label . '">' . __( "密码：" ) . ' </label>
<input class="input password-input" id="' . $label . '" name="pwd" type="password" size="20">
<input type="submit" name="Submit" class="button" value="' . esc_attr__( " .>
<p class="extra-text">额外文本可以放在这里……这将显示在表单下方</p>

';

    return $o;
}
?></code>

讓我快速解釋一下。密碼保護代碼是從 wp-includes 文件夾中的文件生成的，您可能會想直接編輯它。但是，這不推薦，因為修改核心代碼是個壞主意。為什麼？如果您更新 WordPress，所有更改都會被清除。因此，最好避免這種方法以防止任何潛在問題。將上述代碼放在 functions.php 文件中，您可以使用 WordPress hook 系統對其進行修改，這樣您就不必擔心在更新 WordPress 時會丟失對錶單的任何更改。

如您所見，我實際上為表單本身、表單標籤、密碼字段和按鈕添加了 CSS 類。所有必要的元素都到位後，我們現在可以使用 CSS 對其進行完全樣式化。最好的部分是我們不會對 wp-includes 文件夾進行任何更改，因此我們不會違反任何 WordPress 編碼標準規則。

步驟 2：更改默認密碼保護文本

上面大寫的文本也顯示了我更改的內容，第一組文本：

<code>这是您新的密码提示文本，显示在密码表单上方</code>

如您所見，這是您的介紹文本，以前是這樣的：

<code>此内容受密码保护。要查看它，请在下方输入您的密码：</code>

現在我們可以將其更改為您想要的任何文本。您甚至可以刪除引號之間的所有內容，根本不顯示任何內容。

步驟 3：更改密碼輸入字段標籤

輸入字段左側顯示的默認標籤是密碼。您可以將其更改為您想要的任何內容。在我的例子中，我為其分配了一個 CSS 類並使用以下 CSS 規則刪除了標籤。

<code class="language-css">.pass-label { display: none; }</code>

如果您希望更改其他屬性，也可以使用相同的 CSS 類。

步驟 4：設置密碼輸入字段樣式

我不喜歡此表單的默認外觀，但是由於此密碼輸入字段的添加，我可以使其看起來更現代。您可以根據自己的喜好進一步自定義它。

步驟 5：設置提交按鈕樣式

在函數代碼中，我在提交按鈕中添加了 button CSS 類。這樣做是因為我希望客戶端網站上的所有按鈕看起來都一樣。網站的一致性是關鍵。這是我使用的 CSS：

<code class="language-css">.button {
    background-color: #000;
    color: #fff;
    border: 0;
    font-family: Impact, Arial, sans-serif;
    margin: 0;
    height: 33px;
    padding: 0px 6px 6px 6px;
    font-size: 15px;
}</code>

步驟 6：在表單下方添加額外文本

我還想添加一個說明，告知用戶密碼字段區分大小寫。為此，我只是在表單下方添加了一個段落代碼，並插入了一個樣式標籤來為文本應用自定義樣式，使其與頁面的其餘部分區分開來。

附加選項

在上一節中，我們討論瞭如何從開發人員的角度自定義密碼保護頁面。但是，如果您不習慣編輯代碼，也可以使用其他工具來達到相同的結果。

以下是一些您可以用來自定義 WordPress 中密碼保護表單的插件或附加組件。

YellowPencil

YellowPencil 插件是一個 WordPress 插件，它提供了一個功能豐富的可視化 CSS 編輯器，允許您自定義網站的外觀而無需編寫任何代碼。它提供了一個用戶友好的界面和廣泛的自定義選項。

SiteOrigin CSS

SiteOrigin CSS 插件是一個免費的 WordPress 插件，允許您使用簡單的可視化編輯器輕鬆自定義網站的外觀。它提供了一個用戶友好的界面，使您可以更改網站的 CSS（層疊樣式表）而無需編寫任何代碼。

通過這些插件，您可以無需直接修改代碼就能輕鬆實現自定義密碼保護頁面的樣式和文本。

以上是在WordPress中自定義和造型受密碼保護的表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！