css - 子主题已安装并正常工作，但自定义 CSS 不工作

Question

我已经尝试了所有我能想到的方法来解决这个问题，但我完全卡住了。

我创建了一个子主题，并将其安装在 Wordpress 上。我知道我的 style.css 正在工作，因为在一些测试中查看问题所在，我能够更改子主题的名称并将其显示在我的网站上。我认为问题出在@import 上，但不知道如何解决。

这是我的 CSS 的样子:

    /*
     Theme Name:     Accio Child 
     Theme URI:      http://jowerstraining.com
     Description:    Accio Child Theme
     Template:       accio
    */

    @import url('../accio/style.css');
    @import url('../accio/css/animation.css');
    @import url('../accio/css/custom1.css');
    @import url('../accio/css/custom2.css');

我正在使用的主题有几个样式表，这就是我认为我的问题所在。关于如何解决这个问题的任何想法？

使用 MAMP 构建站点，因此无法发布链接，抱歉。

Answer 1

当客户想要使用这个主题时，我们遇到了同样的问题。我们决定将其添加到我们的 functions.php 文件中并以这种方式启动子主题 CSS:

/**
 * Add's custom styles
 *
 */

function theme_styles() {
    wp_enqueue_style( 'child-theme-styles', get_stylesheet_uri() );
}

add_action('wp_enqueue_scripts', 'theme_styles');

请注意，一开始我们确实遇到了麻烦，因为我们使用的是 get_stylesheet_directory_uri()，它返回的是 accio 主题文件夹的路径，而不是我们的子主题文件夹。我们发现 get_stylesheet_uri() 为我们提供了 style.css 文件的正确路径。