web-dev-qa-db-ja.com

Ajaxを追加するボタンを追加する

私は自分のテーマにプラグイン「Easy Load More」を追加しようとしています（ https://wordpress.org/plugins/easy-load-more/ ）。あなたはそれを<div id="ajax">でラップし、次にload moreボタンを動かしたいところに<?php load_more_button(); ?>を置くことになっています。私はこのコードを追加するための正しい場所を完全に理解することはできません（あなたがそれの下の私のコードからわかるようにそれは現在間違った場所にあります）。下の図は、「もっと読み込む」ボタンをどのように見せたいかの写真です。

enter image description here 

これが私の現在のfront-page.phpです。

<?php
/*
 * Template Name:
 */

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

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => $paged
] );

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

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-md-12' ); ?>>
            <?php the_post_thumbnail('large-thumbnail'); ?>
            <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article><?php

        } else { // Small posts ?>

            <article <?php post_class( 'col-md-4' ); ?>>
                <?php the_post_thumbnail( 'medium-thumbnail' ); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                <?php get_template_part( 'share-buttons' ); ?>
                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article>
            <?php
        }
        $i++;
    }
    wp_reset_postdata();?>
    </div>
    <?php
}
else {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
load_more_button();
get_footer();
ajaxbuttonsinfinite-scroll
1
user6738171

あなたのdivラッパーはあなたのwhileループの中にあり、あなたのif節で分割されています。あなたのループはID ajaxで最大14 divを生成するので、これは適切に動作することができません。

開始divタグをif ( $the_query->have_posts() ) {の後に、終了をwp_reset_postdata();の後に置くと、問題ありません。

編集

開始/終了phpタグを見逃していないことを確認していますか？例えばload_more_button（）はphpにラップされていますが、以前はphpを閉じていませんでした。

<?php
/*
 * Template Name:
 */

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

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

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

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-md-12' ); ?>>
            <?php the_post_thumbnail('large-thumbnail'); ?>
            <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article><?php

        } else { // Small posts ?>

            <article <?php post_class( 'col-md-4' ); ?>>
                <?php the_post_thumbnail( 'medium-thumbnail' ); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
                <?php get_template_part( 'share-buttons' ); ?>
                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
            </article>
            <?php
        }
        $i++;
    }?>
    </div>
    <?php if(get_query_var('paged') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
3
iantsch