添加阿賈克斯加載更多按鈕到我的首頁

我爲我的網站使用預先製作的WordPress主題。然而，我想做一個自定義的frontpage.php，所以我做了，但現在的問題是，我不知道如何添加ajax加載更多按鈕。我的主題已經使用ajax加載更多按鈕，所以我認爲這很容易添加。但我想我可能會在錯誤的地方添加代碼，或者讓我的查詢搞砸了？添加阿賈克斯加載更多按鈕到我的首頁

任何人都可以幫我添加此加載更多按鈕？

我的自定義前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();

的-nav.php後的代碼，我發現我的主題裏面

<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>

這是負載更多按鈕如何出現在我的本地主機上

我想讓我的首頁發佈佈局看起來像的例子。一行一行，一行兩行兩行，一行一行，依此類推。然後在每15個帖子後出現加載更多按鈕。

這是Chrome開發者看來，當我檢查負載更多按鈕像

來源

2017-07-29 user6738171

如果你檢查元件會出現什麼？任何錯誤？ – Dylan

我沒有得到任何錯誤。 – user6738171

user6738171考慮這個https://rudrastyh.com/wordpress/load-more-posts-ajax.html – vagelis

一下添加到前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();

然後在functions.php的添加下面這段代碼：

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; 
}

我想在前面，你的page.php文件循環播放設置有問題需要解決，在帖子每頁參數，顯示帖子每頁 + 結果。

讓我知道這是否能解決您的問題。

來源

2017-08-03 21:33:04

紅色標記不是加載更多按鈕。當我上傳主題時，我在上面添加了一張圖片，顯示「加載更多」按鈕的樣子。對於我的主頁，我想使用引導程序，我希望它在一行中的1個帖子和每行2個帖子的2行之間交替，等等，然後在15個帖子之後有一個加載更多按鈕。（我在我原來的問題中放置了一個例子）。我試圖通過編碼front-page.php來構建它。我想我編碼是正確的（也許？），但我不知道如何將主題中的加載更多按鈕從page.php文件添加到該定製中。 – user6738171

第二個代碼與所有代碼的外觀如何？ – user6738171

感謝您的幫助。此代碼無法正常工作。它只加載兩個帖子（每行1個）。然後每次按下加載更多按鈕時，它只會加載一個帖子？ – user6738171

你或許應該只使用適當的插件來提供你有點吃力具有的功能。

這個https://en-ca.wordpress.org/plugins/easy-load-more/聲稱做你正在尋找與「最小」的主題變化。

來源

2017-08-03 14:44:10 catbadger

添加阿賈克斯加載更多按鈕到我的首頁

回答

相關問題