Wordpress - 覆盖主题 CSS 样式表答案

【问题标题】：Wordpress - overridding theme CSS stylesheetsWordpress - 覆盖主题 CSS 样式表
【发布时间】：2017-07-18 09:22:34
【问题描述】：

我是第一次使用 Wordpress html5blank 主题。我已经从 style.css 文件中删除了所有内容，并在我的样式和骨架网格中进行了复制。我已经单独留下了 normalize.css 文件。我正在应用我的大部分样式，但不是全部，并且无法弄清楚为什么会这样。举个例子，这是使用我自己的前端文件的主页顶部 -

这是 Wordpress 版本 -

如何确保我的自定义 CSS 样式始终在任何情况下都得到应用？我已经研究了子/父主题，但我的理解是，这不是/不应该成为这个主题的问题，因为它几乎是一个空壳。

我的 header.php 文件的头部中有这段代码 -

<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>

        <link href="//www.google-analytics.com" rel="dns-prefetch">
        <link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
        <link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/style.css" />
        <link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i' rel='stylesheet' type='text/css' />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="<?php bloginfo('description'); ?>">

        <?php wp_head(); ?>
        <script>
        // conditionizr.com
        // configure environment tests
        conditionizr.config({
            assets: '<?php echo get_template_directory_uri(); ?>',
            tests: {}
        });
        </script>

    </head>
    <body <?php body_class(); ?>>
<!--- header code --->

我查看了开发者工具，body_class 似乎应用了许多样式 - 可以删除吗？

这是 functions.php 文件中用于样式的内容，但我不确定我添加的内容是否有任何效果。

functions.php

// Load HTML5 Blank styles
function html5blank_styles()
{
    wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
    wp_enqueue_style('normalize'); // Enqueue it!

    wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('html5blank'); // Enqueue it!
}

// MW stylesheets
function load_styles() 
{
    wp_register_style('styles', '/style.css');
    wp_enqueue_style('styles', '/style.css'); // Enqueue it!
    add_action('wp_enqueue_scripts', 'load_styles');
}

这就是我在 CSS 文件顶部的内容 -

style.css

/*
Theme Name: html5blank-stable
Description: HTML5 Blank theme
Template: html5blank-stable
Author: MikeWhitehead00
*/

【问题讨论】：

get_template_directory_uri() 将从父主题获取样式表，get_stylesheet_directory_uri() 将从子主题获取样式表
@Morpheus 那么你在说什么？我需要在头中取出对模板目录的所有引用？
没有。我想说的是，如果要覆盖父主题样式，则需要使用get_stylesheet_directory_uri()。
@Morpheus 对不起，我的意思是，我是否将所有对模板的引用替换为头部的样式表？这就是问题的症结所在吗？
视情况而定。 html5blank 主题是您的父主题吗？您需要覆盖其中的任何内容吗？如果不是，请保持原样。如果是，请在您的主题中使用 get_stylesheet_directory_uri() 覆盖父主题中的 style.css。

标签： php css wordpress html

【解决方案1】：

这是在子主题中包含 CSS 的正确方法。

将此函数复制并粘贴到您的 function.php 顶部

function override_css(){
     wp_enqueue_style('custom_css_name', get_stylesheet_directory_uri().'/style.css');
}

add_action( 'wp_head', 'override_css');

【讨论】：

custom_css_name 是什么意思？我没有添加自定义名称