Question

我被指派继续为其他人设置的WP主题工作，我仍然遇到一些问题，对Wordpress来说还是一个新手。

我相信，在我之前做过这件事的人有一件事，就是在页面顶部设置按钮，这些按钮允许根据各自的类别对显示的帖子进行排序或限制。这正是用户应该能够做到的，但它还没有工作，我无法理解如何使用我以前的同事为此编写的代码。这是显示网站帖子的标记，底部的脚本是我认为可以过滤帖子的内容：

<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-projekte">
<div class="projekte">

    <div class="button-group filters-button-group">
        <button class="active btn" id="all">alle</button>
        <button class="projekt-btn" id="category-wise-201516">WiSe15/16</button>
        <button class="projekt-btn" id="category-sose-15">SoSe15</button>
        <button class="projekt-btn" id="category-wise-201415">WiSe14/15</button>
        <button class="projekt-btn" id="category-sose-14">SoSe14</button>
    </div>


    <?php if (is_home()) {
    query_posts("cat=-3");
    } ?>

    <?php if (have_posts()): ?>
        <?php while(have_posts()): the_post(); ?>
        <div <?php post_class(); ?>>

            <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
            <a href="<?php the_permalink(); ?>">
            <?php 
                if ( has_post_thumbnail() ) {
                the_post_thumbnail('large');
            } ?>
            </a>
        <!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
        </div>
        <?php endwhile; ?>
    <?php else : ?>
        <h2>Couldn’t find any articles!</h2>
    <?php endif; ?>
</div>

<script>
    var $btns = $('.btn').click(function() {

      if (this.id == 'all') {
        $('.projekte > .post').fadeIn(600);
      } else {
        var $el = $('.' + this.id).fadeIn(600);
        $('.projekte > .post').not($el).hide();
      }
      $btns.removeClass('active');
      $(this).addClass('active');
    })
</script>

<?php get_footer(); ?>

如果有人可以向我解释这一点并帮助我让它发挥作用，那将是非常有帮助的。我是WP，PHP和JS的新手，但我真的很想掌握它。当然，让网站正常运作。

修改

这里是页面底部的javascript，作为单独的代码：

<script>
    var $btns = $('.btn').click(function() {

      if (this.id == 'all') {
        $('.projekte > .post').fadeIn(600);
      } else {
        var $el = $('.' + this.id).fadeIn(600);
        $('.projekte > .post').not($el).hide();
      }
      $btns.removeClass('active');
      $(this).addClass('active');
    })
</script>

据我所知，没有其他JS链接到页面或执行过滤按钮。这里也是指向我网站当前版本的链接，我在该问题中发布的代码来自：http://udkdev.skopec.de/category/projekte/

Answer 1

实际上，javascript将带有类“btn”的元素上的click事件绑定，但只有你的“all”按钮才具有该类。所以它看起来好像什么也没做。

更改按钮类或点击目标。

Wordpress：了解基于javascript的帖子过滤器

1 个答案: