php - 用插件样式覆盖主题样式

问题描述

我正在编写一个自定义 WordPress 插件，我正在使用带有 Elementor 的 OceanWP 主题，并且正在尝试将 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 );

    }

标签： phpcsswordpresspluginsenqueue

php - 用插件样式覆盖主题样式

问题描述

解决方案

推荐阅读