2

こんにちは、私は HTML/CSS/JS の初心者で、ワードプレスの投稿を取得して FLEXSLIDER のようなスライダーに挿入する Web アプリ (モバイルのみ) を作成しようとしています。ユーザーがワードプレスの投稿をスワイプして選択し、それを読んだら、次の投稿にスワイプできるようにしたいと考えています。

誰でも私を助けることができますか？

個別の WORDPRESS 投稿を FLEXSLIDER に取得し、スライダーを WORDPRESS ループに統合するにはどうすればよいですか?

さらに説明が必要な場合は、お問い合わせください。

4

2 に答える 2

1

まず、StackOverflow は、コードを作成するのではなく、コードを支援するために使用することを目的としています。あなたがここに投稿したことがないことを考えると、私はあなたに疑いの恩恵を与えます. 将来的には、あなたが試したことのコード例を提供し、問題が何であるかを明確に説明してください.

投稿を Flexslider に統合する限り、それは十分に簡単なはずです。これまでプラグインを使用したことがありませんが、Flexslider サイトのドキュメントに基づいて試してみます。ここにプラグインの使用方法に関する適切な説明があります: http://www.woothemes.com/flexslider/

<head></head>まず、必要なファイルが header.php ファイルのタグ内にリンクされていることを確認する必要があります。

これらの行をドキュメント ヘッドに配置します。ファイルを対象とするようにパスを調整する必要がある場合があります。

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.flexslider.js"></script>

次に、flexslider に接続する必要があります。上記の 2 行の直後に、以下のコードを配置します。

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        touch: true, // to allow for touch controls
    });
  });
</script>

次に、ループをスライダー マークアップと統合する必要があります。スライダーを表示するページのテンプレート ファイルに以下のコードを配置する必要があります。

<div class="flexslider">
<ul class="slides">

    <?php  
        $post_query = new WP_Query('post_type' => 'post');
        if($post_query->have_posts() ) : while($post_query->have_posts() ) : $post_query->the_post(); ?>

    <li>
        <?php the_title(); ?>
        <?php the_content(); ?>
    </li>

</ul>
</div>

<?php endwhile; ?>
<?php endif; ?>

プラグインを実際にインストールせずに、ドキュメントから外れるだけで、これでうまくいくと思います。ご不明な点がございましたら、お知らせください。これで仕事が完了したら、私の答えを受け入れてください。

于 2012-12-14T00:41:06.173 に答える
0

テンプレートファイルで、Flexslider（私の場合.flexslider）で使用されるクラスでマークアップを設定し、それにWordpressループを挿入します。これが例です。

<div class="slider">
  <div id="slider" class="flexslider"> 
    <ul class="slides">
        <!-- THE POST LOOP -->
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>     

            <li>

                // Pull whatever you need from your posts here.  Featured images, content, excerpts. 
                // An image and then some absolutely positioned divs etc. The world;s you oyster

            </li>

        <?php endwhile; endif: ?>                   
    </ul>
</div>

FlexsliderスクリプトとCSSが含まれていると想定しているので、そのようにFlexsliderを開始します（onloadスクリプトを処理するお気に入りの方法が何であれ、header.phpまたはfooter.phpで、またはfunctions.phpにエンキューします）。

<script type="text/javascript">              
    jQuery(window).load(function() {
        jQuery('.flexslider').flexslider({
            animation: "slide", 
            direction: "vertical",
            easing: "easeOutExpo",
            animationSpeed: '400',
            controlNav: false 
    });
});

于 2012-12-14T00:42:17.337 に答える