加入js文件和css文件到WordPress(adding js files and css fil

我是新来的WordPress ..我已经安装了主题名为“野兔”。现在我想一些的JavaScript文件以及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&amp;count=5"></script>

    <!-- End Document
    ================================================== -->
    </body>

    </html>

难道我这样是正确的？如果没有，那么请指正..

先感谢您

Answer 1:

在你的意见，你可能是指从雅虎这些准则。有，但是几个注意事项此规则。最重要的是，谷歌Analytics（分析）更喜欢它的片段放在内<head>部分，不会允许你使用Analytics（分析）网站管理员工具验证，除非片段是在头部。

更重要的是，你不会想在你这样的主题模板直接在你的JS和CSS文件。它的工作原理，但它是非常不WordPress的-Y。

“正确”的方式，包括在WordPress主题额外的脚本和样式是使用wp_enqueue_script()和wp_enqueue_style() 函数中的functions.php钩内，像这样：

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()到出队的“内置” jQuery的。

最后，如果你想您在页脚脚本时， wp_enqueue_script()函数有一个标志， $in_footer推迟特定脚本页脚。

Answer 2:

答案由@qccreative提供是正确的。你应该包括你使用，你必须有你的主题中的functions.php文件需要你的页面中的所有JS / CSS文件。如果你没有，它只是创造一个，并为导入您的文件，就像上面的答案的功能。

你甚至可以管理要加载脚本的网页。

也这是最安全的方式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');

祝你好运好友

Answer 3:

从你已经把你创建你的主题文件夹中的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>

Answer 4:

/**
 * Proper way to enqueue scripts and styles.
 */

    function custom_links() {
        wp_enqueue_style( 'style-name', get_stylesheet_uri() );
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'custom_links' );

如果您需要联系比你可以使用wp_enqueue_style，如果你需要链接的JavaScript比你可以用你的wp_enqueue_script CSS文件。

wp_enqueue_scripts这是wordpress的前端侧的工作。

admin_enqueue_scripts这是wordpress的后台内容的作品。

我希望这是帮助所有的人。

文章来源: adding js files and css files to wordpress