在wordpress中包含javascript

我遇到了一个javascript问题，我想将其包含在wordpress模板页面中。在wordpress中包含javascript

我在做什么：本页内容 - http://www.pcworld.ro/vworker/ - 我想调用一个javascript来淡入/淡出6个图像（您可以在标题的右上角看到第一个图像）。

这是脚本：http://www.pcworld.ro/vworker/wp-content/themes/visualtime/js/innerfade.js

这是我在header.php中：

<?php wp_enqueue_script('innerfade', '/vworker/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));?> 
<?php wp_head();?> 
<script type="text/javascript"> 
$(document).ready(
function(){ 
$('ul#screenshots').innerfade({ 
speed: 1000, 
timeout: 4000, 
type: 'random', 
containerheight: '259px' 
}); 
}); 
</script>

这是我在的functions.php：

<?php 
function load_scripts() { 
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('innerfade', '/wp-content/themes/visualtime/js/innerfade.js', array('jquery')); 
}  
add_action('init', 'load_scripts'); 
?>

这是应该在homepage.php（我需要javascript工作的WordPress模板页面）中负责的代码：

<div id="screenshot" style="overflow:hidden;"> 
      <ul class="innerfade" id="screenshots" style="list-style: none outside none; margin: 0pt; padding: 0pt; cursor: pointer; position: relative; height: 259px;" onclick="location.href='#'"> 
       <li style="z-index: 6; position: absolute; display: none;"> 
        <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot1.jpg" alt="Room Booking System"> 
       </li> 
       <li style="z-index: 5; position: absolute; display: none;"> 
        <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot2.jpg" alt="Complete Administration Panel"> 
       </li> 
       <li style="z-index: 4; position: absolute; display: none;"> 
        <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot3.jpg" alt="Meeting Room Bookings"> 
       </li> 
       <li style="z-index: 3; position: absolute; display: none;"> 
        <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot4.jpg" alt="View Statistics of All Room Bookings"> 
       </li> 
       <li style="z-index: 2; position: absolute; display: none;"> 
        <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot5.jpg" alt="Including a Helpdesk System"> 
       </li> 
       <li style="z-index: 1; position: absolute; display: list-item;"> 
        <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot6.jpg" alt="Intelligent Recurring Bookings"> 
       </li> 
      </ul> 
</div>

我是初学者，当谈到wordpress和一个绝对noob时，有JavaScript的参与。你能解释我做错了什么，并解决它吗？

来源

2012-02-28 George Grigorita

这在wordpress主题开发者中很常见，他们自动将jQuery.noConflict()包含在jquery文件中以避免与其他库的冲突。
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

几种选择：

从jQuery文件的底部卸下jQuery.noConflict(); - 或 - 在所有的代码替换$与文本jQuery。您使用的插件文件应绝缘，并确定

- 或 -

变化

$(document).ready(
function(){ 
    //......... 
}

到

jQuery(document).ready(
function($){ 
    //......... 
}

与$在准备好参数，你可以使用$里面

来源

2012-02-28 03:29:54 charlietfl

在wordpress中包含javascript

回答

相关问题