Как удалить класс в строке заголовка?

Question

Я нахожусь в среде Wordpress. Мне нужно скрыть «среднюю» и «нижнюю» строки заголовка, поэтому я дал класс «скрыть» для всех строк, но здесь проблема: мне нужно удалить класс «скрыть» из «верха» row, поэтому с помощью CSS я могу скрыть только «среднюю» и «нижнюю» строки, используя класс «hide».

Как мне удалить класс «hide» из «верхней» строки?

Это изменение, которое я сделал, чтобы добавить класс "hide" (builder_header_renderer. php):

    $result = '<div class="hide" ' . blocksy_attr_to_html($row_container_attr) . '>';
    $result .= '<div ' . blocksy_attr_to_html(array_merge([
        'class' => $container_class
    ])) . '>';

Answer 1

Если вы хотите сделать это строго с использованием JS, вы можете использовать в скрипте следующее. js файл в дочерней теме:

if(document.body.classList.contains('blog')){
    Array.from(document.querySelectorAll('header#header>div')).forEach((item, index) => {
        if(index > 0){
            item.classList.add('hide');
        }
    });
}

В функциях. php файл в свою дочернюю тему, вы можете добавить это, чтобы включить свой сценарий. js в вашу тему.

function mytheme_child_enqueue_scripts () {
    wp_enqueue_script('script-js', get_stylesheet_directory_uri().'/script.js', '', null, true);
}

add_action('wp_enqueue_scripts', 'mytheme_child_enqueue_scripts');

Если вы делаете это с помощью JavaScript, убедитесь, что выполнены следующие три предварительных условия:

1. Не добавляйте класс .hide в PHP.
2. Если он не добавлен в PHP, убедитесь, что в правильные элементы заголовка добавлен класс .hide к ним script.js.
3. Задайте его в CSS, используя header#header .hide { display: none; }

Если JS не является строгим требованием для достижения этого, @mplungjan имеет простейший и наиболее эффективный подход в комментарии к вашему вопросу, хотя, чтобы адаптировать его к вашим требованиям к странице блога, используйте это для достижения того, что вы хотите сделать:

body.blog #header [data-row=middle],
body.blog #header [data-row=bottom] {

    display:none

}