用插件样式覆盖主题样式

问题描述

我正在编写一个自定义的wordpress插件，正在将OceanWP Theme与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','cmmc_scripts'));

            add_shortcode("sme-cmmc-form","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/[email protected]/dist/umd/popper.min.js',array('jquery'),true);
            wp_enqueue_script('bootstrap_js','https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js',true);

            wp_enqueue_script('cmmc_js',plugin_dir_url( __FILE__ ) . 'assets/js/app.js','1.0' );
            //wp_enqueue_style('custom_styles',plugins_url('/assets/css/styles.css',__FILE__));
            
        }

        public function cmmc_styles() {

                wp_register_style('bootstrap_css','all' );
                wp_enqueue_style('bootstrap_css');
                wp_enqueue_style('custom_styles',__FILE__));

        }

有人可以告诉我，即使是仅用于此插件，还是可以暂时取消此主题的样式吗？

编辑：从主题中添加排队的样式和脚本

            add_action( 'wp_enqueue_scripts',array( 'OCEANWP_Theme_Class','theme_css' ) );

            // Load his file in last.
            add_action( 'wp_enqueue_scripts','custom_style_css' ),9999 );

            // Remove Customizer CSS script from Front-end.
            add_action( 'init','remove_customizer_custom_css' ) );

            // Load theme js.
            add_action( 'wp_enqueue_scripts','theme_js' ) );

/**
     * Load front-end scripts
     *
     * @since   1.0.0
     */
    public static function theme_css() {

        // Define dir.
        $dir           = OCEANWP_CSS_DIR_URI;
        $theme_version = OCEANWP_THEME_VERSION;

        // Remove font awesome style from plugins.
        wp_deregister_style( 'font-awesome' );
        wp_deregister_style( 'fontawesome' );

        // Load font awesome style.
        wp_enqueue_style( 'font-awesome',OCEANWP_THEME_URI . '/assets/fonts/fontawesome/css/all.min.css','5.11.2' );

        // Register simple line icons style.
        wp_enqueue_style( 'simple-line-icons',$dir . 'third/simple-line-icons.min.css','2.4.0' );

        // Register the lightBox style.
        wp_enqueue_style( 'magnific-popup',$dir . 'third/magnific-popup.min.css','1.0.0' );

        // Register the slick style.
        wp_enqueue_style( 'slick',$dir . 'third/slick.min.css','1.6.0' );

        // Main Style.css File.
        wp_enqueue_style( 'oceanwp-style',$dir . 'style.min.css',$theme_version );

        // Register hamburgers buttons to easily use them.
        wp_register_style( 'oceanwp-hamburgers',$dir . 'third/hamburgers/hamburgers.min.css',$theme_version );

        // Register hamburgers buttons styles.
        $hamburgers = oceanwp_hamburgers_styles();
        foreach ( $hamburgers as $class => $name ) {
            wp_register_style( 'oceanwp-' . $class . '',$dir . 'third/hamburgers/types/' . $class . '.css',$theme_version );
        }

        // Get mobile menu icon style.
        $mobileMenu = get_theme_mod( 'ocean_mobile_menu_open_hamburger','default' );

        // Enqueue mobile menu icon style.
        if ( ! empty( $mobileMenu ) && 'default' !== $mobileMenu ) {
            wp_enqueue_style( 'oceanwp-hamburgers' );
            wp_enqueue_style( 'oceanwp-' . $mobileMenu . '' );
        }

        // If Vertical header style.
        if ( 'vertical' === oceanwp_header_style() ) {
            wp_enqueue_style( 'oceanwp-hamburgers' );
            wp_enqueue_style( 'oceanwp-spin' );
        }

    }

    /**
     * Returns all js needed for the front-end
     *
     * @since 1.0.0
     */
    public static function theme_js() {

        // Get js directory uri.
        $dir = OCEANWP_JS_DIR_URI;

        // Get current theme version.
        $theme_version = OCEANWP_THEME_VERSION;

        // Get localized array.
        $localize_array = self::localize_array();

        // Comment reply.
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }

        // Add images loaded.
        wp_enqueue_script( 'imagesloaded' );

        // Register nicescroll script to use it in some extensions.
        wp_register_script( 'nicescroll',$dir . 'third/nicescroll.min.js',array( 'jquery' ),$theme_version,true );

        // Enqueue nicescroll script if vertical header style.
        if ( 'vertical' === oceanwp_header_style() ) {
            wp_enqueue_script( 'nicescroll' );
        }

        // Register Infinite Scroll script.
        wp_register_script( 'infinitescroll',$dir . 'third/infinitescroll.min.js',true );

        // WooCommerce scripts.
        if ( OCEANWP_WOOCOMMERCE_ACTIVE
            && 'yes' !== get_theme_mod( 'ocean_woo_remove_custom_features','no' ) ) {
            wp_enqueue_script( 'oceanwp-woocommerce',$dir . 'third/woo/woo-scripts.min.js',true );
        }

        // Load the lightBox scripts.
        wp_enqueue_script( 'magnific-popup',$dir . 'third/magnific-popup.min.js',true );
        wp_enqueue_script( 'oceanwp-lightBox',$dir . 'third/lightBox.min.js',true );

        // Load minified js.
        wp_enqueue_script( 'oceanwp-main',$dir . 'main.min.js',true );

        // Localize array.
        wp_localize_script( 'oceanwp-main','oceanwpLocalize',$localize_array );

    }

解决方法

很难说如何在不看主题源代码的情况下使脚本出队。无论如何，通常您只需要等待主题完成工作，然后挂接到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
    }
}

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

,

如果您使用相同的CSS类名，则在CSS文件中，只需在分号前将！important添加到要强制使用的属性中。

,

有很多方法可以让您在加载其他样式表后加载样式表。您已经尝试了几种方法，但是父主题的优先级是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时，可以为正在注册/排队的样式表指定依赖项-即样式表所需的其他样式表。这意味着您要注册的样式表要在其所依赖的之后之后才会加载。

为此，您为必须首先加载的样式表传递一个 handles 数组。

// 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__),/* array of dependencies */
);