为什么我的网站无法阅读CSS和JavaScript文件?它显示未能加载资源(404)



我是PHP的初学者。我正在使用WordPress开发网站。目前,我正在尝试为WordPress创建自己的主题。现在,我面临的问题是无法加载CSS文件中的CSS以及JavaScript。有人可以帮助我解决问题吗?

header.php

<html lang="en">
<head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script>
    var template_dir_js = "<?php echo get_template_directory_uri();?>";
    </script>
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.dropotron.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrolly.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel-layers.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/init.js" rel="stylesheet" type="text/javascript"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-xlarge.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />

    </noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">

functions.php

    <?php
add_theme_support('menus');
function register_theme_menus() {
    register_nav_menus(array( 'primary-menu' => __('Primary Menu')));
}
add_action('init', 'register_theme_menus'); 
function wpt_theme_styles() {
    wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css'); 
    wp_enqueue_style('normalize_css', get_template_directory_uri().'/css/style-xlarge.css');
    wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css'); 
    wp_enqueue_style('main_css', get_template_directory_uri().'/css/style-mobile.css'); 
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles'); 
function wpt_theme_js() {
    wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array('jquery'), '1.1', true ); 
    wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array('jquery'), '1.1', true ); 
    wp_enqueue_script( 'main_js', get_template_directory_uri().'/js/jquery.scrolly.min.js', array('jquery'), '1.1', true );
    wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array('jquery'), '1.1', true );
    wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array('jquery'), '1.1', true ); 
    wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array('jquery'), '1.1', true );  
    wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/scrollgress.min.js', array('jquery'), '1.1', true ); 
    }
add_action('wp_enqueue_script', 'wpt_theme_js'); 
?>

index.php

<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

文件目录修改后错误

修复:

  • 您的style.css文件不在名为css的文件夹中,因此将<link>标签更新为:<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
  • <script>标签不能具有rel="stylesheet"属性。
  • <!-- [if lte IE 8]...标签可能也从css目录中使用,因此也可以在其路径中引用get_template_directory_url()
  • 仅在<head>中引用css文件,然后将<script>标签放在文件底部,在</body>标签之前。

完全固定的header.php

<html lang="en">
<head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script>
    var template_dir_js = "<?php echo get_template_directory_uri();?>";
    </script>
    <!--[if lte IE 8]><script src="<?php echo get_template_directory_uri();?>/css/ie/html5shiv.js"></script><![endif]-->
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrolly.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/skel-layers.min.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri();?>/js/init.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-xlarge.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">

最新更新