Question

我第一次使用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
*/

Answer 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');

Wordpress - 覆盖主题CSS样式表

1 个答案: