1. 首頁
  2. 問答
  3. 在主頁上的每第n個帖子後添加小部件

在主頁上的每第n個帖子後添加小部件

2017-10-19 8 views
1

我想知道如何在出現特定數量的帖子後向我的首頁添加不同的自定義小部件（如instagram，pinterest，新聞稿，視頻）。這方面的一個例子是http://margoandme.com，但是不同於這個博客，我希望即使在轉到下一頁之後，小部件仍然會在每第n個帖子後出現。在主頁上的每第n個帖子後添加小部件

我該如何做到這一點？我會在他們自己的php文件中編寫小部件（比如一個用於instagram的小部件），並將php文件添加到我的首頁循環中嗎？如果我這樣做，而不是如何讓每個人在每第n個帖子後出現。我想我想要5個小工具，我希望其中的一個在每5個職位後出現。

我前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; 
 
}

***我更新前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> 
 
\t <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();

***根據建議

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

來源

2017-10-19 user6738171

回答

3

你已經有一個條件語句比較的指標我更新的functions.php您循環使用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

來源

2017-10-19 20:35:37

+0

我以爲我只是做了？ –

+7

這不是我在這裏提供的複製/粘貼解決方案。它是一個解釋，你將如何完成你想要做的事，以便教你如何運作，因爲你是新手。如果你只是想找人提供即插即用的代碼，那你就錯了。檢查我提供的內容並將其與自己的代碼進行比較，並努力採用它並學習。 –

+0

我對上面的例子做了一些修改，希望能幫助你更好地理解正在發生的事情。對不起所有大寫評論，但我想讓你知道更改的地方。 –

0

您已經實現的邏輯，如：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

來源

2017-10-24 15:44:40

0

上述方法不可縮放。 如果您正在查看社交網絡以供參考，那麼您希望以更好的方式做一些事情。

推薦方式的一個例子是擁有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', ...] 
]

雖然在使它們的循環，你可以檢查

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

希望這有助於。

來源

2017-10-27 13:34:35

相關問題

 相關問題