Wordpress CSS 样式未加载

Question

I'm learning to develop a simple WordPress theme from an online course on Udemy. I'm very new to this and I am having difficulty trying to load my stylesheet and fonts.

The following snippet has been placed into my functions.php file

// Add StyleSheets
function gymfitness_scripts() {
    // Normalize CSS
    wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css', array(), false, 'screen'); 

    // Google font
    wp_enqueue_style('googlefont', 'https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700,900|Staatliches&display=swap', array(), false, 'screen');

    // Main Stylesheet
    wp_enqueue_style('style', get_stylesheet_directory_uri(), array('normalize', 'googlefont'), false, 'screen');
}

// Hook the StyleSheet
add_action('wp_enque_scripts', 'gymfitness_scripts');

And the following has been placed in my CSS file.

/*
Theme name: Gym Fitness
Theme URL: 
Author: Jonathan Cajepe
Author URL: 
Description: Theme designed for the Gym
Version: 1.0
Licence: GNU  General Public Licence v2 or later
Licence URL: http://www.gnu.org/licenses/gpl-2.0.html
Tags: CSS Grid, Flexbox ready, mobile first, gym theme
Text Domain: gymfitness
*/

body {
    background-color: #ff0000;
}

:root {
    /** Fonts **/
    --mainFont : 'Staatliches', cursive;
    --textFont: 'Open Sans', sans-serif;
    --secondaryFont : 'Raleway', sans-serif;
 
    /** Colors **/
    --primary : #FF5B00;
    --darkGray: #2F2E2E;
    --lightGray: #EBEBEB;
 
    --white: #ffffff;
    --black: #000000;
 }


body {
    font-family: var(--textFont);

I can't see why my styles and fonts aren't loading. I've been made aware that this online course material is out of date.

Please see attached image to view my file structure File Structure

I'm just trying to load google fonts and simply change the background to red. And this is the result

Answer 1

看起来 wp_enqueue_script 钩子和其他函数的代码拼写错误，

请在下面找到修改后的脚本钩子函数

// Add StyleSheets
function gymfitness_scripts() {
    // Normalize CSS
    wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css', array(), false, 'all'); 

    // Google font
    wp_enqueue_style('googlefont', 'https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700,900|Staatliches&display=swap', array(), false, 'all');

    // Main Stylesheet
    wp_enqueue_style('style', get_stylesheet_uri(), array('normalize', 'googlefont'), false, 'all');
}

// Hook the StyleSheet
add_action('wp_enqueue_scripts', 'gymfitness_scripts');

替换上面的代码并检查，

将“wp_enque_scripts”替换为“wp_enqueue_script”挂钩
将代码中的 get_stylesheet_directory_uri() 替换为 get_stylesheet_uri() 函数。
将 wp_enqueue_style 函数的最后一个参数替换为“all”而不是“screen”

Wordpress CSS 样式未加载

Wordpress CSS styles not loading

css

wordpress

hook