1. ホーム
  2. 質問と答え
  3. ホームページのn番目のポストごとにウィジェットを追加する

ホームページのn番目のポストごとにウィジェットを追加する

2017-10-19 6 views
1

私は、特定の数の投稿が表示された後、私のフロントページ（instagram、pinterest、newsletter、videosなど）に異なるカスタムウィジェットを追加する方法を見つけようとしています。これの例はhttp://margoandme.comですが、このブログと違って、次のページに行った後でも、ウィジェットがn番目の投稿ごとに表示され続けるようにしたいと思います。ホームページのn番目のポストごとにウィジェットを追加する

これはどのようにして達成できますか？私は自分のPHPファイルにウィジェット（例えばinstagramのようなもの）をコーディングして、私のフロントページのループにphpファイルを追加するのですか？私がこれをすれば、どのようにn番目の投稿ごとにそれらのそれぞれを表示させるのですか？私は約5つのウィジェットがほしいと思っていて、5つの投稿ごとに1つのウィジェットを表示したい。

私の前-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 }の下にウィジェットを追加して呼び出してください。

条件が整ったら、必要なものを正確に把握できます。

ループとウィジェットの詳細については、すでに定義されている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つのデータセットを持ち、1つは投稿/フィードを持ち、もう1つはウィジェットデータを持ちます。

例：

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を結合する必要があります。

この方法では、テンプレートビューやデータのさまざまな種類のカード/ウィジェットを保持できます。

私は通常、自分のカードを組み合わせてフィードと呼んで、そのカードに「タイプ」属性を追加します。これにより、私はカードのためのダイナミックな位置を保つことができます。

出力：

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

そして、forループでそれらをレンダリングしながら、あなただけの

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

を確認することができますが、この情報がお役に立てば幸いです。

出典

2017-10-27 13:34:35

関連する問題

 関連する問題