まず、私はPHPとJavascriptの初心者であり、Wordpressで作業するために誰かにこのコードの作成を手伝ってもらいました。私が抱えている問題は、それが一番下に達したときに重複した投稿のセットをロードすることです。コードのどこが間違っているのかを示すために、hiとlowを検索しました。
投稿タイプをロードするPHP。
<?php
$paged = isset($_REQUEST['page'])?$_REQUEST['page']: 1;
$args = array('post_type' => 'wpsc-product', 'posts_per_page' => 24, 'post_status' => 'publish', 'paged' => $paged, 'orderby' => 'title','order' => 'ASC' );
if($search) {
$productIds = $wpdb->get_col("select DISTINCT ID from {$wpdb->posts} where post_type = 'wpsc-product' AND post_title LIKE '%".$search."%' ");
$args{'post__in'} = ($productIds)?$productIds:'no-data';
}
?>
<div id="container">
<?php
$loop = query_posts( $args );
if( have_posts()) {
while ( have_posts() ) : the_post();
//wpsc_the_product_permalink().
$wpsc_product_category = get_the_product_category($post->ID);
$temporary = '';
$classname = '';
if($wpsc_product_category):
foreach($wpsc_product_category as $value) {
$ParentCategory = $tempParentStorage["{$value->parent}"];
$temporary .= "{$value->slug} ";
$classname .= ($ParentCategory)? " $ParentCategory {$value->slug} ":" {$value->slug}";
}
endif;
?>
<div style='display:none' class="products<?php echo $classname; ?>" data-symbol="<?php the_title(); ?>" data-category="<?php echo $temporary; ?>" ><a href="<?php echo wpsc_the_product_permalink(); ?>" >
<p><?php echo get_the_post_thumbnail($post->ID, 'medium'); ?></p>
<p class='product_title' ><?php the_title(); ?></p>
</a>
</div>
<?php
endwhile;
?>
</div><!--//container-->
<?php if(!$search) { ?>
<div id='page_nav' >
<a href='?page=2'></a>
</div>
<?php } ?>
<?php }
else {
echo '<div class="products>No Product found</div>';
}
$totalPages = $wp_query->max_num_pages;
wp_reset_query();
?>
これまでのJavaScriptコードは次のとおりです。
<script language='javascript' >
jQuery(function($){
//IMPLEMENTING THE ISOTOPE PLUGIN
// modify Isotope's absolute position method
var $container = $('#container');
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
if ( !$this.hasClass('iam_child_category') ) {
if(!$this.hasClass('iam_child_of_child_category')) {
$('.child_filters li').removeClass('child_active_class').addClass('child_inactive_class');
$('.iam_child_category').removeClass('selected');
}
}
if ( !$this.hasClass('iam_child_of_child_category') ) {
$('.child_filters_child li').removeClass('child_active_class').addClass('child_inactive_class');
$('.iam_child_of_child_category').removeClass('selected');
}
// don't proceed if already selected
/*if ( $this.hasClass('selected') ) {
return false;
}*/
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// filter items when filter link is clicked
var selector = $(this).attr('data-filter');
$(selector + '_child_li').removeClass('child_inactive_class').addClass('child_active_class');
if(selector == '*') {
$('.products').css('visibility','visible').hide().delay(200).fadeIn('slow');
}
else {
$('.products').hide();
$(selector).css('visibility','visible').hide().delay(200).fadeIn('slow');
}
return false;
});
var currentPage = 1;
var lastPage = (<?php echo $totalPages; ?> == 0)?1:<?php echo $totalPages; ?>;
//call the Infinite Scroll plugin via jQuery
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.products', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more products to load.',
img: '<?php bloginfo('template_directory') ?>/images/ajax-loader.gif',
msgText : 'Loading...'
}
},
function( newElements ) {
currentPage++;
if(currentPage == lastPage) {
jQuery(window).unbind('.infscr');
return false;
}
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to Isotope layout
$newElems.imagesLoaded(function() {
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container('.insert', $newElems );
});
}
);
});
//IMPLEMENTING THE INVIEW PLUGIN
jQuery(document).on("inview", ".products", function(e) {
$("#container .products").each(function(e) {
var $this = $(this);
if(!$this.hasClass('loaded')) {
$this.addClass('loaded');
$this.css('visibility','visible').hide().delay(1*e).fadeIn('medium');
}
});
});
</script>