ACF Pro with SlickJS

时间:2016-09-07 作者:agilebit

我正在尝试使用SlickJS和ACF Pro在我的wordpress主题上创建一个滑块tutorial. 我正在围绕光滑的主题使用一些自定义css样式,但Jquery和css似乎注册不正确,因为我的滑块不工作。

我的职能。php如下:

function theme_enqueue() {
    //wp_deregister_script( \'jquery\' );
    wp_enqueue_script( \'jquery\', get_template_directory_uri(). \'/js/jquery.js\', array( \'jquery\' ) );
    wp_enqueue_script( \'bootstrap\', get_template_directory_uri(). \'/js/bootstrap.js\', array( \'jquery\' ) );
    wp_enqueue_style(\'font-awesome\', get_stylesheet_directory_uri() . \'/font-awesome/css/font-awesome.css\');
    wp_enqueue_script( \'material\', get_template_directory_uri(). \'/js/material.js\', array( \'jquery\' ) );
    wp_enqueue_script( \'material-kit\', get_template_directory_uri() . \'/js/material-kit.js\', \'1.0.0\', true );
}
add_action(\'wp_footer\', \'theme_enqueue\');

function slick_slider_script_styles() {
    wp_enqueue_script( \'slickjs\', get_stylesheet_directory_uri(). \'/js/slick.min.js\', array( \'jquery\' ), \'1.6.0\', true );
    wp_enqueue_script( \'slickjs-init\', get_stylesheet_directory_uri(). \'/js/slick-init.js\', array( \'slickjs\' ), \'1.6.0\', true );

    wp_enqueue_style( \'slickcss\', get_stylesheet_directory_uri() . \'/css/slick.css\', \'1.6.0\', \'all\');
    wp_enqueue_style( \'slickcsstheme\', get_stylesheet_directory_uri(). \'/css/slick-theme.css\', \'1.6.0\', \'all\');
}
add_action(\'wp_enqueue_scripts\', \'slick_slider_script_styles\');
我的滑头。js文件为:

jQuery(document).ready(function($){
     $(\'.testimonials\').slick({
      dots: true,
      slidesToShow: 1,
      swipeToSlide: true,
    });
});
我的实际PHP/HTML是:

<section class="mantras">
    <div class="row">
        <h2 class="title">Testimonials</h2>
        <div class="testimonials">
            <div class="vision">
                <?php if( have_rows(\'testimonials\') ): ?>
                    <?php while( have_rows(\'testimonials\') ): the_row(); ?>
                       <?php
                        $image = get_sub_field(\'image\');
                        $company_name = get_sub_field(\'company_name\');
                        $company_testimonial = get_sub_field(\'company_testimonial\');
                        ?>
                        <p><img class="center-img" src="<?php $image ?>"></p>
                        <h4 class="info-title text-center"><?php echo $company_name; ?></h4>
                        <p class="description"><?php echo $company_testimonial; ?></p>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
这就是目前的结果:incorrect

侧面应该有箭头,底部应该有点(来自css样式和Jquery)。问题是什么?

1 个回复
SO网友:bshah

您应该使用wp_enqueue_scripts 而不是wp_footer 加载样式和脚本。尝试将jQuery添加为的依赖项slick-init.js 这应该行得通。我怀疑slick-init.js 调用样式以创建所需的指定外观。