使用插件样式覆盖主题样式

Question

我正在编写一个自定义 WordPress 插件，我正在将 OceanWP 主题与 Elementor 一起使用，并尝试排队/注册 Bootstrap 4.5 样式/脚本以及我自己的自定义样式/脚本。然而，OceanWP 的样式仍然优先使用，而不是我的样式/脚本。目前，我正在尝试通过提高 add_action 挂钩中的优先级来覆盖主题资产，但没有任何运气。我正在尝试显示自定义的多部分表单并使用短代码将其显示在页面上。public function __construct()        {            //set dirpath            $this->_dirpath = dirname(__FILE__);            add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 9999);            add_action('wp_footer', array($this, 'cmmc_scripts'));            add_shortcode("sme-cmmc-form", array($this, "displayCmmcForm"));        }        public function cmmc_scripts()        {            ///wp_enqueue_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all');            wp_enqueue_script('popper_js', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', array('jquery'), NULL, true);            wp_enqueue_script('bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), NULL, true);            wp_enqueue_script('cmmc_js', plugin_dir_url( __FILE__ ) . 'assets/js/app.js', array('jquery'), '1.0' );            //wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));                    }        public function cmmc_styles() {                wp_register_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all' );                wp_enqueue_style('bootstrap_css');                wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));        }有人可以告诉我如何覆盖主题样式，即使它只是针对这个插件，或者暂时使该单页的样式出列吗？

Answer 1

如果您使用相同的 css 类名，则在 css 文件中只需在要强制使用的属性的分号之前添加 !important 即可。

Answer 2

很难说如何在不查看主题源代码的情况下使脚本出队。无论如何，通常你只需要等到主题完成它的工作，挂接到 wp 并删除搜索其句柄名称的样式。像这样的东西：

add_action('after_setup_theme','alter_styles');

function alter_styles(){

    wp_dequeue_style();

    wp_dequeue_script();

}

相反，谈到您的代码，第一个问题是：您确定您在正确的时间、正确的位置加载了该代码，还是它根本就被执行了？你可以这样做：

add_action('template_redirect','my_template_redirect');

function my_template_redirect(){

    if (is_page('your_page')){

        // Load class / do stuff with scripts/styles

    }

}

确保仅针对该特定页面执行代码

Answer 3

有多种方法可以让您的样式表在加载其他样式表后加载。您已经尝试了几种方法，但是父主题的优先级非常高9999，因此您需要使用更高的主题，否则它将无法工作。

1. 优先权

9999您在 中使用优先级add_action，但是如果您查看父主题，它会使用：

add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );

您的代码的优先级实际上并不高于父主题，因此您需要再次提高，例如

add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 10000);

2.出队（注意，需要匹配入队时使用的值）

您说出列对您不起作用，但请注意，当您使样式出列时，优先级决定了它何时运行 - 就像您入队时一样 - 因此您需要使用比入队时使用的优先级更高的优先级。它还必须使用相同的钩子（或更高版本的钩子）。

正如我们在上面看到的，您需要以高于9999它们排队的优先级来执行此操作，例如

function dequeue_oceanwp_styles() {

    wp_dequeue_style('oceanwp-style');

    wp_deregister_style('oceanwp-style'); 

}

/* Now call this function with a higher priority than 9999 */

add_action( 'wp_enqueue_scripts', 'dequeue_oceanwp_styles', 10000);

3. 依赖关系

如果这不起作用，您可以在样式之间设置依赖关系以强制执行顺序。

当您使用wp_register_style或 时wp_enqueue_style，您可以指定您正在注册/排队的样式表的依赖关系 - 即您的样式表所需的其他样式表。这意味着您正在注册的样式表只有在它所依赖的样式表之后才会加载。

为此，您需要传递必须首先加载的样式表的句柄数组，例如

// create an array with the handles of the stylesheets you want to load before yours

$dependencies = array('oceanwp-style', 'oceanwp-hamburgers', /* etc. */ ); 

/* Noew pass this in as the dependencies for your stylesheets */

wp_register_style('bootstrap_css', 

    'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', 

    $dependencies, /* array of dependencies */

    NULL, 'all' );

wp_enqueue_style('bootstrap_css');

/* Add bootstrap to the dependencies, if your custom_styles needs it */

$dependencies[] = 'bootstrap_css'; 

wp_enqueue_style('custom_styles', 

    plugins_url('/assets/css/styles.css', __FILE__),

    $dependencies, /* array of dependencies */

);