我现在正在使用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");
});
});
感谢您的帮助!