フロントページから検索ページにボタンを追加する

私のフロントページには、1行の投稿、2行の2行の行、1行の投稿などが設定されていますに。その後、15のポストごとに、より多くのボタンをロードします（下の例を参照）。より多くのボタンをロードすると完全に機能するので、私は検索ページにそれを複製しようとしています。フロントページから検索ページにボタンを追加する

検索ページに同じボタンを追加するボタンを追加します。しかし、私はこのページで私の投稿を別々に設定していますが、私はちょうど各行に2つの投稿を持っています（交互のcol-12投稿はありません）。別のループ構造に加えて、8つのポストごとにロードを追加したい（下記の例）。私はfunctions.phpのフロントページのループ構造を複製し、8つのポストごとに異なるループ構造とロードボタンに合わせて調整しました。ただし、正しく動作しません。最初の8つの投稿は、私がそれらをどのようにして表示するか、1行につき2つの投稿の4つの行を表示しています。しかし、ロードボタンを押した後、フロントページのループのようにポストが表示されます（1行に1ポスト、2行に2行、1行に1ポストなど）。

私はこれをどのように修正できるか知っていますか？または、1行につき2つの投稿を含む4行の検索ページを達成できますか？前もって感謝します。私のフロントページがどのように見えるか

私は私の検索ページを見てみたいか

私の前-page.php

<?php 
 

 
get_header(); 
 
get_template_part ('post-template/trendingg'); 
 
?> 
 

 

 

 
<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(); 
 
      } 
 
      }, 
 
      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' => 'post_date', 
 
'order' => 'DESC', 
 
    '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"> 
 
          <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a> 
 
         </div> 
 
         <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
 
         <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
         <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('includes/front-shop-the-post'); ?> 
 
          <?php get_template_part('includes/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'); ?>> 
 
        <div class="two-front-container"> 
 
         <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <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('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/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> 
 

 
<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom --> 
 
<?php 
 
get_footer();

私のfunctions.phpのフロントページループ

//FRONT PAGE 
 
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' => 'post_date', 
 
'order' => 'DESC', 
 
     '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"> 
 
          <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a> 
 
         </div> 
 
         <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
 
         <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
         <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('includes/front-shop-the-post'); ?> 
 
          <?php get_template_part('includes/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'); ?>> 
 
        <div class="two-front-container"> 
 
         <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <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('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/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; 
 
}

私のsearch.php

<?php 
 

 
get_header(); 
 
?> 
 
    <div class="search-results-search"> 
 
<form role="search" method="get" class="search-form-search form-inline-search" action=""> 
 
      <div class="input-group-search"> 
 
       <input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>"> 
 
      </div> 
 
     </form> 
 
    </div> 
 

 

 

 
<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_search_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(); 
 
      } 
 
      }, 
 
      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' => 8, // i use 1 for testing 
 
     'orderby' => 'post_date', 
 
'order' => 'DESC', 
 
    '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($j % 2 === 0){ echo '<div class="row">';} ?> 
 
       <article <?php post_class('col-sm-6 col-md-6'); ?>> 
 
        <div class="two-front-container"> 
 
        <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <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('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/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 
 
      } 
 
     }?> 
 

 
</section> 
 

 
<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom --> 
 
<?php 
 
get_footer();

0私のfunctions.php探索ループ

//SEARCH PAGE 
 
add_action('wp_ajax_my_search_load_more_function', 'my_search_load_more_function'); 
 
add_action('wp_ajax_nopriv_my_search_load_more_function', 'my_search_load_more_function'); 
 

 
function my_search_load_more_function() { 
 

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

 

 
if ($the_query->have_posts()) { 
 

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

 
    if($j % 2 === 0){ echo '<div class="row">';} ?> 
 
       <article <?php post_class('col-sm-6 col-md-6'); ?>> 
 
        <div class="two-front-container"> 
 
        <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <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('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/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 
 
    
 

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

 
    exit; 
 
}

私の最初の最初の8の検索結果が正しい検索結果です。しかし、より多くのボタンを押すと、最新のものからすべての投稿がロードされます。

** search.php

<?php 
 

 
get_header(); 
 
?> 
 
    <div class="search-results-search"> 
 
<form role="search" method="get" class="search-form-search form-inline-search" action=""> 
 
      <div class="input-group-search"> 
 
       <input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>"> 
 
      </div> 
 
     </form> 
 
    </div> 
 

 

 

 
<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_s', // the name of the function in functions.php 
 
    paged: now, // set the page to get the ajax request 
 
    posts_per_page: 8, //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(); 
 
      } 
 
      }, 
 
      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' => 8, // i use 1 for testing 
 
     'orderby' => 'post_date', 
 
'order' => 'DESC', 
 
     's' => $s, 
 
    '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($j % 2 === 0){ echo '<div class="row">';} ?> 
 
       <article <?php post_class('col-sm-6 col-md-6'); ?>> 
 
        <div class="two-front-container"> 
 
        <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <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('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/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 
 
      } 
 
     }?> 
 

 
</section> 
 

 
<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom --> 
 
<?php 
 
get_footer();

**更新機能を更新しました。あなたが最初にあなたのAJAX呼び出しで、あまりにも検索値を与える必要がありますPHPの探索ループ

//SEARCH PAGE 
 
add_action('wp_ajax_my_load_more_function_s', 'my_load_more_function_s'); 
 
add_action('wp_ajax_nopriv_my_load_more_function_s', 'my_load_more_function_s'); 
 

 
function my_load_more_function_s() { 
 
    global $query_string; 
 

 
    $search_query = wp_parse_str($query_string); 
 
    $search = array_merge($search_query, [ 
 
     'posts_per_page' => $_POST["posts_per_page"], 
 
     'orderby' => 'post_date', 'order' => 'DESC', 
 
     'paged' => get_query_var('paged', $_POST["paged"]), 
 
     's' => $_POST['s'] 
 
    ]); 
 

 
    $query = new WP_Query($search); 
 

 

 
if ($query->have_posts()) { 
 

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

 
    if($j % 2 === 0){ echo '<div class="row">';} ?> 
 
       <article <?php post_class('col-sm-6 col-md-6'); ?>> 
 
        <div class="two-front-container"> 
 
        <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <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('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/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 
 
      } 
 
     }else{ 
 
     return 0; 
 
    } 
 

 
    exit; 
 
}

出典

2017-10-14 user6738171

私は@sysixが正しい答えを提供してきたと信じています。ソリューションではない場合はうまく更新してください。 – Adibas03

。 search.php

から

であなたのスタートコードを置き換える：

var now=2; // when click start in page 2 
var searchValue = <?php echo json_encode(['s' => $s]); ?>; 

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_s', // the name of the function in functions.php, 
      s: searchValue.s, // the value from the input 
      paged: now, // set the page to get the ajax request 
      posts_per_page: 8, //number of post to get (use 1 for testing) 
     },

json_encode

であなたのs変数をエンコードしてから、AJAX機能は次のように変更します。

function my_load_more_function_s() { 
    global $query_string; 

    $search_query = wp_parse_str($query_string); 
    $search = array_merge($search_query, [ 
     'posts_per_page' => $_POST["posts_per_page"], 
     'orderby' => 'post_date', 'order' => 'DESC', 
     'paged' => get_query_var('paged', $_POST["paged"]), 
     's' => $_POST['s'] 
    ]); 

    $query = new WP_Query($search);

s -parametはdocsにあります。

検索ページの詳細を読んだ後。私は、global $query_stringを使用しなければならないことを発見しました。あなたのためdocs too

でこれを見つけることができますが、あなたがJavaScriptのようなのための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: <?php echo $number; ?> //number of post to get (use 1 for testing) 
}

出典

2017-10-19 21:02:22 Sysix

私はそれを提案されたコードに変更すると、すべての負荷で8つのポストしか表示されません。しかし、それはmy_load_more_functionからポストループを呼び出しています。だから私はmy_search_load_more_functionに私の検索機能（私の元の質問で）を変更しようとしましたが、今私がロードボタンを押すと、ポップアップボックスがlocalhost：888と言うポップアップ：[オブジェクトオブジェクト] – user6738171

私は私の最初の質問で言及したように、私のフロントページのポストレイアウトは、私が検索ページで達成しようとしているポストレイアウトとは異なります。私の一番上のページには、私の検索ページに7番目のポストcol-md-12がありますが、7番目のポストをすべて取り除き、それらをすべてcol-md-6にしたいと考えています。 – user6738171

あなたはネットワーク分析ツールブラウザのinbuild）、あなたのAjax呼び出しの応答は何ですか。私はこれがいくつかのPHPエラー/警告を生成すると思います。 – Sysix

フロントページから検索ページにボタンを追加する

答えて

関連する問題