javascript - WordPress 中的 BXSlider

Question

所以我不想使用该插件，因为我想控制这个 slider 。我在不使用样式和 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');

我已将 slider 直接放入 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;
?>

我只需要一双眼睛就能看出这里出现了什么问题？

Answer 1

从您的评论来看，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