向wordpress添加js文件和css文件
我是wordpress的新手..我已经安装了我的主题命名为‘野兔’。现在，我想将一些javascripts文件以及css文件添加到index.php页面中。但是我找不到想要的输出。
下面是我写的代码。
<?php get_header(); ?>
// Some content
<?php get_footer(); ?>
<!-- JQuery libs
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- js jQuery wait for images Plugin ====================== -->
<script src="<?php bloginfo(template_directory ); ?>/javascripts/jquery.waitforimages.js"></script>
<!-- js jQuery flexslider Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.flexslider-min.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.cycle.all.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.fullscreen-min.js"></script>
<!-- js jQuery jcarousellite Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jcarousellite_1.0.1.min.js"></script>
<!-- js Fancybox Plugin ================================= -->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/jquery.fancybox.css">
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/jquery.fancybox.pack.js"></script>
<!--fancybox helpers-->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.css"/>
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.js"></script>
<!-- js jQuery qtip plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<!-- toTop ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/goToTop.js"></script>
<!-- js jQuery my own functions ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/functions.js"></script>
<!-- <script src="javascripts/jquery.tweet.js"></script> -->
<!-- JS twitter scripts ================================== -->
<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/EnvatoWebDesign.json?callback=twitterCallback2&count=5"></script>
<!-- End Document
================================================== -->
</body>
</html>我这条路对吗？？如果不是，请纠正我..
提前谢谢你
回答 4
Stack Overflow用户
发布于 2013-12-11 09:16:41
在您的评论中，您可能指的是these guidelines from yahoo。然而，对这条规则有一些警告。最重要的是，Google Analytics更喜欢将其代码片段放在<head>部分中，并且不允许您使用Analytics for Webmaster Tools身份验证，除非代码片段位于head中。
更重要的是，您不希望在主题模板中直接包含JS和CSS文件。它可以工作，但它非常不符合WordPress-y。
在WordPress主题中包含其他脚本和样式的“正确”方法是在functions.php的钩子中使用wp_enqueue_script()和wp_enqueue_style() functions，如下所示：
function my_custom_styles_function() {
wp_enqueue_style( 'my-style', get_stylesheet_directory() . DS . 'javascript' . DS . 'my-plugin' . DS . 'my-plugin-style.css', array(), '1.0' );
...
}
add_action('wp_enqueue_scripts', 'my_custom_styles_function');WordPress实际上在默认情况下包含了jQuery，尽管没有建立$快捷方式。您可以使用WordPress的jQuery，并使用jQuery(...);而不是$(...);启动所有自定义脚本，但这可能会导致一些插件出现问题。如果您想包含您自己的jquery版本，您应该首先使用wp_dequeue_style()来dequeue“内置”jQuery。
最后，如果您确实希望在页脚中包含脚本，则wp_enqueue_script()函数有一个标志$in_footer，用于将特定脚本推迟到页脚。
Stack Overflow用户
发布于 2014-01-28 23:45:10
@qccreative提供的答案是正确的。您应该包括所有的js/css文件，您需要您的页面使用functions.php文件，您必须在您的主题。如果你没有，只需要创建一个并创建一个函数来导入你的文件，就像上面的答案一样。
您甚至可以管理要在哪个页面中加载脚本。
此外，这也是WP提供的最安全的方式，以有组织的方式包含脚本。
这个钩子是wordpress提供给WP_ENQUEQUE_SCRIPTS的，它是一个函数，可以将你动作中的脚本添加到站点中。
下面是另一个例子：
function load_javascript_files(){
wp_register_script( 'jquery-accordion', get_template_directory_uri() . '/js/jquery.accordion.js', array('jquery'),true );
wp_enqueue_script('jquery-accordion');
}
add_action('wp_enqueue_scripts', 'load_javascript_files');祝你好运，伙计
Stack Overflow用户
发布于 2013-01-12 04:02:24
根据您放入的代码，您将在themes文件夹中创建一个header.php文件，并在其中包含JS。示例如下：
`<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo( 'name' ); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<?php bloginfo( 'template_url' ); ?>/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/jQuery-validate.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/style.css" type="text/css" />
<?php wp_head(); ?>
</head>
<body> https://stackoverflow.com/questions/14279709
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号