按标签动态地将帖子排序到Wordpress循环中

时间:2017-07-25 12:30:55

标签: javascript php jquery ajax wordpress

我在我的Wordpress自定义博客页面中有一个自定义循环,我将所有帖子显示在其中,如下所示:

<section class="container blog-article-actu">
            <div class="row">

    <?php
    $the_query = new WP_Query('showposts=-1');

    while ($the_query->have_posts()) : 
    $the_query->the_post();
    $catObj = get_the_category();

        ?>

        <article class="blog-article-actu-article" style="background:url('<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><?php echo $url ?>');">
            <div class="blog-article-actu-article-top">
                <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                <div class="details-blog-article-actu">
                    <div class="blog-article-actu-date">
                        <span class="day"><?php the_time( 'd' ) ?></span><br>
                        <span class="month"><?php the_time( 'F' ) ?></span>
                    </div>

                    <a href="#" target="_blank"><p>

                        <?php
                            if (($catObj[0]->name == 'Actualités et évènements') OR ($catObj[1]->name == 'Actualités et évènements')) {
                              echo "<img src=\"XXX/actu-icon.png\" alt=\"Actualités et évènements\">";
                            } elseif (($catObj[0]->name == 'Témoignages') OR ($catObj[1]->name == 'Témoignages')) {
                              echo "<img src=\"XXX/chat-icon.png\" alt=\"Témoignages\">";
                            } elseif (($catObj[0]->name == 'Vidéos') OR ($catObj[1]->name == 'Vidéos')) {
                              echo "<img src=\"XXX/video-icon.png\" alt=\"Vidéos\">";
                            } else {
                              echo "";
                            }
                        ?>
                    </p></a>
                </div>
            </div>

            <div class="blog-article-actu-article-bottom-wrap">
                <span class="blog-article-actu-article-excerpt"><?php the_excerpt();?></span>
                <span class="blog-article-actu-article-bottom"><a href="<?php the_permalink() ?>">En savoir <span>+</span></a></span>
                <div class="social-blog-article-actu">
                    <a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                    <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </div>
            </div>
        </article>

    <?php  // End of the loop.
    endwhile;
    ?>

            </div>
    </section>

然后我被要求构建一些东西,通过标签动态地使用像这样的标签系统对它们进行排序:https://codepen.io/Chaaampy/pen/gWOrvp

但我有点迷失...我想在我的循环中获取每个帖子的标签,然后将它们添加为CSS类,就像那样我可以在JS中显示或隐藏一些文章...嗯,我不知道,有人对我有任何想法吗?

谢谢! :)

1 个答案:

答案 0 :(得分:0)

如果有人有兴趣,可以通过构建类似的内容找到解决方案:https://codepen.io/Chaaampy/pen/gWOrvp

function test(value){
 //convert to array
 value=value.split("");
 //check the number
 function isnumber(num){
  return num.every(n=>"1234567890".includes(n));
 }

//weve got three possibilities:
  //150
  if(isnumber(value)) return true;

  //N150
  var [n,...rest]=value;
  if(n==="N" && isnumber(rest)) return true;

  //150N
  var n=value.pop();
  return n==="N" && isnumber(value);
}

});

请注意,我使用get_the_tags将标签添加到Wordpress中,然后将它们作为类添加到我想要显示/隐藏的元素中