0

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

    }
4

3 回答 3

0

If you're using the same css class names, in your css file just add !important before the semi-colon to the attributes you want to force.

于 2020-08-15T11:32:14.837 回答
0

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

确保并仅为该特定页面执行代码

于 2020-08-14T15:11:10.120 回答
0

在加载其他样式表之后，您可以通过多种方式来加载您的样式表。您已经尝试了几种方法，但是父主题的优先级非常高，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_styleorwp_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 */
);
于 2020-08-17T10:09:23.917 回答