类型= “提交”

我想添加课程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以最简单的方式使用PHP并使用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

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

首先让我解释过滤器的工作原理。过滤器使用'hooks'就像Actions一样。有关详细信息，请参阅Actions and Filters codex页面。

听起来你想使用钩子来添加这个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

我在上面回答说，我只是编辑那个，但已经收到了投票，这个答案会有很大不同。

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

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

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

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

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

这同样适用于textareas。你说你想在textareas，文本字段和提交按钮中添加input类，但这不是必需的。您可以使用CSS attribute selectors选择所有这些内容。在这种情况下，我们将指定输入字段，其中包含属性submit，text和textarea元素，而不是您要添加的两个类。

使用...

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

而不是将.input类添加到文本字段和textareas中使用...

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

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

input {
   /* Your styles */
}

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

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

类型= “提交”

和

4 个答案: