BXSlider в WordPress

Question

Поэтому я не хочу использовать плагин, потому что я хочу контролировать этот слайдер. У меня проблемы с этим, не используя стили и файлы JS. Я вызываю их через файлы функций, и эти файлы находятся в папках CSS и JS в рамках темы.

Вот функция для вызова в js с помощью jquery.

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;
?>

Мне просто нужен глаз, чтобы увидеть, что здесь не так?

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