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

标签 javascript php html wordpress

我正在尝试弄清楚如何在出现一定数量的帖子后将不同的自定义小部件添加到我的首页(例如 Instagram、pinterest、时事通讯、视频)。一个例子是 http://margoandme.com ，但是与此博客不同的是，即使您转到下一页，我也希望小部件在每第 n 个帖子后继续出现。

我该如何实现这个目标？我是否可以在自己的 php 文件中对小部件(例如 Instagram 的小部件)进行编码，然后将 php 文件添加到我的首页循环中？如果我这样做，我将如何让它们每个人都出现在每第 n 个帖子之后。我想我想要大约 5 个小部件，并且我希望每 5 个帖子后出现其中一个。

我的首页.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;
}

***我根据建议更新了 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;
}

最佳答案

您已经有一个条件语句，使用 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

关于javascript - 在主页上每第 n 个帖子后添加小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46838090/

上一篇：javascript - 通过单击按钮启用文本区域但同时不打印它

下一篇：javascript - 使用 push() 添加新元素后，VueJS 检测 DOM 何时准备好

相关文章：

html - 在 div 中居中三 Angular 形

html - Bootstrap - 无法让按钮居中

html - 字体大小是否可以设置为 0px 以隐藏标签，并且屏幕阅读器仍然可以阅读

javascript - NodeJS - 日志记录 - 日志记录中的请求或堆栈号

php - 如何实时显示链接计数器的变化？

php - iframe 应适合移动设备的整个屏幕

php - 如何在YouTube直播中使用自定义石板图片？

javascript - 将 $(this) 传递给绑定(bind)回调函数

javascript - 节点红色数组/如何 "use"具体地方

javascript - 传单的Three.js层

©2024 IT工具网  联系我们