如何在子主题中编辑布局.css

Question

我在子主题中工作。我在子主题中的style.css文件工作正常，但我的layout.css文件在子主题中不起作用。

父主题中layout.css的目录结构mytheme/css/layout.css

我在子主题中保留了相同的目录结构，这是mychildtheme/css/layout.css

但是当我在子layout.css中编写代码时，它不起作用。

浏览器从父主题中选取代码 （ layout.css ）

请让我知道我必须做什么，以便我的layout.css在儿童主题中正常工作。

Answer 1

样式表不同于常规主题 php 文件。有了这样的php文件，在你的主题中创建一个同名的文件就足够了，WP会知道使用它。但是，使用 css，仅创建具有相同名称的文件是不够的。您必须将其显式包含在所需的页面中。

最好的方法是在子主题的function.php文件中使用 wp_enqueue_style 函数。根据您描述的目录结构，这是执行此操作的方法：

 <?php wp_enqueue_style( 'child-theme-layout', get_stylesheet_directory_uri().'/css/layout.css' ); ?> 

Answer 2

您需要在子主题中包含布局.css文件。有关更多详细信息，您可以查看此处：

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

Answer 3

最好的解决方案是确保子主题的样式.css在父主题的布局.css之后加载。然后，您可以通过样式以通常的方式轻松覆盖所需的小东西.css

以下是一些适用于 WooThemes 产品的代码，可确保子主题 css 始终在父子主题布局之后加载.css

它属于子主题的功能.php

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}
function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');
    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array('woo-layout'), $themeVersion);
}
// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');
// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);