堆栈内存溢出
  繁体   English   中英

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

[英]Why I cannot load the CSS file and JavaScript file?

 原文  2017-03-03 03:58:09  9   1    javascript/ php/ html/ css/ wordpress

问题描述

我是开发网站的初学者。 有人可以帮我解决这些问题吗？ 该文件的目录是正确的，但是不知道为什么我仍然收到错误消息。 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'); 
?>

错误 文件目录

当我查看源代码时 

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

这表示网址正确

1 个解决方案

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

我使用以下配置：

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使用任何东西来执行此操作，只是在所需的文件中

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Node.js的为什么页面无法加载css和javascript文件？ 无法加载JavaScript文件 使用JavaScript加载css文件 我正在尝试从JavaScript内加载js和CSS文件 如何使用JavaScript在特定情况下加载特定的css文件？ 我想根据屏幕大小通过Javascript加载CSS文件 从Flask服务我无法加载javascript文件 javascript文件中的压缩CSS-为什么？ 如果禁用javascript，如何加载外部css文件 在Rails应用程序中使用javascript加载特定的CSS文件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM