Question

我正在编写一个自定义的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', 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__));

        }

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

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

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

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

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

            // Load theme js.
            add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', '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', false, '5.11.2' );

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

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

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

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

        // Register hamburgers buttons to easily use them.
        wp_register_style( 'oceanwp-hamburgers', $dir . 'third/hamburgers/hamburgers.min.css', false, $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', false, $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', array( 'jquery' ), $theme_version, 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', array( 'jquery' ), $theme_version, true );
        }

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

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

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

    }

Answer 1

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

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

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时，可以为正在注册/排队的样式表指定依赖项-即样式表所需的其他样式表。这意味着您要注册的样式表要在其所依赖的之后之后才会加载。

为此，您为必须首先加载的样式表传递一个 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__),
    $dependencies, /* array of dependencies */
);

用插件样式覆盖主题样式

3 个答案: