在主页上的每个第n个帖子后添加小部件

Question

我试图弄清楚如何在出现一定数量的帖子后向我的首页添加不同的自定义小部件（如Instagram，pinterest，简报，视频）。这方面的一个例子是http://margoandme.com，但是与这个博客不同的是，我希望即使在你转到下一页之后，小部件也会在每第n个帖子后出现。

我将如何做到这一点？我会在他们自己的php文件中编写小部件（比如一个用于Instagram），然后将php文件添加到我的首页循环中吗？如果我这样做，那么我将如何让它们在每个第n个帖子后出现。我想我想要5个小部件，我希望其中一个在每5个帖子后出现。

我的front-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();

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

***我根据建议更新了front-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();
                jQuery("#content-load-more-btn").html("<h4 class='no-more-load'>No more items to load.</h4>");
                jQuery('.no-more-load').delay(2000).fadeOut('slow');
            }
            },
            error: function (errorThrown) {
                alert(errorThrown); // only for debuggin
            }
        });
    });
     $(document).ready(function () {          
 
            setTimeout(function() {
                $('.no-more-show').slideUp("slow");
            }, 5000);
});
</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()) {
            $widgetCount = 0;
$widgets = ['widgets/shop-widget.php','widgets/insta-widget.php','widgets/video-widget.php','widgets/pinterest-widget.php'];
$numWidgets = count($widgets);
            $the_query->the_post();

            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... 
                 if ($widgetCount < $numWidgets) { //if we haven't used all the widgets
            include($widgets[$widgetCount]); //include next widget
            $widgetCount++; //increment the count
        }

                ?>
                <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>
	<div id="content-load-more-btn">
<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
</div>
<?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()) {
            $widgetCount = 0;
$widgets = ['widgets/shop-widget.php','widgets/insta-widget.php','widgets/video-widget.php','widgets/pinterest-widget.php'];
$numWidgets = count($widgets);
                $query->the_post();

            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... 
                        if ($widgetCount < $numWidgets) { //if we haven't used all the widgets
            include($widgets[$widgetCount]); //include next widget
            $widgetCount++; //increment the count
        }
                ?>
 <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;
}

Answer 1

您已经有一个条件语句，使用PHP modulo operator将循环索引与5整除。将您的逻辑放在if语句中。

至于你如何包含它们，有很多方法可以做到这一点，但你想确保它们不被复制。

这是一个粗略的布局，假设您只是将您的小部件放在包含文件中：

// CREATE A NEW .php FILE FOR EACH OF YOUR WIDGETS AND SAVE
// SAVE THEM TO YOUR SERVER. THEN ADD THE FOLLOWING 3 LINES BEFORE YOUR
// while LOOP. MAKE SURE THE NAMES OF YOUR NEW FILES ARE WHATS IN THE
// 'widgets' ARRAY AND THAT THE PATHS TO THE FILES ARE CORRECT.
$widgetCount = 0;
$widgets = ['twitter.php','insta.php','facebook.php','reddit.php'];
$numWidgets = count($widgets);

// FOLLOWING IS BASED ON YOUR EXISTING WHILE LOOP:
while ($the_query->have_posts()) {  //loop thru posts
    $the_query->the_post();
    if ($i % 5 === 0) { //if post divisible by 5 LOOK FOR THIS IN YOUR CODE!

        // ADD THE FOLLOWING.  THIS WILL ADD ONE OF YOUR WIDGETS FROM
        // FROM THE ARRAY ABOVE.
        if ($widgetCount < $numWidgets) { //if we haven't used all the widgets
            include($widgets[$widgetCount]); //include next widget
            $widgetCount++; //increment the count
        }

        // all your other existing post rendering here.


    } // end of if statement
} // end while loop

Answer 2

您已经实现了逻辑，例如： if( $i % 5 === 0 ) {} ，您无需在functions.php文件上调用相同的条件。只需在此 if ( $i % 5 === 0 ) { //Your Widget Code } 下添加您的小部件，然后将其调用即可。

一旦你有了自己的病情，那么你就能够实现你的需要。

有关Loop和Widgets的更多信息，请阅读已定义这些内容的WordPress支持。 （i）：https://codex.wordpress.org/Widgets_API和（ii）：https://codex.wordpress.org/Function_Reference/dynamic_sidebar

Answer 3

以上方法无法扩展。 如果您正在查看社交网络以供参考，那么您希望以更好的方式做一些事情。

推荐方法的一个示例是拥有2个数据集，一个将具有发布/订阅源，另一个将具有小部件数据。

示例：

Posts: [
 [post 1],
 [post 2],
  ...
]

小部件：

[
  [
    position: 5,
    widget: 'video',
    src: 'file, path or something',
    template: 'if to pick a specific template',
    ...(width, height)
  ],
  [
    position: 11,
    widget: 'ad',
    src: 'file, path or something',
    template: 'if to pick a specific template',
    ...(width, height)
  ],
]

现在，在渲染帖子/ Feed时，您只需要在渲染之前组合2。

这种方式允许保留任何模板视图或数据的各种类型的卡片/小部件。

我通常将我的卡片组合在一起并称之为Feed，然后添加一个＆＃39;类型＆＃39;归因于它。这使我能够保持卡的动态位置，不需要第5或第10。

输出：

[
  [ type: 'post', title: '', excerpt: '',...]
  [ type: 'video', ...]
  [ type: 'ad', ...]
]

在for循环中渲染它们时，您只需检查

即可

if(type = post)
  echo template('post', $data)
if(type = video) 
  echo template('video', $data)

希望这有帮助。