在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中文网其他相关文章！