如何在 WP 管理仪表板（后端）的特定页面中修改 CSS

Question

我正在尝试删除 WordPress 管理面板的仪表板页面的填充和标题。使用 "Welcome Dashboard for elementor" + Elementor.

重新设计了仪表板

我试过这个脚本：

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

它不起作用。请问您有解决方法或想法吗？

Answer 1

您必须将 css 注入 wordpress header 才能真正修改 wordpress css 管理控制台。在您的 function.php 文件中添加以下内容：

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

现在要轻松找到您想要定位的元素和样式，您可以执行以下操作：

在您的浏览器中：右键单击该元素 > 检查。在源代码中找到您的元素：右键单击 > 复制 > 复制选择器

现在您可以粘贴您的选择器 in-between 样式标签并自定义它。

还有一点，你应该使用!important语句（例如：background-color:red!important）

Answer 2

通常，<body> classes 包含特定于该页面的唯一 class（例如页面名称），您可以将其作为第一个选择器添加到您的 CSS代码。

如果没有，您可以使用 admin_body_class

<body>

CSS

// 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 的 Conditional Tags 可以在您的模板文件中使用，以根据页面匹配的条件更改显示的内容。

// 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 );

如何在 WP 管理仪表板（后端）的特定页面中修改 CSS

How to modify CSS in a specific page of the WP admin dashboard (backend)

php

css

wordpress

woocommerce

elementor