Auf meiner Titelseite habe ich meine Posts als 1 Post in einer Reihe, 2 Reihen mit 2 Posts in einer Reihe, 1 Post in einer Reihe und so weiter eingerichtet. Dann erscheint nach jeweils 15 Beiträgen die Schaltfläche „Mehr laden“ (Beispiel unten). Die Schaltfläche “Mehr laden” funktioniert einwandfrei, daher versuche ich, sie auf meiner Suchseite zu duplizieren.
Ich möchte meiner Suchseite dieselbe Schaltfläche “Mehr laden” hinzufügen. Allerdings habe ich meine Posts auf dieser Seite anders eingerichtet, ich habe nur 2 Posts in jeder Zeile (es gibt keinen alternierenden Col-12-Post). Neben der unterschiedlichen Schleifenstruktur möchte ich nach jeweils 8 Posts den Load More-Button hinzufügen (Beispiel unten). Ich habe die Schleifenstruktur für meine Startseite in meiner functions.php dupliziert und an die unterschiedliche Schleifenstruktur und die Schaltfläche „Mehr laden“ nach jeweils 8 Posts angepasst. Es wird jedoch nicht richtig funktionieren. Die ersten 8 Beiträge werden so angezeigt, wie ich sie haben möchte, 4 Reihen mit 2 Beiträgen pro Reihe. Aber nachdem Sie auf die Schaltfläche „Mehr laden“ geklickt haben, werden die Beiträge so angezeigt, wie sie es auf meiner Titelseitenschleife tun (15 Beiträge mit 1 Beitrag in einer Reihe, 2 Reihen mit 2 Beiträgen in einer Reihe, 1 Beitrag in einer Reihe usw.). .
Weiß jemand, wie ich das beheben könnte? Oder eine Suchseite mit 4 Zeilen mit 2 Beiträgen pro Zeile erreichen? Danke im Voraus.
wie meine Titelseite aussieht
wie meine Suchseite aussehen soll
meine frontpage.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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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();
Meine Funktionen.php-Frontpage-Schleife
//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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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;
}
meine 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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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();
meine functions.php-Suchschleife
//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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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;
}
Meine ersten ersten 8 Suchergebnisse sind die richtigen Suchergebnisse. Nachdem ich jedoch auf die Schaltfläche „Mehr laden“ drücke, werden alle meine Beiträge, beginnend mit dem neuesten, geladen.
** Aktualisierte 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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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();
**Suchschleife von functions.php aktualisiert
//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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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;
}
Ich glaube, @sysix hat die richtige Antwort gegeben. Bitte aktualisieren, wenn nicht die Lösung.
– Adibas03
19. Oktober 2017 um 22:20 Uhr