Weitere Beiträge in der Wordpress-Seitenleiste anzeigen (wie YouTube)

Question

Ich versuche eine YouTube Esque-Seitenleiste "Mehr anzeigen" zu erstellen.

Die Beiträge aus der gleichen Kategorie sind in meiner Vorlage Sidebar mit dem folgenden Code angezeigt:

<div class="sidebar-left"> 
    <div class="grid-container"> 
     <?php 
       global $post; 
       $category = get_the_category($post->ID); 
       $current_cat = $category[0]->cat_name; 

       $my_query = new WP_Query('category_name='.$current_cat.'&showposts=10'); 
       while ($my_query->have_posts()) : $my_query->the_post(); ?> 
       <a href="<?php the_permalink(); ?>"> 
         <div class="grid-item-meta"> 
           <span><?php echo $entry_cats; ?></span> 
           <h3><?php the_title(); ?></h3> 
           <h5>Written by <?php echo get_the_author(); ?></h5> 
         </div> 
       </a> 
       <?php endwhile; 
        wp_reset_postdata(); 
       ?> 
    </div> 
</div> 

Ist es möglich, diese Abfrage zu begrenzen/Offset es und mehr holt eine ‚Show More‘ auf Button. Sobald show more aktiviert wurde, muss ich es in "Show Less" ändern. Ich bin ziemlich glücklich, alle Posts in einer Abfrage zu ziehen und sie am Frontend zu verstecken (ich bin nicht allzu besorgt darüber, in komplexen AJAX zu kommen).

Begrenzung der Höhe der div könnte einen Beitrag in der Mitte abschneiden. Es scheint, es gibt viele Informationen/Antworten auf das Laden mehr mosts über AJAX oder das Laden eines Beitrags in einem bestimmten div, aber nicht ein einfaches Erscheinen und Verstecken-Szenario, wie ich danach bin. Vielen Dank im Voraus.

Answer 1

Wenn es Ihnen nichts ausmacht, alle Beiträge zu laden, könnten Sie einige jQuery verwenden, um diesen Effekt zu erhalten. Schauen Sie sich den CodePen-Link an.

https://codepen.io/pen/QvOpGK

erklären an, die Sie verweisen Beiträge verstecken, 4 wird der erste Beitrag sein, die wir verstecken

#posts div:nth-child(n + 4) { 
    display: none; 
} 

Dann jQuery Beiträge auf Klick zeigen, ich bin das Hinzufügen einer Klasse show dass gibt eine display: block;

//We need to tell jQuery which posts to show in hiddenPosts 

var hiddenPosts = $('#posts div:nth-child(n + 4)'); 

var button = $('#showMore'); 

$(button).click(function() { 

    hiddenPosts.toggleClass('show'); 

    //change button's text 

    if (button.text() == "Show More") { 
    button.text("Show Less"); 
    } else { 
    button.text("Show More"); 
    } 

});