Dodawanie przycisku ładowania ajax więcej do mojej strony głównej

Question

Używam wstępnie utworzonego motywu wordpress dla mojej witryny. Jednak chciałem zrobić niestandardowy front-page.php tak zrobiłem, ale teraz problem polega na tym, że nie mogę się dowiedzieć, jak dodać do niego przycisk ładowania ajax więcej. Mój motyw już korzysta z przycisku ładowania ajax więcej, więc pomyślałem, że łatwo będzie dodać. Ale myślę, że mogę dodawać kod w niewłaściwym miejscu, lub moje pytania są pomieszane?

Czy ktoś może mi pomóc dodać ten przycisk ładowania więcej?

mój zwyczaj przednie page.php

<?php 

    get_header(); 
    get_template_part ('inc/carousel'); 

    $the_query = new WP_Query([ 
     'posts_per_page' => 13, 
     'paged' => get_query_var('paged', 1) 
    ]); 

    if ($the_query->have_posts()) { ?> 
     <div id="ajax"> 
     <?php 
      $i = 0; 
      $j = 0; 
      while ($the_query->have_posts()) { 
       $the_query->the_post(); 

       if ($i % 5 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
        <div class="row"> 
         <article <?php post_class('col-sm-12 col-md-12'); ?>> 
          <div class="large-front-container"> 
           <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
          </div> 
          <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
          <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
          <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
          <div class="front-page-post-info"> 
           <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
           <?php get_template_part('front-shop-the-post'); ?> 
           <?php get_template_part('share-buttons'); ?> 
           <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
          </div> 
         </article> 
        </div> 
       <?php } else { // Small posts ?> 
        <?php if($j % 2 === 0) echo '<div class="row">'; ?> 
         <article <?php post_class('col-sm-6 col-md-6'); ?>> 
          <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
          <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
          <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
          <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
          <div class="front-page-post-info"> 
           <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
           <?php get_template_part('front-shop-the-post'); ?> 
           <?php get_template_part('share-buttons'); ?> 
           <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
          </div> 
         </article> 
       <?php $j++; if($j % 2 === 0) echo '</div>'; ?> 
     <?php 
     } 
     $i++; 
     }?> 
     </div> 
    <?php 
    } 
    get_footer(); 

post-nav.php kod, który znalazłem w moim tematem

<div class="row pagination-below"><div class="col-md-12"> 
    <?php 
    $pagination_type = novablog_getVariable('pagination_type') ? novablog_getVariable('pagination_type') : 'pagnum'; 
    if($pagination_type=='pagnum') : 

     the_posts_pagination(array(
      'mid_size' => 3, 
      'type' => 'list', 
      'prev_text'   => theme_locals("prev"), 
      'next_text'   => theme_locals("next") 
     )); 
    endif; 

    global $wp_query; 
    if ($wp_query->max_num_pages > 1 && $pagination_type=='paglink') : ?> 
     <div class="paglink"> 
      <span class="pull-left"><?php previous_posts_link(theme_locals("newer")) ?></span>  
      <span class="pull-right"><?php next_posts_link(theme_locals("older")) ?></span> 
     </div> 
    <?php endif; ?> 

    <?php 
     if ($wp_query->max_num_pages > 1 && $pagination_type=='loadmore' or $wp_query->max_num_pages > 1 && $pagination_type=='infinite') { 
      $all_num_pages = $wp_query -> max_num_pages; 
      $next_page_url = novablog_next_page($all_num_pages); 
    ?> 
      <div class="ajax-pagination-container"> 
       <a href="<?php echo esc_url($next_page_url); ?>" id="ajax-load-more-posts-button"></a> 
      </div> 
    <?php } ?> 
</div></div> 

ten sposób obciążenie więcej przycisków na moim lokalnego hosta pojawia

przykład tego, jak powinien wyglądać układ postów na pierwszej stronie. 1 stanowisko w rzędzie, 2 rzędy po 2 posty z rzędu, 1 wiadomość z rzędu i tak dalej. Następnie po każdych 15 postach pojawia się przycisk ładowania więcej.

To co chrom deweloper wygląda kiedy skontrolować ładować więcej przycisk

Answer 1

Dodaj to do front-page.php

<?php 

get_header(); 
get_template_part ('inc/carousel'); 

?> 


<script> 
    var now=2; // when click start in page 2 

    jQuery(document).on('click', '#load_more_btn', function() { 

     jQuery.ajax({ 
      type: "POST", 
      url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php", 
      data: { 
       action: 'my_load_more_function', // the name of the function in functions.php 
       paged: now, // set the page to get the ajax request 
       posts_per_page: 15 //number of post to get (use 1 for testing) 
      }, 
      success: function (data) { 

      if(data!=0){ 
       jQuery("#ajax").append(data); // put the content into ajax container 
       now=now+1; // add 1 to next page 
      }else{ 
       jQuery("#load_more_btn").hide(); 
       jQuery("#content-load-more-btn").html("<h4>No more results</h4>"); 
      } 
      }, 
      error: function (errorThrown) { 
       alert(errorThrown); // only for debuggin 
      } 
     }); 
    }); 
</script> 

<section id="ajax"><!-- i have to change div to section, maybe a extra div declare --> 
<?php 

$the_query = new WP_Query([ 
    'posts_per_page' => 15, // i use 1 for testing 
    'orderby'=>'title', // add order for prevent duplicity 
    'order'=>'ASC', 
    'paged' => get_query_var('paged', 1) //page number 1 on load 
]); 

if ($the_query->have_posts()) { 

     $i = 0; 
     $j = 0; 
     while ($the_query->have_posts()) { 
      $the_query->the_post(); 

      if ($i % 5 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
       <div class="row"> 
        <article <?php post_class('col-sm-12 col-md-12'); ?>> 
         <div class="large-front-container"> 
          <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
         </div> 
         <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
         <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
         <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
         <div class="front-page-post-info"> 
          <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
          <?php get_template_part('front-shop-the-post'); ?> 
          <?php get_template_part('share-buttons'); ?> 
          <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
         </div> 
        </article> 
       </div> 
      <?php } else { // Small posts ?> 
       <?php if($j % 2 === 0){ echo '<div class="row">';} ?> 
       <article <?php post_class('col-sm-6 col-md-6'); ?>> 
        <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
        <div class="front-page-post-info"> 
         <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
         <?php get_template_part('front-shop-the-post'); ?> 
         <?php get_template_part('share-buttons'); ?> 
         <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
        </div> 
       </article> 
       <?php $j++; if($j % 2 === 0){ echo '</div>';}?> 
       <?php 
      } 
      $i++; 
     }?> 
    <?php 
}?> 
</section> 
<div id="content-load-more-btn"> 
<button id="load_more_btn">Load More</button> <!-- button out of ajax container for load content and button displayed at the bottom --> 
</div> 
<?php 
get_footer(); 

A potem w functions.php dodać ten kod poniżej:

add_action('wp_ajax_my_load_more_function', 'my_load_more_function'); 
add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function'); 

function my_load_more_function() { 

    $query = new WP_Query([ 
     'posts_per_page' => $_POST["posts_per_page"], 
     'orderby'=>'title', 
     'order'=>'ASC', 
     'paged' => get_query_var('paged', $_POST["paged"]) 
    ]); 


    if ($query->have_posts()) { 

     $i = 0; 
     $j = 0; 

     while ($query->have_posts()) { 
       $query->the_post(); 

      if ($i % 5 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
       <div class="row"> 
        <article <?php post_class('col-sm-12 col-md-12'); ?>> 
         <div class="large-front-container"> 
          <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
         </div> 
         <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
         <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
         <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
         <div class="front-page-post-info"> 
          <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
          <?php get_template_part('front-shop-the-post'); ?> 
          <?php get_template_part('share-buttons'); ?> 
          <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
         </div> 
        </article> 
       </div> 
      <?php } else { // Small posts ?> 
       <?php if($j % 2 === 0) echo '<div class="row">'; ?> 
       <article <?php post_class('col-sm-6 col-md-6'); ?>> 
        <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
        <div class="front-page-post-info"> 
         <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
         <?php get_template_part('front-shop-the-post'); ?> 
         <?php get_template_part('share-buttons'); ?> 
         <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
        </div> 
       </article> 
       <?php $j++; if($j % 2 === 0) echo '</div>'; ?> 
       <?php 
      } 
      $i++; 

     } 
     wp_reset_query(); 
    }else{ 
     return 0; 
    } 

    exit; 
} 

myślę ustawienia pętli w przednim page.php problemy do rozwiązania w parametrze posts-per-page powoduje wyświetlenie wyników post-per-page + .

Daj mi znać, jeśli to rozwiąże Twoje pytanie.

Answer 2

Należy prawdopodobnie wystarczy użyć odpowiedniej wtyczki, aby zapewnić funkcjonalność jesteś stuggling z.

Ten https://en-ca.wordpress.org/plugins/easy-load-more/ twierdzi, że robi dokładnie to, czego szukasz z "minimalnymi" zmianami motywów.