동위원소 - 각 범주 내 최신 게시물 표시

동위원소 - 각 범주 내 최신 게시물 표시

현시점에서의 동작:

• 최신 6개의 프로젝트가 기본값으로 표시됩니다.
• 특정 목록을 누르면 해당 카테고리 내에서 최신 6개 프로젝트인 최신 게시물이 표시됩니다.예: Foto 내의 4개의 최신 버전이 표시됩니다.이것은 6개 중 4개가 Foto의 카테고리이기 때문입니다.즉, 6개의 최신 프로젝트가 Foto 카테고리에 있으면 다른 카테고리 내의 투고는 표시되지 않습니다.이해가 안 되면 아래의 스크린쇼를 봐주세요.

동작 방법:

• 최신 6개의 프로젝트를 기본값으로 표시(이 방법은 유효)
• 1개의 카테고리를 누르면, 그 카테고리내의 최신의 6개의 투고가 표시됩니다.

여기를 참조해 주세요.

참고: Windows 10에서 Chrome을 사용하는 경우 어떤 이유로 인해 호버 효과가 작동하지 않습니다.Chrome 및 Windows에 버그가 보고되었습니다.

<ul id="filters" class="whitetext whitelink myeluft">
    <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.foto' class="smoothtrans">Foto</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.video' class="smoothtrans">Video</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.web' class="smoothtrans">Web</a></li>
</ul>

PHP

<?php

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '6',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 


// Loop post_type
?>

<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 

        $termsArray = get_the_terms( $post->ID, "category");  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
            foreach ( $termsArray as $term ) { // for each term 
                $termsString .= $term->slug.' '; //create a string that has all the slugs 
            }
        ?> 
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <ul class="grid cs-style-3">
                <li>
                    <figure>
                        <?php if ( has_post_thumbnail() ) { 
                              the_post_thumbnail('frontpage_thumb');
                        } ?>
                        <figcaption class="lefttext">
                            <h3><?php the_title(); ?></h3>
                            <span class="offgrey"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span>
                            <a href="<?php the_permalink() ?>" title="Se prosjekt" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>             
        </div> <!-- end item -->
        <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/toucheffects.js"></script>
<?php endif; ?>

JS

jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

개요 (2007년 7월 13일 갱신)

또, 「 」를 무효로 할 는,'posts_per_page'커스텀 wp 설정을 사용하는 것만으로, 같은 문제가 발생합니다.따라서 각 카테고리를 눌렀을 때 새로 고침되지 않거나 처음 표시된 것 이외의 게시물이 표시되지 않는 것이 문제인 것 같습니다.

따라서 args를 다른 곳으로 설정하거나 js를 수정하여 최신 게시물을 얻어야 한다고 생각합니다.하지만 이것은 제 전문 분야가 아니기 때문에 해결 방법이 있는지 여쭤봅니다.검색 엔진과 SO에서 이 질문을 검색했지만 찾을 수 없었습니다.다만, 같은 페이지도 같은 문제가 있는 것을 알 수 있습니다.그렇기 때문에 이 문제를 해결하는 것이 다른 사용자들에게도 도움이 될 것이라고 생각합니다.

현재 코드가 데이터베이스에 요청되는 것은 6개의 최근 게시물뿐입니다.그런 다음 동위원소 플러그인이 프런트 엔드에서 필터링합니다.

이 6개 말고는 더 이상 게시물을 표시할 수 없다는 뜻입니다.태그(foto, video, web) 동위원소 필터를 클릭하면 선택한 카테고리를 가진 게시물만 표시됩니다.더 이상 투고를 요구하지 않고 이미 가지고 있는 투고만 필터링합니다.

필터 태그를 클릭하면, 코드로 투고를 더 요구하게 할 수 있습니다만, AJAX 를 사용할 필요가 있습니다.

이해할 수 없는 두 가지 사항

1. 가

2. 첫 번째 1개는 올바르게 동작하지만 두 번째 1개는 # 하이퍼 레퍼런스를 사용하여 동일한 링크로 돌아가는 링크 또는 기능이 없습니다.

3. 비디오와 웹은 동일한 것을 가지고 있습니다.연결된 카테고리를 체크하지 않을 경우 주의해서 넣어야 합니다.

한 가지 할 수 있는 일은 모든 게시물을 한 번에 가져오고 이와 같은 방법으로 6개만 표시하는 것입니다.

jQuery('#isotope-list').isotope({
    filter: ':nth-child(-n+3)'
});

필터는 페이지의 사용 가능한 항목에서만 작동합니다.

1개의 카테고리를 누르면 해당 카테고리 내의 최신 6개의 투고가 표시됩니다(http://www.vekvemedia.no/)의 경우 총 6개의 아이템이 "포토" 카테고리에 속하므로 "포토" 카테고리를 누르면 5개의 아이템이 표시됩니다).

해결책 1: "All" 옵션이 있는 경우 필터가 작동하여 일치하는 카테고리의 모든 항목이 표시된 후 첫 번째 로드에서 사용 가능한 모든 항목을 로드해야 합니다.

해결책 2: Ajax를 사용하여 카테고리 ('foto' 등)와 일치하는 6개의 레코드를 가져옵니다.

언급URL : https://stackoverflow.com/questions/31298642/isotope-show-latest-post-within-each-category