Question

我正在尝试从自定义主题（file.js）中删除特定的jQuery文件。由于主题的自定义，此文件包含几个不再需要的脚本。唯一剩下的脚本使用jQuery基于滚动事件（scrollTop）向HTML元素添加额外的CSS类。代码如下所示：

$(window).scroll(function () {
     if ($(document).scrollTop() > 1 ) {
          $('.site-header').addClass('shrink');
     } else {
          $('.site-header').removeClass('shrink');
     }
});

...它会修改：

<header class="site-header" itemscope="" itemtype="http://schema.org/WPHeader">

......将成为：

<header class="site-header shrink" itemscope="" itemtype="http://schema.org/WPHeader">

...当最终用户滚动到页面顶部时。

不再需要scrollTop事件，但我仍然需要将.shrink类添加到header元素中，我想在WordPress的functions.php文件中使用PHP。

WordPress模板可能包含多个标头html元素，因此仅定位具有.site-header css类的标头html元素非常重要。

我尝试修改以下代码：

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
}

...由@ maiorano84提供：How to add a class to a html element using filters in WordPress?，以满足我的需求，但无法让它正常工作。

请帮忙！

Answer 1

如果你使用的是genesis，你不需要一个非常复杂的代码来修改HTML输出，只需在site-header前缀中添加一个过滤器，genesis是迄今为止最可定制的框架。

add_filter( 'genesis_attr_site-header', 'my_custom_genesis_header_class' );
function my_custom_genesis_header_class( $attributes ) {
    $attributes['class'] .= ' shrink';
    return $attributes;
}

将其他css类添加到WordPress中的现有HTML元素

1 个答案: