为什么我不能加载CSS文件和JavaScript文件？

Question

I'm beginner for developing the website. 我是开发网站的初学者。 Would someone help me to solve these problems? 有人可以帮我解决这些问题吗？ The directory for the file is correct but don't know why I'm still getting the error. 该文件的目录是正确的，但是不知道为什么我仍然收到错误消息。 Wordpress cannot load the CSS file as well as the JavaScript. Wordpress无法加载CSS文件和JavaScript。 I have used two techniques but still cannot work which can be shown as below: Anyone can teach me why I cannot load CSS file and Javascript file although using these techniques. 我已经使用了两种技术，但是仍然无法正常工作，如下所示：任何人都可以教我为什么尽管使用这些技术却无法加载CSS文件和Javascript文件。

First Technique that I used is <?php echo get_template_directory_uri();?> and <?php bloginfo('template_directory');?> 我使用的第一个技术是<?php echo get_template_directory_uri();?> and <?php bloginfo('template_directory');?>

Header.php 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="" />
        <!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
        <script>
            var template_dir_js = "<?php echo get_template_directory_uri();?>";
        </script>
            <!--[if lte IE 8]><script src="<?php bloginfo('template_directory');?>/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/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>
            <!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->    
            <meta charset="utf-8">
            <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-desktop.css" />
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/font-awesome.min.css" />
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-1000px.css" />
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />

    </head>

Second Technique that I used is wp_enqueue_script and wp_enqueue_style 我使用的第二种技术是wp_enqueue_script和wp_enqueue_style

Header.php header.php文件

<html lang="en">
<head>
    <title>Untitled</title>
    <?wp_head();?>
</head>

Footer.php Footer.php

    ...
<?php wp_footer();?>
    </body>
</html>

Functions.php 的functions.php

<?php

function wpt_theme_styles() {   
wp_enqueue_style('abs',get_template_directory_uri().'/css/font-awesome.min.css',array(),'1.0.0','all'); 
wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css',array(),'1.0.0','all'); 
wp_enqueue_style('normali_css', get_template_directory_uri().'/css/style-1000px.css',array(),'1.0.0','all');
wp_enqueue_style('normalze1_css', get_template_directory_uri().'/css/style-mobile.css',array(),'1.0.0','all');
wp_enqueue_style('normalze_css', get_template_directory_uri().'/css/style-desktop.css',array(),'1.0.0','all');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css',array(),'1.0.0','all'); 
wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array(), '1.0.0', true ); 
wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array(), '1.0.0', true ); 
wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array(),'1.0.0', true );
wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array(), '1.0.0', true ); 
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array(), '1.0.0', true );    

wp_enqueue_style('abs');
wp_enqueue_style('foundation_css');
wp_enqueue_style('normali_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_script('modernizr_js');
wp_enqueue_script('foundation_js');
wp_enqueue_script('normalze1_css');
wp_enqueue_script('normalze_css');
wp_enqueue_script('main_css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles'); 
?>

error File Directory 错误文件目录

When I view the source 当我查看源代码时

<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.min.js" type="text/javascript"></script>
        <script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.dropotron.min.js" type="text/javascript"></script>
        <script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel.min.js" type="text/javascript"></script>
        <script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel-layers.min.js" type="text/javascript"></script>
        <script src="http://localhost/wordpress/wp-content/themes/momentum/js/init.js" type="text/javascript"></script>
        <!--[if lte IE 8]><link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/momentum/css/ie/v8.css" /><![endif]-->  
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-desktop.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-mobile.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-1000px.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/skel.css" />

that means the URL is correct 这表示网址正确

Answer 1

i use the following configuration: 我使用以下配置：

header.php header.php文件

<!DOCTYPE html>
<html lang="en">
<head>
...
...
...
<link href="<?php echo get_bloginfo('template_url'); ?>/css/mycss.css" rel="stylesheet">
<script src="<?php echo get_bloginfo('template_url'); ?>/js/myjs.js"></script>
...
...
<?php
/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head> such
 * as styles, scripts, and meta tags.
 */
wp_head();
?>
</head>
<div class="myheader">
...
...
</div>

index.php (or page.php, single.php, etc...) index.php（或page.php，single.php等）

<?php get_header(); ?>
<div class="mycontainer">
....
....
....
</div>
<?php get_footer(); ?>

footer.php footer.php

<div class="myfooter">
...
...
...
</div>
<?php
    /* Always have wp_footer() just before the closing </body>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to reference JavaScript files.
     */

    wp_footer();
?>
</body>
</html>

im not using anything in functions.php to do this, just in the required files 我没有在functions.php使用任何东西来执行此操作，只是在所需的文件中

为什么我不能加载CSS文件和JavaScript文件？

问题描述

1 个解决方案

解决方案1
0 2017-03-03 12:24:10

为什么我不能加载CSS文件和JavaScript文件？

问题描述

1 个解决方案

解决方案1 0 2017-03-03 12:24:10

解决方案1
0 2017-03-03 12:24:10