Question

我正在学习编码的第一步。我在互联网上开了一些课程，现在我决定建立一个Wordpress主题，所以我可以继续从实践中学习。

我决定制作一个图片滑块，所以为此我决定安装一个Jquery插件。我知道我可以安装一个wordpress插件，但我认为由于很多原因，学习如何安装Jquery插件也很方便。

我按照这些步骤安装了bxSlider插件，但不幸的是有些东西不合适，这使我的插件无法正常工作：

1） Functions.php：我加载了我需要的所有文件

function loadbxslider() {

    wp_enqueue_style('bxstyle', '/jquery.bxslider/jquery.bxslider.css');
    wp_enqueue_script('bxscript', '/jquery.bxslider/jquery.bxslider.min.js', array('jquery'));

}

add_action('init', 'loadbxslider');

2）Header.php：我在<?php wp_head(); ?>之前写了这个：

<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->

此问题在<?php wp_head(); ?>之后立即生效：

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
  jQuery('#slidebx').bxSlider({
    mode: 'horizontal',
    infiniteLoop: true,
    speed: 2000,
    pause: 8000,
    auto: true,
    pager: false,
    controls: true
  });
});
// ]]></script>

所以我的header.php的第一部分是这样的：

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php endif; ?>


    <!--?php wp_enqueue_script('jquery'); ?-->
    <!--?php wp_head(); ?-->

    <?php wp_head(); ?>


<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
  jQuery('#slidebx').bxSlider({
    mode: 'horizontal',
    infiniteLoop: true,
    speed: 2000,
    pause: 8000,
    auto: true,
    pager: false,
    controls: true
  });
});
// ]]></script>


</script>
</head>

3）我的内容中的bxSlider：使用id slidebx

<div id="slidebx">
  <div><?php the_field('image1'); ?></div>
  <div><?php the_field('image2'); ?></div>
  <div><?php the_field('image3'); ?></div>
  <div><?php the_field('image4'); ?></div>
  <div><?php the_field('image5'); ?></div>
  <div><?php the_field('image6'); ?></div>
  <div><?php the_field('image7'); ?></div>
  <div><?php the_field('image8'); ?></div>
  <div><?php the_field('image9'); ?></div>
  <div><?php the_field('image10'); ?></div>
</div>

我有一周时间试图发现为什么这个插件不起作用。如果你有一些建议对我的学习过程有好处。

在wordpress中安装bxSlider Jquery插件

0 个答案: