在wordpress中包含javascript - include javascript in wordpress

include javascript in wordpress

本文关键字：javascript 包含 wordpress | 更新日期: 2023-09-27

我有一个javascript问题，我想把它包含在wordpress模板页面中。

我想做的事情：在此页面上-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.hp:中的功能

<?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模板页面）中javascript的代码：

<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时，我是个初学者，当涉及到javascript时，我绝对是个新手。你能解释一下我做错了什么并改正吗？

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

多种选择：

从jquery文件的底部删除jQuery.noConflict();-或-将所有代码中的$替换为文本jQuery。你使用的插件文件应该是绝缘的，并且是正常的

-或-

更改

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

至

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