定制管理员css的好方法吗?

时间:2018-11-19 作者:joq3

我已经修改了管理和登录页面上的CSS。但问题是,有时自定义CSS最后加载,这使得更改可见。CSS可以在页面加载期间更改。

有没有办法在页面呈现之前编辑CSS?我无法编辑核心和插件文件,因为我希望能够在不破坏它的情况下进行更新。

有什么建议吗?

2 个回复
SO网友:RiddleMeThis

你用的是什么主题?

我可能会先做一个child theme. 这将使您能够更好地控制何时加载样式。下面是加载父主题样式,然后加载子主题样式的示例。

function my_theme_enqueue_styles() {

    $parent_style = \'parent-style\'; // This is \'twentyfifteen-style\' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' );
    wp_enqueue_style( \'child-style\',
        get_stylesheet_directory_uri() . \'/style.css\',
        array( $parent_style ),
        wp_get_theme()->get(\'Version\')
    );
}
add_action( \'wp_enqueue_scripts\', \'my_theme_enqueue_styles\' );
如果您需要添加专门用于管理区域的样式,可以将以下样式排入队列。。。

function my_admin_styles(){
    wp_enqueue_style(
        \'admin_css\', 
        get_stylesheet_directory_uri() . \'/css/my-admin.css\', array(), filemtime( get_stylesheet_directory() . \'/css/my-admin.css\') 
    );
}

add_action(\'admin_enqueue_scripts\', \'my_admin_styles\');
上述代码将包含在子主题的函数中。php。

SO网友:coolpasta

您必须打开生成CSS的地方,这可能很复杂,也可能很简单。这完全取决于您决定如何基于业务逻辑生成CSS。

我不知道你是如何加载CSS的,无论如何,我是这样做的-首先,创建你的页面:

public function addAdminMenuPage()
{
    $this->hook_suffix = add_theme_page(
            esc_html__( \'Page Title\', \'my-project\' ),
            esc_html__( \'Page Title\', \'my-project\' ),
            \'manage_options\', \'my-page-handle\',
            [ $this, \'myPageContent\' ]
        );
}
add_action( \'admin_menu\', [$this, \'addAdminMenuPage\' ], 80 );
然后,enqueue its CSS completely based on the suffix, making sure that your CSS only loads on that page, in the correct order:

public function generatePageCSS( $page )
{
    //Very important, will only load your CSS on the right page, not in all the admin area.
    if( !$page == $this->hook_suffix ) {
        return;
    }
    //This will allow you to keep a lot of the logic in different parts.
    do_action( \'page-\' . $page . \'-css\', $page );
}

add_action( \'admin_enqueue_scripts\', [$this, \'enqueuePageCSS\'] );
这意味着对于所有CSS逻辑,您将使用page-my-page-handle-css, 它可以是多个CSS队列、对页面的内联写入等等。但是现在你把所有的CSS都按正确的顺序设置好了,这似乎是你最初的问题。

因此,您正在将页面添加到admin_menu 钩子,然后将脚本排入admin_enqueue_scripts 钩住,检查生成的后缀是否来自add_theme_page 匹配从admin_enqueue_scripts, 您运行此操作的“主要类”是:

class MyAdminPage
{
    public function __construct()
    {
        add_action( \'admin_menu\', [$this, \'addAdminMenuPage\' ], 80 );
        add_action( \'admin_enqueue_scripts\', [$this, \'enqueuePageCSS\'] );
    }
    ..
    ..
    //Here you\'ll put the hooking functions
    ..
    ..
}
再说一次,只要你能保持generatePageCSS 用钩子“打开”,也许你可以走了。

结束

相关推荐

子主题不使用父主题css/样式/Formatting?

我正在制作一个简单的儿童主题\"Grow Minimal\" 主题我创建了一个文件夹,grow-minimal-child 并添加functions.php 和style.css:functions.php:function my_theme_enqueue_styles() { $parent_style = \'grow-thinkup-style-minimal\'; // This is \'twentyfifteen-style\' for the Twenty Fif