0

我想知道是否可以在下面的代码中的 JS 中添加一个可以从小部件设置的选项，当在 wordpress 后端时，我希望你明白我的意思。

更具体地说，我需要为幻灯片持续时间添加一个选项。在我使用的 jCarousel 中，该持续时间在 $('.slides_widget').jcarousel 中由“auto: 5”指定，因此我必须将“5”替换为包含在如您所见，下面的小部件。我该怎么做？

<?php 

/* Slides Widget */
class Slides_Widget extends WP_Widget {
    function Slides_Widget() {
        $widget_ops = array('classname' => 'widget_slides', 'description' => __('Create slides with this widget.'));
        $control_ops = array('width' => 400, 'height' => 350);
        parent::__construct('slides_widget', __('Slides_Widget'), $widget_ops, $control_ops);
    }
    function widget( $args, $instance ) {
        extract($args);
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
        $slide_duration = $instance['slide_duration'];
        $text = apply_filters( 'widget_text', empty( $instance['text'] ) ? '' : $instance['text'], $instance );
        echo $before_widget;
        if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
            <div class="textwidget">
                <ul id="slides_widget" class="slides_widget">
                    <?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?>
                </ul>
            </div>
        <?php
        echo $after_widget;
    }
    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['slide_duration'] = absint($new_instance['slide_duration']);
        if (!$instance['slide_duration']) {
            $instance['slide_duration'] = "";
        }
        if ( current_user_can('unfiltered_html') )
            $instance['text'] =  $new_instance['text'];
        else
            $instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) );

        $instance['filter'] = isset($new_instance['filter']);
        return $instance;
    }
    function form( $instance ) {
        $defaults = array( 'filter' => true, 'title' => 'Create Your Slides', 'text' => '<li>Each slide must be in a "li" element, like this one.</li>
<li>Or like this one. Save it and check it.</li>' );
        $instance = wp_parse_args( (array) $instance, $defaults );
        $title = strip_tags($instance['title']);
        $text = esc_textarea($instance['text']);
        $slide_duration = strip_tags($instance['slide_duration']);
?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>

        <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>

        <p><label for="<?php echo $this->get_field_id('slide_duration'); ?>"><?php _e('Slide Duration:'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('slide_duration'); ?>" name="<?php echo $this->get_field_name('slide_duration'); ?>" type="text" value="<?php echo esc_attr($slide_duration); ?>" />
        </p>

        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>     <p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> />&nbsp;<label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php
    }
}
register_widget('Slides_Widget');

function pixy_asd() {
?>  
<script type='text/javascript'>
jQuery(document).ready(function($) {
    /* Slides Widget */
    function mycarousel_initCallback(carousel)
    {
        carousel.buttonNext.bind('click', function() {
            carousel.startAuto(0);
        });
        carousel.buttonPrev.bind('click', function() {
            carousel.startAuto(0);
        });
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };
    $('.slides_widget').jcarousel({
        auto: 5,
        wrap: 'last',
        visible: 1,
        scroll: 1,
        initCallback: mycarousel_initCallback
    });
});
</script>
<?php
}
add_action('wp_head', 'pixy_asd');

function pixy_slides_widget_script() {
    wp_enqueue_script('pixySlidesJS', get_stylesheet_directory_uri() . '/admin/include/theme-slides-widget/js/slides_widget.js', array('jquery'), true);
    wp_enqueue_style( 'pixySlidesCSS', get_stylesheet_directory_uri() . '/admin/include/theme-slides-widget/css/slides_widget.css', false, 1, 'screen' ); 
}
add_action('wp_enqueue_scripts', 'pixy_slides_widget_script');


?>

如果您需要更多说明，请告诉我。谢谢！

4

1 回答 1

1

在 form() 中添加：

<input type="hidden" id="slide_duration" value="<?php echo $slide_duration;?>">

然后使用而不是 auto: 5 这个：

auto: $("#widgets-right #slide_duration").val()

php解决方案怎么样？在 pixy_asd() 中：

$options = get_option('Slides_Widget');
$slide_duration = $options['slide_duration'];
?>
...
$('.slides_widget').jcarousel({
    auto: <?php echo $slide_duration;?>,
    wrap: 'last',
于 2012-05-21T11:32:31.137 回答