用于wordpress类别的Ajax过滤器不起作用

时间:2019-08-20 08:31:35

标签: ajax wordpress filter categories

我现在正在使用wordpress(主题:宫崎骏)在我的投资组合中工作。 在索引页面中,我想按类别显示我的作品。就是说,当我点击“网络”类别时,它应该向我显示所有带有类别网络的帖子。为了解决这个问题,我使用了以下代码:我从此处使用了基本代码:http://juha.blog/dev/wordpress/ajax-filters-for-wordpress-categories/ 首先,一切正常,但是如果我单击其中一个类别,则帖子将消失。我可以看到它们正在加载,但是看不到。有人可以帮我解决这个问题吗?我做错了什么? 我对ajax真的很陌生,因此可能缺少某些东西..但是由于我不是专业人士,所以看不出问题出在哪里。

这是我的网站:jasminstammler.ch

INDEX.PHP:

<?php get_header(); ?>
<main id="site-content">

<div class="section-inner">

    <?php 

    if ( is_archive() || is_search() ) : 

        $has_description = get_the_archive_description();

        $results_count = $wp_query->found_posts;
        $results_strlen = strlen( $results_count );

        ?>

        <header class="archive-header <?php if ( $has_description ) echo ' has-description'; ?>">

            <div class="archive-header-titles">

                <h3 class="archive-title-prefix"><?php echo miyazaki_get_archive_title_prefix(); ?></h3>

                <h1 class="archive-title">
                    <?php the_archive_title(); ?>
                    <?php if ( $results_count ) : ?>
                        <div class="results-count length-<?php echo $results_strlen; ?>"><?php echo $results_count; ?></div>
                    <?php endif; ?>
                </h1>

            </div><!-- .header-titles -->

            <?php if ( $has_description ) : ?>

                <div class="archive-header-text">

                    <div class="archive-description intro-text">
                        <?php the_archive_description(); ?>
                    </div><!-- .archive-description -->

                </div><!-- .header-text -->

            <?php endif; ?>

        </header><!-- .archive-header -->

    <?php endif; ?>

    <ul class="xiong-filters">

  <?php 
      $args= array(  
        'show_option_all'   =>   'All', // Text for button All
        'title_li'          => __('')
      );
    wp_list_categories( $args );
  ?>
 </ul>

    <?php if ( have_posts() ) : ?>

    <div id="main-content">
    <div id="inside">
      <div class="container">

        <div class="posts load-more-target" id="posts">

            <div class="grid-sizer"></div>


            <?php

            while ( have_posts() ) : the_post();


                get_template_part( 'preview', get_post_type() );

            endwhile;

            ?>

        </div><!-- .posts -->

        <?php get_template_part( 'pagination' ); ?>

    <?php elseif ( is_search() ) : ?>

        <p class="no-search-results"><?php _e( "We couldn’t find any matching search results, but feel free to try again with different words.", "miyazaki" ); ?></p>

    <?php endif; ?>

</div><!-- .section-inner -->

        </div>
    </div>
</div>

FUNCTIONS.PHP

add_action( 'wp_enqueue_scripts', 'xiong_theme_scripts' );
function xiong_theme_scripts() {

    //Ajax filter scripts     
    wp_register_script( 'ajax', get_template_directory_uri() . '/../child_miyazaki/js/ajax.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_script( 'ajax' );
    }

AJAX.JS

jQuery(function(){
var mainContent = jQuery('#main-content'),
    cat_links = jQuery('ul.xiong-filters li a');

    cat_links.on('click', function(e){

        e.preventDefault();
        $el = $(this);
        var value = $el.attr("href");
        mainContent.animate({opacity:"0.5"});
        mainContent.load(value + " #inside", function(){
            mainContent.animate({opacity:"1"});
        });
        jQuery( "li" ).removeClass( "current-cat" );
         jQuery(this).closest('li').addClass("current-cat");
    });
});

感谢您的帮助!

0 个答案:

没有答案