web-dev-qa-db-ja.com

Infinite Scrollを使用して10番目の投稿ごとに広告を配置する

私はいくつかの広告をロードする必要があります、いくつかの通常のHTMLと2つはJavaスクリプトです。私はこれのPHPメソッドを試しました：

<?php $postnum++; if($postnum%10 == 0) { ?>
 <div id="topset">
  <ul id="top_ad_list">
      <?php dynamic_sidebar('botad'); ?>
  </ul>
 </div> 
<?php } ?>

何が起こるかは、それが追加をロードする無限スクロールからの最初のページ付けのためであり、新しくロードされたページではもはや広告をロードしないでしょう。

私が使っているInfinite Scrollは次のとおりです。 Infinite Ajax Scroll

paginationjavascript
2
espnicholas

これを参照してください。 http://infiniteajaxscroll.com/docs/events.html#rendered

そのため、すべての広告コードをajax関数に配置します（ http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_%28action%29 ）

add_action( 'wp_ajax_your_ad_fn', 'your_ad_fn');
add_action( 'wp_ajax_nopriv_your_ad_fn', 'your_ad_fn');

function your_ad_fn(){
    // your ad code here
    // if sending js, set Content-type header to application/javascript
    // if sending html, text/html
}

https://stackoverflow.com/questions/9664282/difference-between-application-x-javascript-and-text-javascript-content-types

それからあなたのカスタムjsで、

ias.on('rendered', function(items) {
    var $items = $(items);
    jQuery.get(
        'http://yoursite.com/wp-admin/admin-ajax.php', // I've just illustrated, don't write the url directly, do it via wp_localize_script
    ).done( function( data ) ){
         $items.after(data); // append ad after all the loaded posts
    });        
})

これは正確なコードではなくです、あなたはあなた自身でいくつかの詳細を解決しなければなりません。

1
Saurabh Shukla

問題を解決するには、onLoadItemsイベントを使用して機能を追加します。これにより、アイテムが追加されるたびに広告が挿入され、イベントがトリガーされたときに渡されるitems配列のサイズを追加してロードされるアイテム数を追跡できます。ある種類のカウンターに、そしてカウンターが10にヒットしたとき、広告を追加し、あなたのカウンターを0にリセットします。

あなたの回答から、私はあなたのJavaScriptの知識のレベルがそれほど良くないと思いますか？また、スクリプトで提供されているドキュメントを使用してもこの変更を行うのに苦労していますか。私は正しいですか？イベントとは何か、またそれらがどのように機能するのか知っていますか。そうでない場合は、誰かが完全にコード化された解決策をここに投稿するのを待つか、GitHub issue trackerに問題として質問を投げかけることができます。

0
Simon Forster