Wordpress子主题CSS不会覆盖父CSS

时间:2019-01-23 09:05:54

标签: javascript php css wordpress

我正在使用mies-child主题,但问题是我看不到CSS更改会影响我的网站。

这是我的孩子style.css的样子:

/*
Theme Name: Mies Child
Theme URI: http://pixelgrade.com/demos/mies
Author: PixelGrade Team
Author URI: http://pixelgrade.com
Template: mies
Description: MIES is a front line parallax Architecture WordPress Theme prized for allowing you to present your activity within a delightful and captivating experience. It's perfect for a full range of presentations and portfolio projects of designers, architects or photographers.
License: Themeforest Split Licence
License URI: -
Text Domain: mies_txtd
Domain Path: /languages/
Tags: white, light, dark, responsive-layout, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, theme-options, translation-ready
*/

这是我的孩子的functions.php文件:

<?php
/*
 * ===== Theme Translation =====
 * Load the translations from the child theme if present
 */
add_action( 'before_wpgrade_core', 'mies_child_theme_setup' );
function mies_child_theme_setup() {
    load_child_theme_textdomain( 'mies_txtd', get_stylesheet_directory() . '/languages' );
}

/**
 * ===== Loading Resources =====
 * Add all the extra static resources of the child theme - right now only the style.css file
 */

function mies_child_enqueue_styles() {
    // Here we are adding the child style.css while still retaining all of the parents assets (style.css, JS files, etc)
    wp_enqueue_style( 'mies-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('wpgrade-main-style') //make sure the the child's style.css comes after the parents so you can overwrite rules
    );
}

add_action( 'wp_enqueue_scripts', 'mies_child_enqueue_styles' );

3 个答案:

答案 0 :(得分:1)

您尝试将父母的入队风格$handle wpgrade-main-style 添加为孩子入队的依赖项 $deps 甚至还没有加入父母风格的脚本。

首先使用 get_template_directory_uri() 检索您的父样式并将其排入队列,然后使用 get_stylesheet_directory_uri() 检索您的子样式并将其添加到父样式中子入队脚本中的依赖项 $deps

function mies_child_styles() { 
    
    // enqueue parent
    wp_enqueue_style( 'wpgrade-main-style', trailingslashit( get_template_directory_uri() ) . '/style.css', array(  );
   
    // enqueue child
    wp_enqueue_style( 'mies-child-style', trailingslashit( get_stylesheet_directory_uri() . '/style.css', array('wpgrade-main-style') );
}
add_action( 'wp_enqueue_scripts', 'mies_child_styles' );

答案 1 :(得分:0)

使用此代码。

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' 
);
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . 
'/styles/child-style.css', array( 'parent-style' ) );
}

还要检查这些事情

  1. 将PHP_INT_MAX作为优先级,以便最后运行。

答案 2 :(得分:0)

我在我的项目中确实如此。

    function mies_child_enqueue_styles() {
        //enqueue parent styles
        wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');

        // enqueue child styles
        wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', 
        array('parent-theme'));
    }
    add_action('wp_enqueue_scripts', 'mies_child_enqueue_styles');