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

Posted

技术标签:

【中文标题】将js文件和css文件添加到wordpress【英文标题】:adding js files and css files to wordpress 【发布时间】:2012-12-26 03:02:04 【问题描述】:

我是 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>

我的这种方式对吗?? 如果不是,请纠正我..

提前谢谢你

【问题讨论】:

为什么这被标记为 CakePHP? 你能展示一行,以及它是如何没有按你想要的那样工作的吗?它是指向错误的路径,还是有其他问题? @RichardAtHome :对不起,我想标记 php,但我标记了 Cakephp @Pekka웃:我没有发现任何 css 或 js 文件的效果.. 您的问题被链接为一个错误问题的示例!格拉茨! meta.stackexchange.com/questions/163404/… 【参考方案1】:
/**
 * 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 的后端。

希望对大家有所帮助。

【讨论】:

【参考方案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');

祝你好运

【讨论】:

【参考方案3】:

在您的 cmets 中,您可能指的是 these guidelines from yahoo。然而,这条规则有一些警告。最重要的是,Google Analytics 更喜欢将它的 sn-p 放在 &lt;head&gt; 部分中,除非 sn-p 在 head 中,否则不允许您使用 Analytics 进行网站管理员工具身份验证。

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

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

【讨论】:

【参考方案4】:

根据您放置的代码,您将在主题文件夹中创建一个 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>  

【讨论】:

thnq 寻求帮助,但我在某处读到包含 js 和 css 文件会提高加载任何页面的速度,所以我将这些文件包含在底部..这是真的吗?是的,我的问题已经解决了,我在这里问过.. 所以我读过是的,因为如果您将它们加载到页脚中,所有其他页面内容都会在 qujery 之前加载。

以上是关于将js文件和css文件添加到wordpress的主要内容,如果未能解决你的问题,请参考以下文章

将 SCSS 和 JS 文件添加到 html,无法正常工作

将自定义 CSS 和 JS 添加到 Shopify

使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html

将 .css 文件添加到 ejs

如何将composer的供应商文件夹中的CSS和JS文件复制到公共?

如何在 ASP.net Core 中添加 js 和 css 文件?