Question

我是wordpress的新手。我已经安装了名为'hare'的主题。现在我想在index.php页面中添加一些javascripts文件和css文件。但我找不到所需的输出。

以下是我写的代码..

    <?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

在您的评论中，您可能指的是these guidelines from yahoo。然而，这条规则有一些警告。最重要的是，Google Analytics（分析）希望将其摘要放在<head>部分内，并且不允许您使用Google Analytics进行网站管理员工具身份验证，除非该代码片段处于首位。

更重要的是，您不希望将JS和CSS文件直接包含在这样的主题模板中。它有效，但它非常不是WordPress-y。

在WordPress主题中包含其他脚本和样式的“正确”方法是在functions.php的钩子中使用wp_enqueue_script()和wp_enqueue_style() functions，如下所示：< / p>

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将特定脚本推迟到页脚。

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

从您放置的代码中，您将在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>

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' );

如果您需要链接CSS文件而不是使用 wp_enqueue_style ，并且如果您需要链接JavaScript，则可以使用 wp_enqueue_script 。

wp_enqueue_scripts 这是在wordpress的前端工作。

admin_enqueue_scripts 这适用于wordpress的后端。

我希望它对所有人都有所帮助。

将js文件和css文件添加到wordpress

4 个答案: