在WordPress中自定义和造型受密码保护的表单-css教程-PHP中文网

在WordPress中自定义和造型受密码保护的表单

尊渡假赌尊渡假赌尊渡假赌

发布： 2025-02-27 10:59:13

原创

884 人浏览过

Customizing and Styling the Password-Protected Form in WordPress

最近一个客户需要为他们的 WordPress 页面添加密码保护，这本身并不复杂。然而，之后他们要求修改文本并改进页面外观。我欣然接受了这个挑战，以下是我的实现方法。

如何自定义 WordPress 中的密码保护页面

步骤 1：编辑 functions.php 文件

打开你的 functions.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;
}
?>

登录后复制

让我快速解释一下。密码保护代码是从 wp-includes 文件夹中的文件生成的，您可能会想直接编辑它。但是，这不推荐，因为修改核心代码是个坏主意。为什么？如果您更新 WordPress，所有更改都会被清除。因此，最好避免这种方法以防止任何潜在问题。将上述代码放在 functions.php 文件中，您可以使用 WordPress hook 系统对其进行修改，这样您就不必担心在更新 WordPress 时会丢失对表单的任何更改。

如您所见，我实际上为表单本身、表单标签、密码字段和按钮添加了 CSS 类。所有必要的元素都到位后，我们现在可以使用 CSS 对其进行完全样式化。最好的部分是我们不会对 wp-includes 文件夹进行任何更改，因此我们不会违反任何 WordPress 编码标准规则。

步骤 2：更改默认密码保护文本

上面大写的文本也显示了我更改的内容，第一组文本：

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

登录后复制

如您所见，这是您的介绍文本，以前是这样的：

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

登录后复制

现在我们可以将其更改为您想要的任何文本。您甚至可以删除引号之间的所有内容，根本不显示任何内容。

步骤 3：更改密码输入字段标签

输入字段左侧显示的默认标签是密码。您可以将其更改为您想要的任何内容。在我的例子中，我为其分配了一个 CSS 类并使用以下 CSS 规则删除了标签。

.pass-label { display: none; }

登录后复制

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

步骤 4：设置密码输入字段样式

我不喜欢此表单的默认外观，但是由于此密码输入字段的添加，我可以使其看起来更现代。您可以根据自己的喜好进一步自定义它。

步骤 5：设置提交按钮样式

在函数代码中，我在提交按钮中添加了 button CSS 类。这样做是因为我希望客户端网站上的所有按钮看起来都一样。网站的一致性是关键。这是我使用的 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;
}

登录后复制

步骤 6：在表单下方添加额外文本

我还想添加一个说明，告知用户密码字段区分大小写。为此，我只是在表单下方添加了一个段落代码，并插入了一个样式标签来为文本应用自定义样式，使其与页面的其余部分区分开来。