如何使用 WordPress 中的过滤器将类添加到 html 元素? [英] How to add a class to a html element using filters in WordPress?

问题描述

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

I am changing the current theme of my blog and I wish to add a class to all my input fields.

我不精通正则表达式代码，所以每当我需要做这样的事情时，我都会遇到很多麻烦.

I am not well versed with regex codes, so I end up in a lot of trouble whenever I need to make things like these happen.

我要添加类btn 需要添加到

I want to add class btn needs to be added to <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" 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" />

推荐答案

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

Given your constraints, the cleanest way you can do what you want with PHP and stay within the Wordpress framework is to use DOMDocument. While it's POSSIBLE to rely on regular expressions, it's very sloppy and you can run into more problems than what you started with.

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

Place this in your functions.php file, and it should do everything you need:

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
}

这篇关于如何使用 WordPress 中的过滤器将类添加到 html 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！