Wordpress 子主题 style.css 不工作答案

【问题标题】：Wordpress child theme style.css not workingWordpress 子主题 style.css 不工作
【发布时间】：2017-02-19 21:26:00
【问题描述】：

我创建了一个与父主题格式相同的文件结构。我的父主题名为 Alpine，在 Alpine 中有一个 functions.php 和 style.css 文件。似乎没有任何额外的 style.css 文件。

我创建了一个名为 Alpine-child 的目录，并在其中创建了一个 functions.php 和 style.css 文件。

我无法弄清楚为什么我对子 style.css 所做的任何更改都没有实现，但是当我在父 style.css 中进行相同的更改时它们就实现了

这是我的孩子 style.css：

/*
 Theme Name:   Alpine Child
 Theme URI:    http://www.creative-ispiration.com/wp/alpine/
 Description:  My first child theme, based on Alpine
 Author:       MilkshakeThemes
 Author URI:   http://themeforest.net/user/milkshakethemes
 Template:     Alpine
 Version:      1.0.0
 Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, editor-style, featured-images, post-formats, rtl$
 Text Domain: alpine-child
*/

这是我的子functions.php文件：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

【问题讨论】：

你能分享一个你项目的链接吗？
我目前在 AWS EC2 实例上托管网站。我一直在通过 SSH 编辑网站。这是目前的开发地址：ec2-52-211-25-124.eu-west-1.compute.amazonaws.com

标签： php wordpress

【解决方案1】：

从 Divi 4.4.1 更新到 Divi 4.10.8 后，子主题父 CSS 无法正常工作。我在我的网站上做了一些研究，发现 Divi style.css 文件是空的，只有标题信息（更新后），并且显示 CSS 所需的代码现在位于不同的文件中（style-static.min.css）我将 Child Theme functions.php 文件中的文件名从 style.css 更改为 style-static.min.css。这解决了我的问题，并且 CSS 正在工作。

查看我使用的代码下方：

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style-static.min.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

【讨论】：

【解决方案2】：

我的子主题目前有以下代码：

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

//load child theme custom CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}

?>

以前，我使用的代码只有//load child theme custom CSS 部分之前的第一部分，并且无法获取自定义CSS。我已经添加了上面建议的代码@jrod 并且它有效。我需要和你们确认我的孩子主题代码是完整的，我不需要添加任何其他内容。我不确定这是否也获取了我在子主题 JS 文件中的自定义 JS 文件。

【讨论】：

【解决方案3】：

这对我有用：

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'twentyseventeen-style'; 
    $child_style = 'twentyseventeen-child-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( $child_style, get_stylesheet_uri() );
}
?>

其他答案都没有。

【讨论】：

谢谢。这对我有用，并帮助我意识到为什么没有其他方法也有效。

【解决方案4】：

Craig Hick 的回答对我有用，我也意识到为什么我的 Wordpress 文档中的默认代码不起作用。

  <?php 
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); 
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    ); }

在我的例子中，wp_get_theme()->get('Version') 行返回了与父主题相同的版本号 1.0.0。所以我只是将子主题 css 版本号更改为 1.0.1 并且它起作用了。

【讨论】：

【解决方案5】：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

【讨论】：

【解决方案6】：

看看你的<head> 标签。更重要的是查看样式表的顺序。

首先添加子主题中的样式，然后添加父主题中的所有样式。这将导致父主题的样式覆盖您的子主题样式。

您可以使用add_action 的第三个参数将my_theme_enqueue_styles 函数的优先级更改为在父函数之后运行。这将使您的子主题样式最后排入队列，并允许 CSS 按预期工作。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>

【讨论】：

我可以将上面的php复制到我的functions.php文件中以更改顺序吗？
@GavinReynoldson 是的。我刚刚复制了您的原始代码并为您的add_action 呼叫添加了优先级。注意add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 ); 现在有第三个参数，即优先级。这已设置为 11，因为 10 是默认优先级。
我已经将以上内容添加到functions.php中，仍然没有任何变化。当我检查head 时，最后一个要加载的文件是父样式。我根本看不到 alpine-child/style.css 已加载。
@GavinReynoldson 我很抱歉。您的函数正在运行，但我发布的代码中有错误的样式表。我已更新我的答案以添加您的子样式表而不是您的父样式表。
太棒了。请将此答案标记为正确，以便此问题对其他人有所帮助。

【解决方案7】：

您需要将子主题 style.css 加入队列，因此您的功能应该是：

function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

看看documentation。

【讨论】：

不幸的是，这也不起作用。我实际上尝试了很多变体，还尝试使用@import。似乎没有任何效果。我已向主题开发人员发送消息以寻求支持。谢谢
我认为 #get_stylesheet_directory_uri() 。 '/style.css' # 当你想要子目录时，可能会引用父目录。
@CraigHicks，它指的是活动主题，在这种情况下是子主题。
@CraigHicks，如果你看一下get_stylesheet_uri()，它内部调用了函数get_stylesheet_directory_uri()，所以它们不能返回不同主题的信息:)
@AvagSargsyan - 感谢您的评论。我切换到一个静态博客系统：“Hexo”，它更简单但适合我的需要。我想更深入地了解为什么config above 可以工作，而你的却不能。我相信你的话，get_stylesheet_uri() 不是原因，所以肯定还有另一个原因。但是现在 Wordpress 还很遥远。我很抱歉。