如何在 WordPress 中使用 jQuery Cycle 插件？

Posted 2023-05-09

【中文标题】如何在 WordPress 中使用 jQuery Cycle 插件？

【英文标题】：How to use the jQuery Cycle Plugin with WordPress?

【发布时间】：2010-10-29 21:15:31

【问题描述】：

我已经尝试了我能想到的一切。不应该这么难。谁能给我解释一下使用 jQuery 和 WordPress（特别是 jQuery Cycle 插件）的过程？

在 header.php 我有：

<?php
    wp_enqueue_script('jquery.cycle.all.min', '/wp-content/themes/andrewhavens/jquery.cycle.all.min.js', array('jquery'));
    wp_enqueue_script('featured-work-slideshow', '/wp-content/themes/andrewhavens/featured-work-slideshow.js');
    wp_head();
?>

我已经将这两个 js 文件上传到了我的主题目录。

在 features-work-slideshow.js 我有：

jQuery(document).ready(function($) 
    $('#featured-works').cycle('fade');
);

在我的模板中，我有：

<div id="featured-works">
    <?php query_posts('category_name=featured-work&showposts=5'); ?>
    <?php while (have_posts()) : the_post(); ?>
        <div class="featured-work">
            <div class="featured-work-image-container" style="float:left; width:600px;">
                <?php $image = get_post_meta($post->ID, 'homepage-image', true); ?>
                <img src="<?php echo $image; ?>"   style="margin-left:30px;">
            </div>
            <p style="float:left; width:300px;">
                <?php the_title(); ?><br />
                <a href="<?php the_permalink() ?>">Read More!</a>
            </p>
        </div>
    <?php endwhile;?>
</div>

我做错了什么？？？

【参考方案1】：

我想通了。我不小心忘记指定正确的路径：

<?php
    wp_enqueue_script('jquery.cycle.all.min', '/wp-content/themes/andrewhavens/jquery.cycle.all.min.js', array('jquery'));
    wp_enqueue_script('featured-work-slideshow', '/wp-content/themes/andrewhavens/featured-work-slideshow.js');
    wp_head();
?>

应该是

<?php
   wp_enqueue_script('jquery.cycle.all.min', '/wp-content/themes/andrewhavens/js/jquery.cycle.all.min.js', array('jquery'));
   wp_enqueue_script('featured-work-slideshow', '/wp-content/themes/andrewhavens/js/featured-work-slideshow.js');
   wp_head();
?>

否则，它工作得很好

【参考方案2】：

抛出一个 get_bloginfo("stylesheet_directory") 让你的生活更轻松

 <?php wp_enqueue_script('jquery.cycle.all', get_bloginfo("stylesheet_directory") . '/js/jquery.cycle.all.js', array('jquery')); ?>

【讨论】：

不错！不知道有这个功能。但是，当它们是 javascript 文件时，为什么要指定“样式表目录”。有没有“javascripts目录”功能？

@Andrew 没有指定jsdirectory，但我建议使用get_template_directory_uri() 或get_stylesheet_directory_uri。