如何使用 WordPress 中的过滤器将类添加到 html 元素？

Question

我正在更改我博客的当前主题，并希望在我的所有输入字段中添加一个类。

我不精通正则表达式代码，所以每当我需要让这些事情发生时，我都会遇到很多麻烦。

type="提交"

我要添加类btn需要添加到<input type="submit">

旧代码

<input type="submit" id="some_id" name="something" class="some_class" value="some_value" />

新代码

<input type="submit" id="some_id" name="something" class="btn some_class" value="some_value" />

---

和

同样，我希望将 input 类添加到 <input type="text"> 和 <input type="textarea">

旧代码

<input type="text" id="some_id" name="something" class="some_class" value="some_value" />
<textarea id="some_id" name="something" class="some_class" value="some_value" />

新代码

<input type="text" id="some_id" name="something" class="input some_class" value="some_value" />
<textarea id="some_id" name="something" class="input some_class" value="some_value" />

Answer 1

鉴于您的限制，您可以使用 PHP 做您想做的事情并保持在 Wordpress 框架内的最简洁的方法是使用 DOMDocument。虽然可能依赖正则表达式，但它非常草率，而且您可能会遇到比开始时更多的问题。

把它放在你的functions.php文件中，它应该会做你需要的一切：

add_filter('the_content', 'add_text_input_classes', 20);
function add_text_input_classes($content)
{
    $doc = new DOMDocument(); //Instantiate DOMDocument
    $doc->loadHTML($content); //Load the Post/Page Content as HTML
    $textareas = $doc->getElementsByTagName('textarea'); //Find all Textareas
    $inputs = $doc->getElementsByTagName('input'); //Find all Inputs
    foreach($textareas as $textarea)
    {
        append_attr_to_element($textarea, 'class', 'input');
    }
    foreach($inputs as $input)
    {
        $setClass = false;
        if($input->getAttribute('type') === 'submit') //Is the input of type submit?
            $setClass = 'btn';
        else if($input->getAttribute('type') === 'text') //Is the input of type text?
            $setClass = 'input';

        if($setClass)
            append_attr_to_element($input, 'class', $setClass);
    }
    return $doc->saveHTML(); //Return modified content as string
}
function append_attr_to_element(&$element, $attr, $value)
{
    if($element->hasAttribute($attr)) //If the element has the specified attribute
    {
        $attrs = explode(' ', $element->getAttribute($attr)); //Explode existing values
        if(!in_array($value, $attrs))
            $attrs[] = $value; //Append the new value
        $attrs = array_map('trim', array_filter($attrs)); //Clean existing values
        $element->setAttribute($attr, implode(' ', $attrs)); //Set cleaned attribute
    }
    else
        $element->setAttribute($attr, $value); //Set attribute
}

Answer 2

如果我正确理解您的问题，您希望将类动态应用于输入元素。您需要使用的是一个过滤器，或一系列过滤器。

首先让我解释一下过滤器的工作原理。过滤器与“钩子”一起使用，就像操作一样。有关详细信息，请参阅Actions and Filters 法典页面。

听起来您想使用挂钩来添加此btn 类，而无需手动更改每个输入。这不是钩子的工作方式。要为此使用钩子，您将使用过滤器，这意味着您需要编写...

<input type="submit" class="<?php echo apply_filters('input_class', 'some-default-class'); ?>" />

然后您就可以将过滤器添加到“input_class”标签。

add_filter('input_class', 'btn_class_filter');

function btn_class_filter($default){
    return 'btn';
}

无论您的函数返回什么都将替换默认值 - 在这种情况下，“some-default-class”将替换为“btn”。

但是，这一切都消除了向要添加类的每个输入字段添加代码的需要。做到这一点的唯一方法是通过 javascript，最容易使用 jQuery。我知道你说过你不想使用 jQuery，但如果你不想编辑标记，那是你唯一的选择。

最简单的做法是手动添加 btn 类 - 如果是访问问题，那么 jQuery 将是可行的方法。

Answer 3

如果您只是对这些元素应用一揽子样式规则而不关心 IE6 支持，为什么不在 CSS 中使用属性选择器，例如

.btn, input[type="submit"] {
    /* styles for buttons */
}

.input, input[type="text"], textarea {
    /* styles for text inputs and textareas */
}

仅供参考，没有<input type="textarea">，只有<textarea>

使用钩子操作标记既耗时又笨拙。您需要获取所有模板输出以及插件生成的标记。我建议不要尝试这个，Wordpress 代码已经够乱了。

Answer 4

我在上面回答了，我会简单地编辑那个，但它已经收到投票，这个答案会有很大的不同。

在我最初回答了一些 cmets 之后，我意识到 @Aniket 想要更改的输入字段不在内容中，它们是整个网站的元素，例如小部件和模板本身。

无法通过挂钩、操作或过滤器来修改主题模板中编写的代码。过滤器可以修改字符串和值，但前提是已经有可用的挂钩。你没有这个，所以不可能。在不编辑输入字段的情况下动态添加此类的唯一选择是使用 javascript。然而，这毫无意义有两个原因。

1. 自己编辑输入字段会更简单
2. 您不需要添加这些类，因为 CSS 允许您以其他方式选择这些元素。

您无需在输入字段中添加'input' 类。

CSS 允许您通过标签名称选择元素，例如，如果您想选择任何 div，则不需要为每个 div 添加".div" 类。您可以通过简单地使用"div" 来选择所有 div，而无需任何类或 ID 表示法。

这同样适用于文本区域。你说你想为文本区域、文本字段和提交按钮添加一个input 类，但这不是必需的。您可以选择所有使用CSS attribute selectors 的人。在这种情况下，将使用属性 submit 和 text 以及 textarea 元素指定输入字段，而不是您要添加的两个类。

不要添加 .btn 类来提交按钮，而是使用...

input[type="submit"] {
   /* Your styles */
}

而不是向文本字段和文本区域添加 .input 类，而是使用...

textarea, input[type="text"] {
   /* Your styles */
}

或者，如果您只想要所有输入字段，而不仅仅是文本区域和文本字段使用...

input {
   /* Your styles */
}

即使您通过 javascript 执行此操作，您最终也将不得不使用这种 CSS 选择来选择这些元素，并且您可能执行的任何正则表达式都将比这些简单的行复杂得多。