Как изменить CSS на определенной странице панели администратора WP (бэкенд)

Я пытаюсь удалить отступы и заголовок страницы панели администратора WordPress. Панель инструментов была переработана с помощью панели приветствия для elementor + Elementor.

Я попробовал приведенный ниже код .js, он не работает. У вас есть исправления или идеи для достижения этого, пожалуйста? Спасибо. Эд

var path = window.location.pathname;
if((path == "/wp-admin/" || path == "/wp-admin" || path == "/wp-login.php") && domainURL+path)
{
    document.getElementsByClassName("h1").style.display = "none";
}

wordpress php css woocommerce elementor
person Edouard    schedule 04.07.2020    source источник
comment
Цель состоит в том, чтобы удалить отступы и заголовок h1 со страницы. Код CSS, работающий при применении ко ВСЕМ административным страницам, выглядит следующим образом: #wpcontent {padding: 0px !important;} .h1 {display: none !important;}   -  person Edouard    schedule 04.07.2020

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны внедрить css в заголовок WordPress, чтобы фактически изменить консоль администратора wordpress css. В файле function.php добавьте следующее:

<?php function theme_admin_css() {
echo '
<style media="screen">
/* ... Your custom css goes here ... */
</style>
'; }
add_action( 'admin_head', 'theme_admin_css' ); ?>

Теперь, чтобы легко найти нужный элемент и стиль, вы можете сделать следующее:

В браузере: Щелкните элемент правой кнопкой мыши › Проверить. Найдите свой элемент в исходном коде: Щелкните правой кнопкой мыши > Копировать > Копировать селектор

Теперь вы можете вставить свой селектор между тегом стиля и настроить его.

Еще одна вещь, вы должны использовать оператор !important (например: background-color:red!important)

person amarinediary    schedule 04.07.2020
comment
Спасибо за ответ :) Основная проблема, с которой я столкнулся, заключается в том, что элемент #wpcontent, который мне нужно изменить, является общим для всех страниц wp-admin, и мне нужно изменить эти элементы только на одной конкретной странице, а не на другой. те. Это означает, что функция js или php для фильтрации страницы, например, на основе URL или заголовка. - person Edouard; 06.07.2020

arrow_upward
2
arrow_downward

Как правило, классы <body> содержат уникальный класс, специфичный для этой страницы (например, имя страницы), вы можете добавить его в качестве первого селектора в свой код CSS.

  • Если нет, вы можете добавить классы CSS к тегу <body> с помощью admin_body_class.
// Backend
function filter_admin_body_class( $classes ) {  
    // Current url
    $current_url = '//' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    
    // Get last part from url. Expl: index.php
    $last_part = basename( parse_url( $current_url, PHP_URL_PATH ) );
    
    if ( $last_part == 'index.php' ) {
        // String
        $classes .= 'my-custom-backend-class';
    }
    
    return $classes;
}
add_filter( 'admin_body_class', 'filter_admin_body_class', 10, 1 );

Дополнительно: для внешних страниц вы можете использовать body_class.

  • Примечание. условные теги WooCommerce и WordPress можно использовать в файлах шаблонов для изменить отображаемый контент в зависимости от условий, которым соответствует страница.
// Frontend
function filter_body_class( $classes ) {
    // Returns true on the cart page.
    if ( is_cart() ) {
        // Array
        $classes[] = 'my-custom-frontend-class';
    }
    
    return $classes;
}
add_filter( 'body_class', 'filter_body_class', 10, 1 );
person 7uc1f3r    schedule 04.07.2020