0

我正在尝试在 WordPress 中添加一个 flexslider 幻灯片，但是在将代码包含在 和幻灯片中之后，什么都没有显示。看着萤火虫，我为幻灯片制作的 div 在那里，但 flexslider 只是没有加载。我使用的是 TwentyTwelve 主题的子主题，我复制了子主题目录下的 header.php 进行修改。这些是代码：

这是标签中的代码：

<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "fade",  // slide or fade
          controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>

这里是页面中的幻灯片：

<div id="flexslider-container">
   <div class="flexslider">
       <ul class="slides">
           <li><img src="/images/Penguins.jpg" /></li>
           <li><img src="/images/Desert.jpg" /></li>
           <li><img src="/images/Koala.jpg" /></li>
        </ul>
   </div>
 </div>
4

1 回答 1

0

我最近刚刚在我的一个项目中使用了 FlexSlider。与其直接在主题中包含 JavaScript 和 CSS，不如试试这个：

在您的 Wordpress 主题中打开 functions.php，然后粘贴以下内容：

// flexslider
     wp_register_script( 'flexslider', get_stylesheet_directory_uri() . '/js/jquery.flexslider-min.js', array(), '2.1', false );
     wp_register_style( 'flex-stylesheet', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), '', 'all' );
//jquery from google cdn
     wp_deregister_script('jquery');
     wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3');

然后在它下面（相同的文件functions.php）粘贴这个以及调用脚本：

    wp_enqueue_style('flex-stylesheet');
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'flexslider' );

哦，别忘了在模板中的某个地方包含调用 javascript。

于 2013-03-30T07:26:57.200 回答