0

WordPress に flexslider スライドショーを追加しようとしていますが、コードを含めた後、スライドショーを何も表示しません。firebug で見ると、スライドショー用に作成した 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 に答える