Wordpress/PHP Loop, Anzeige der ersten 3 Elemente, dann klicken, um mehr zu laden

Question

Ich habe eine Schleife erstellt, die im Grunde alle "featured Images" (post thumbnails) & Seitentitel von jeder Seite in meinem WordPress-Theme und zeigt sie auf der Vorderseite Seite. Das funktioniert gut, hier ist der Code so weit:

<?php $args = array(
'sort_order' => 'asc', 
'sort_column' => 'menu_order', 
'hierarchical' => 1, 
'exclude' => '', 
'include' => '', 
'meta_key' => '', 
'meta_value' => '', 
'authors' => '', 
'child_of' => $post->ID, 
'parent' => -1, 
'exclude_tree' => '', 
'number' => '', 
'offset' => 0, 
'post_type' => 'page', 
'post_status' => 'publish' 
); 
$pages = get_pages($args); 
?> 

<section id="blog"> 
    <div class="posts"> 
    <?php foreach ($pages as $page) : ?> 
    <?php 
     $background = wp_get_attachment_image_src(get_post_thumbnail_id($page->ID), 'full'); 
    ?> 
     <div class="small post" style="background-image: url('<?php echo $background[0]; ?>');"> 

      <a href="<?php the_permalink($page->ID); ?>"> 
       <span class="inside"> 
        <h2><?php echo apply_filters('the_title', $page->post_title, $page->ID); ?></h2> 
       </span> 
      </a> 
     </div> 
    <?php endforeach; ?> 
    </div> 
</section> 

Problem: Weil ich 10+ Seiten auf meiner Seite haben, Dieser Code gibt alle Bilder auf einmal vorgestellt. Das ist zu viel.

Was ich brauche: Ich mag, was ich Schleife heraus zu begrenzen, um 3 Bilder vorgestellt und dann in der Lage sein „Mehr anzeigen“ klicken, um eine anderen „x“ Menge an funktionsfähigen Bilder zu laden.

Ich habe ein perfektes Beispiel von dem gefunden, was ich hier brauche: jQuery load first 3 elements, click "load more" to display next 5 elements Aber es funktioniert einfach nicht für mich, ich bin nicht sicher, ob es, weil eine JQuery-Lösung für eine PHP-Schleife nicht die beste Lösung ist.

Answer 1

In WordPress get_pages() hinzufügen number Legt die Anzahl der Seiten zur Liste. Dies bewirkt, dass der SQL-LIMIT-Wert definiert wird. Standard bis kein LIMIT. und für Mehr brauchen Sie mit AJAX und jQuery

Bitte überprüfen Sie unten Code

Fügen Sie diesen Code in Ihre Seite zu tun, wo

Add

<?php 
$args = array(
'sort_order' => 'asc', 
'sort_column' => 'menu_order', 
'hierarchical' => 1, 
'exclude' => '', 
'include' => '', 
'meta_key' => '', 
'meta_value' => '', 
'authors' => '', 
'child_of' => $post->ID, 
'parent' => -1, 
'exclude_tree' => '', 
'number' => 3, 
'offset' => 0, 
'post_type' => 'page', 
'post_status' => 'publish' 
); 
$pages = get_pages($args); 
?> 
<section id="blog"> pages 
    <div class="posts" id="addviewmoredata"> 
    <?php foreach ($pages as $page) : ?> 
    <?php 
     $background = wp_get_attachment_image_src(get_post_thumbnail_id($page->ID), 'full'); 
    ?> 
     <div class="small post" style="background-image: url('<?php echo $background[0]; ?>');"> 

      <a href="<?php the_permalink($page->ID); ?>"> 
       <span class="inside"> 
        <h2><?php echo apply_filters('the_title', $page->post_title, $page->ID); ?></h2> 
       </span> 
      </a> 
     </div> 
    <?php endforeach; ?> 
    </div> 
    <div><a href="#" id="viewmore" data-id="2">View More</a></div> 
</section> 

Auflistung Seiten anzuzeigen Dieser jQuery-Code in Ihrer Seite, auf dem die Seiten mit der Liste

angezeigt werden sollen

<script> 
jQuery(document).ready(function(){ 
    jQuery(document).on("click","#viewmore",function(){ 
     var page=jQuery(this).attr("data-id"); 
     jQuery.ajax('<?php echo admin_url('admin-ajax.php'); ?>', { 
      type: "POST", 
      data: { 
       action:'custom_load_more', 
       page:page, 
       'postid':'<?php echo $post->ID; ?>', 
      }, 
      cache: false, 
      success: function (response) { 
       //alert(response); 
       if(response!="") 
       { 
        jQuery("#addviewmoredata").append(response); 

        page++; 

        jQuery("#viewmore").attr("data-id",page); 
       } 
       else 
       { 
        jQuery("#viewmore").remove(); 
       } 
      }, 
      error: function (error) { 
       if (typeof console === "object") { 
        console.log(error); 
       } 
      }, 
      complete: function() { 
      } 
     }); 
    }); 

}); 
</script> 

Fügen Sie diesen Code in Ihre Datei function.php ein.

function custom_load_more_callback() 
{ 

     global $wpdb; 
     $paged = ($_REQUEST['page']) ? $_REQUEST['page'] : 1; 
     $offset = ($paged - 1) * 3 + 1; 

     $args = array(
     'sort_order' => 'asc', 
     'sort_column' => 'menu_order', 
     'hierarchical' => 1, 
     'exclude' => '', 
     'include' => '', 
     'meta_key' => '', 
     'meta_value' => '', 
     'authors' => '', 
     'child_of' => $_REQUEST['postid'], 
     'parent' => -1, 
     'exclude_tree' => '', 
     'number' => 3, 
     'offset' => $offset, 
     'post_type' => 'page', 
     'post_status' => 'publish' 
     ); 
     $pages = get_pages($args); 

     ?> 
      <?php if(count($pages)){ 

      foreach ($pages as $page) : ?> 
      <?php 
       $background = wp_get_attachment_image_src(get_post_thumbnail_id($page->ID), 'full'); 
      ?> 
       <div class="small post" style="background-image: url('<?php echo $background[0]; ?>');"> 

        <a href="<?php the_permalink($page->ID); ?>"> 
         <span class="inside"> 
          <h2><?php echo apply_filters('the_title', $page->post_title, $page->ID); ?></h2> 
         </span> 
        </a> 
       </div> 
      <?php endforeach; } ?> 



<?php 
die(); 
} 
add_action('wp_ajax_custom_load_more', 'custom_load_more_callback'); // Logged-in users 
add_action('wp_ajax_nopriv_custom_load_more', 'custom_load_more_callback'); // Guest users