如何使用WordPress中的過濾器將類添加到html元素？

Question

我正在改變我博客的當前主題，我希望在我的所有輸入字段中添加一個類。

我不熟悉正則表達式代碼，所以每當我需要做出類似這樣的事情時，我最終會遇到很多麻煩。

類型=“提交”

我想添加類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並保留在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

如果我正確理解您的問題，您希望動態地將類應用於輸入元素。 您需要使用的是過濾器或一系列過濾器。

首先讓我解釋過濾器的工作原理。 過濾器使用'hooks'就像Actions一樣。 有關詳細信息，請參閱操作和過濾器 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。 然而，由於兩個原因，這是毫無意義的。

1. 只編輯輸入字段本身會更簡單
2. 您不需要添加這些類，因為CSS允許您以其他方式選擇這些元素。

您不需要在輸入字段中添加'input'類。

CSS允許您通過標簽名稱選擇元素，例如，如果您想選擇任何div，則不需要為每個div添加".div"類。 您可以通過簡單地使用"div"來選擇所有div，而不使用任何類或ID表示法。

這同樣適用於textareas。 你說你想為textareas，文本字段和提交按鈕添加一個input類，但這不是必需的。 您可以使用CSS屬性選擇器選擇所有這些。 在這種情況下，將指定帶有屬性submit和text的輸入字段，以及textarea元素，而不是要添加的兩個類。

而不是添加.btn類來提交按鈕，使用...

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

而不是將.input類添加到文本字段和textareas使用...

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

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

input {
   /* Your styles */
}

即使您通過javascript執行此操作，您仍然必須使用此類CSS選擇來選擇這些元素，並且您可能執行的任何正則表達式將比這些簡單的行復雜得多。