Question

您好我是HTML / CSS / JS的初学者，我正在尝试创建一个Web应用程序（仅限于MOBILE ON），它可以抓取wordpress帖子并将它们插入到像FLEXSLIDER这样的滑块中。我希望我的用户能够通过wordpress帖子选择一个，一旦他们阅读了它，SWIPE到下一个帖子。

任何人都可以帮助我吗？

如何将单个WORDPRESS帖子放入FLEXSLIDER并将滑块与WORDPRESS循环集成？

如果您需要更多描述，请询问。

Answer 1

首先，StackOverflow旨在帮助您处理代码，而不是为您编写代码。鉴于你从来没有在这里发布我会给你怀疑的好处。将来，请向我们提供您尝试过的代码示例，并明确说明问题所在。

至于将您的帖子与Flexslider集成，这应该很容易。我以前没有使用过这个插件，但我会根据Flexslider网站上的文档给它一个去。这里有关于如何使用插件的良好说明：http://www.woothemes.com/flexslider/

首先，您需要确保在header.php文件的<head></head>标记内链接了必要的文件。

将这些线放在文档头中，您可能需要调整路径来定位文件。

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

接下来你需要连接到flexslider，将代码放在我刚刚在上面发布的两行之后的头部中

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

如果没有实际安装插件，只有通过关闭文档，我认为这将有效。如果您有任何疑问，请告诉我。如果这样就完成了工作，请接受我的回答。

Answer 2

在模板文件中，您将使用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（在header.php或footer.php中或在functions.php中将其排入队列，无论您最喜欢的处理onload脚本的方式是什么）;

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

如何获取我的wordpress帖子并让它们显示在FLEXSLIDER中？

2 个答案: