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

【问题标题】：How to modify CSS in a specific page of the WP admin dashboard (backend)如何在 WP 管理仪表板（后端）的特定页面中修改 CSS
【发布时间】：2020-07-04 17:04:18
【问题描述】：

我正在尝试删除 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";
}

它不工作。请问您有解决方法或想法来实现这一点吗？

【问题讨论】：

目的是从页面上移除填充和 h1 标题。应用于所有管理页面时的 CSS 代码如下：#wpcontent {padding: 0px !important;} .h1 {display: none !important;}

标签： php css wordpress woocommerce elementor

【解决方案1】：

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

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

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

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

现在您可以将选择器粘贴到样式标签之间并对其进行自定义。

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

【讨论】：

感谢您的回复 :) 我遇到的主要问题是我需要修改的#wpcontent 元素对所有 wp-admin 页面都是通用的，我只需要在其中一个页面上修改这些元素特定页面，而不是其他页面。这意味着一个 js 或 php 函数来根据 url 或标题过滤页面。

【解决方案2】：

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

如果没有，您可以使用admin_body_class 将CSS 类添加到<body> 标记中

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

【讨论】：