在首頁上的第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(); 

我的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的模運算符比較循環索引與被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

您已經實現了Logic，例如： if( $i % 5 === 0 ) {} ，您不需要在functions.php文件中調用相同的條件。 只需在此if ( $i % 5 === 0 ) { //Your Widget Code }您的窗口if ( $i % 5 === 0 ) { //Your Widget Code }下添加您的窗口if ( $i % 5 === 0 ) { //Your Widget Code }並調用它。

病情一旦發作，您就可以實現真正需要的東西。

有關Loop和Widget的更多信息，請閱讀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)
  ],
]

現在，在渲染帖子/提要時，您只需要在渲染之前將2合並即可。

這種方式允許保留任何模板視圖或數據的各種類型的卡/小部件。

通常，我會合並卡片並將其稱為提要，並為其添加“類型”屬性。 這樣我也可以保持動態位置，而不是所有位置的第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)

希望這可以幫助。