WordPress中的BXSlider - javascript

所以我不想使用该插件,因为我想控制此滑块。我在不利用样式和js文件时遇到了问题。我通过函数文件调用它们,这些文件位于主题内的CSS和JS文件夹中。

这是使用jquery调用js的函数。

function theme_name_scripts() {
    wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/jquery.bxslider.js', array(), '1.8.2', true );
}

add_action( 'wp_enqueue_scripts', 'theme_scripts' );

同样,这里是css(除了bxslider以外,所有功能都可以使用)

function theme_styles () {
    wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style('grid', get_template_directory_uri() . '/css/grid.css' );
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style('social', get_template_directory_uri() . '/css/webfonts/ss-social.css' );
    wp_enqueue_style('social', get_template_directory_uri() . '/css/jquery.bxslider.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_styles');

我将滑块直接放置到front-page.php中,如下所示:

        <ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>





  <script>
jQuery(document).ready(function() {
jQuery('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'horizontal',
  captions: true,
  auto: true,
  useCSS: true,
  easing: 'ease-in',
  pager: false
});
});
</script> 

我也想显示帖子而不是硬编码图像,所以这是我正在使用的php:

<?php
$content = '<ul class="bxslider">';
$loop = new WP_Query( array( 'post_type' => 'your_post_type', 'posts_per_page' => 10, 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'DESC' ) );
    while ( $loop->have_posts() ) : $loop->the_post();
        $thumb_id = get_post_thumbnail_id();
        $thumb_url = wp_get_attachment_image_src($thumb_id,'full', true);
        $content .= '<li><a href="';
        $content .= get_permalink();
        $content .= '"><img src="';
        $content .= $thumb_url[0];
        $content .= '" alt="';
        $content .= get_the_title();
        $content .= '" /></a></li>';
    endwhile;
$content .= '</ul>';
echo $content;
?>

我只需要看一下这里似乎失败的地方?

参考方案

从您的评论看来,bxslider js似乎早于jQuery。

为了解决此依赖关系问题,WordPress wp_enqueue_script函数具有一个名为$ deps的参数,因此请尝试以下代码:

function theme_name_scripts() {
    wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/jquery.bxslider.js', array('jquery'), '1.8.2', true );
}

add_action( 'wp_enqueue_scripts', 'theme_scripts' );

有关更多信息,请参见:http://codex.wordpress.org/Function_Reference/wp_enqueue_script

45码