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

我是wordpress新手..我已经安装了名为'hare'的主题。现在我想添加一些JavaScript文件以及CSS文件到index.php页面。但是我没有找到理想的输出。将js文件和css文件添加到wordpress

以下是代码，我已经写了..

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

是我的这种方式是正确的？如果没有，那么请指正..

预先感谢您

来源

2013-01-11 rupareliab

为什么被标记为CakePHP？ – RichardAtHome

你可以显示一行，以及它如何不按你想要的方式工作？它是指向错误的路径，还是其他事情出错？ –

@RichardAtHome：对不起，我wanedt来标记的PHP，但相反我标记Cakephp – rupareliab

从你已经把你将创建一个的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>

来源

2013-01-11 20:02:23 Mark

thnq的帮助，但我已经读过的地方，包括js和css文件将增加加载任何页面的速度，所以我已经包括这些文件在底部..这是真的吗？是的我的问题解决了我在这里问的问题。 – rupareliab

所以我已经阅读是的，因为所有其他页面内容在qujery之前加载，如果您将它们加载到页脚中。 – Mark

好的..谢谢!! – rupareliab

在您的评论中可能指的是these guidelines from yahoo。这条规则有一些注意事项。最重要的是，Google Analytics倾向于将其中的代码段放在<head>部分，并且不允许您使用Google Analytics的网站站长工具身份验证，除非片段在头。

更重要的是，您不想将JS和CSS文件直接包含在您的主题模板中。它的工作原理，但它是非WordPress的。

“正确”的办法，包括在WordPress主题额外的脚本和样式是使用wp_enqueue_script()和wp_enqueue_style()functions钩内的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()至dequeue“内置”jQuery。

最后，如果你做希望您在页脚脚本，该wp_enqueue_script()功能有一个标志，$in_footer推迟特定脚本页脚。

来源

2013-12-11 01:16:41 qccreative

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

运气好哥们

来源

2014-01-28 15:45:10

/** 
* 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的后端工作。

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

来源

2018-01-04 19:53:14

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

回答

相关问题