Question

我是开发网站的初学者。有人会帮我解决这些问题吗？该文件的目录是正确的，但不知道为什么我仍然收到错误。 Wordpress无法加载CSS文件以及JavaScript。我使用了两种技术，但仍然无法工作，如下所示：任何人都可以教我为什么我不能加载CSS文件和Javascript文件，尽管使用这些技术。

我使用的第一种技术是<?php echo get_template_directory_uri();?> and <?php bloginfo('template_directory');?>

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>

我使用的第二种技术是wp_enqueue_script和wp_enqueue_style

的header.php

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

Footer.php

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

的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

当我查看来源

时

<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" />

表示网址正确

Answer 1

我使用以下配置：

的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（或page.php，single.php等......）

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

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>

我没有在functions.php中使用任何内容来执行此操作，只需在所需的文件中

为什么我无法加载CSS文件和JavaScript文件？

1 个答案: