Wordpress Beitrag Typ Unendliche Scroll/Load mehr Button

Question

Ich verwende den folgenden Code, um derzeit eine bestimmte Menge (24) meiner benutzerdefinierten Post-Typen auf WP anzuzeigen, sowie die Projektkategorien, um durch die Beiträge dynamisch zu filtern.

  <!-- Display Filters for Posts ---> 
      <ul id="filters"> 
       <li><a href="#" data-filter="*" class="selected">Everything</a></li> 
      <?php 
      $terms = get_terms("project_categories"); // get all categories, but you can use any taxonomy 
      $count = count($terms); //How many are they? 
      if ($count > 0){ //If there are more than 0 terms 
      foreach ($terms as $term) { //for each term: 
      echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n"; 
      //create a list item with the current term slug for sorting, and name for label 
      } 
      } 
      ?> 
      </ul> 

     <!-- Filter Array ---> 
     <div class="row"> 
      <div class="col-md-12"> 

        <?php $args = array('post_type' => 'bw_projects', 'posts_per_page' => 24); ?> 

        <?php $the_query = new WP_Query($args); ?> 

        <?php if ($the_query->have_posts()) : ?> 
         <ul class="img-list" id="isotope-list"> 
         <?php while ($the_query->have_posts()) : $the_query->the_post(); 
        $termsArray = get_the_terms($post->ID, "project_categories"); //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 
        } 
        ?> 
        <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?> 
          <a href="<?php echo get_permalink($post->ID); ?>"> 
           <?php the_post_thumbnail(); ?> 
           <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span> 
          </a> 
        </li> <!-- end item --> 
         <?php endwhile; ?> 
         </ul> <!-- end isotope-list --> 
        <?php endif; ?> 

      </div> 
     </div><!-- Close Filter Array ---> 

Dies wurde mit Hilfe der Isotopenfilterung, von diesen Anweisungen mit ein paar Modifikationen gebaut. https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/

UPDATE: Nach Marissa Kommentare, das ist jetzt, wie mein Code nach den Filtern aussieht.

<?php $args = array('post_type' => 'bw_projects', 'posts_per_page' => 18); ?> 

<?php $the_query = new WP_Query($args); ?> 

<?php if ($the_query->have_posts()) : ?> 
<ul class="img-list" id="isotope-list"> 

<?php $total_posts = wp_count_posts('bw_projects'); 
$total_posts = $total_posts->publish; 
$number_shown = 0; ?> 

<?php while ($the_query->have_posts()) : $the_query->the_post(); 
$termsArray = get_the_terms($post->ID, "project_categories"); //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 
} 
?> 
<li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?> 
    <a href="<?php echo get_permalink($post->ID); ?>"> 
     <?php the_post_thumbnail(); ?> 
     <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span> 
    </a> 
</li> <!-- end item --> 
<?php endwhile; ?> 
</ul> <!-- end isotope-list --> 
<?php endif; ?> 
      <?php if ($number_shown < $total_posts) { ?> 
<div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>"> 
     Load More 
</div> 
<?php } ?> 

Meine loadmore Datei ist in diesem aktuellen Zustand:

<?php 
global $post; 
$the_offset = trim(sanitize_text_field(wp_unslash($_POST['pOffset']))); 
$the_total = trim(sanitize_text_field(wp_unslash($_POST['totalPosts']))); 

$args = array('post_type' => 'bw_projects', 'posts_per_page' => 12, 'offset' => $the_offset); 
$posts_shown = $the_offset; //Increment this every time you display a project 
?> 

       <?php while ($the_query->have_posts()) : $the_query->the_post(); 
        $termsArray = get_the_terms($post->ID, "project_categories"); //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 
        } 
        ?> 
        <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?> 
          <a href="<?php echo get_permalink($post->ID); ?>"> 
           <?php the_post_thumbnail(); ?> 
           <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span> 
          </a> 
        </li> <!-- end item --> 
         <?php endwhile; ?> 
         </ul> <!-- end isotope-list --> 
       <?php endif; ?> 
<?php } ?> 

<?php //Then check if we've shown all the posts or not, and we're done. 
if ($posts_shown >= $the_total) { ?> 
    <div id="all-posts-shown"></div> 
<?php } ?> 

Auf der ausgegebenen HTML die Last mehr Taste in "data-total" und "Daten-Offset"

<div class="loadMore" data-offset="0" data-total="25"> 
Load More 
</div> 

bringen

Wenn mehr geladen wird, ändert sich der Offset zu:

<div class="loadMore" data-offset="12" data-total="25"> 
Load More 
</div> 

Außer ich sehe keine zusätzlichen Beiträge laden? Ich denke, ich muss etwas verpasst haben.

Answer 1

Sie können Ajax verwenden, um die nächste Runde von Posts per Knopfdruck oder Scroll zu ziehen. Wenn Sie immer noch den Überblick behalten, sind Schaltflächenklicks ein wenig einfacher zu verfolgen.

Vor der Schleife zum Anzeigen von Posts, finden Sie heraus, wie viele Posts insgesamt in Ihrem benutzerdefinierten Post-Typ sind, und einen Zähler, um zu verfolgen, wie viele Sie angezeigt haben.

$total_posts = wp_count_posts('bw_projects'); 
$total_posts = $total_posts->publish; 
$number_shown = 0; 

Dann wird die Schrittnummer bei jeder Anzeige eines Projekts angezeigt. Überprüfen Sie nach Ihrer Schleife, ob mehr Projekte angezeigt werden sollen, und fügen Sie dann eine loadmore-Schaltfläche mit Datenattributen hinzu, die den Offset (wie viele Posts Sie bereits angezeigt haben) und die Gesamtsumme speichern.

<?php if ($number_shown < $total_posts) { ?> 
    <div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>"> 
       Load More 
    </div> 
<?php } ?> 

Dann können Sie AJAX verwenden, um die nächsten Beiträge zu erhalten. Sie wollen zuerst Ihre AJAX-Funktion registrieren:

<?php 
/** 
* Put the following code in your functions.php file 
* get_loadmore is the name of the ajax function we are registering 
* projects-loadmore.php is the file with the contents which will be loaded 
* when the ajax call is made. 
*/ 

      add_action('wp_ajax_get_loadmore', 'get_loadmore'); 
      add_action('wp_ajax_nopriv_get_loadmore', 'get_loadmore'); 
      function get_loadmore() { 

       include(get_template_directory().'/projects-loadmore.php'); 
       wp_die(); 

      } 
?> 

Dann Sie Ihre Ajax-Funktion auf die Schaltfläche

<script> 
/**--- 
    Notes: 
    When loadMore button is clicked 
    This passes information to and pulls content dynamically from the template: projects-loadmore.php 
    The returned php and html code is inserted at the end of the #isotope-list div's content 
    variables are pulled from the loadmore button's data attributes. 
    Variables Passed: 
     - postOffset : how many posts have already been displayed 
     - totalPosts : The total number of published posts in this post type. 
---**/ 

$('.loadMore').click(function() { 

    //get the offset 
    var postOffset = $(this).attr('data-offset'); 
    var totalPosts = $(this).attr('data-total'); 
    var thisObj = $(this); 

    //get Page Template and put on page 
    var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>'; 

    $.ajax({ 
     type: 'POST', 
     url: ajax_url, 
     data: { 
      action: 'get_loadmore', 
      pOffset: postOffset, 
      totalPosts: totalPosts, 
     }, 
     dataType: "html", 
     success: function(data) { 
      $('#isotope-list').append(data); 
      $new_offset = parseInt (thisObj.attr('data-offset')) + 24; 
      thisObj.attr('data-offset', $new_offset) //set the new post offset. 
      if ($('#all-posts-shown')[0]) { 
       thisObj.slideUp(); //hide loadmore if all posts have been displayed. 
      } 
     }, 

     error: function(MLHttpRequest, textStatus, errorThrown){ 
      alert("error"); 
     } 
    }); 
}); //end of click function 
</script> 

einrichten möchten Klicken Sie dann alles, was übrig bleibt, ist, um Ihre Projekte-loadmore.php Datei gehen in greifen, die Variablen, optimieren Sie Ihre Abfrage, und die Einträge angezeigt werden:

<?php 
global $post; 
$the_offset = trim(sanitize_text_field(wp_unslash($_POST['pOffset']))); 
$the_total = trim(sanitize_text_field(wp_unslash($_POST['totalPosts']))); 

$args = array('post_type' => 'bw_projects', 'posts_per_page' => 24, 'offset' => $the_offset); 
$posts_shown = $the_offset; //Increment this every time you display a project 
?> 

//Get your posts and insert your while loop and display code here 

<?php //Then check if we've shown all the posts or not, and we're done. 
if ($posts_shown >= $the_total) { ?> 
    <div id="all-posts-shown"></div> 
<?php } ?> 

Es gibt viel mehr Sie mit diesem in Bezug auf Animationen und Tweaking tun können, aber das sollte genug sein, um Sie zu erhalten gestartet.