0

これは、グリッドビューを持つ私がカスタマイズしているカスタムWordpressテーマ用です。

Twitterのように、同じページに投稿をロードしたかったのです。無限スクロールのような多くのプラグインを試しました...しかし、それを機能させることができませんでした。次に、pbd-ajax-load-postsを試し、投稿をロードしましたが、投稿を独自のコンテナーにロードすることができません。それらは単に互いの下にロードされます。

.phpテンプレートのサンプル：

<?php get_header();  ?>
    <?php get_sidebar(); ?>
    <!-- CONTENT CONTAINER -->
<div id="content">
    <!-- INNER WRAPPER -->
<div id="inner">

    <!-- GRID CONTENT UL - EACH LI IS A GRID CONTAINER -->
    <ul id="grid-content">  

    <!-- OPEN THE GRID LOOP QUERY -->   
    <?php while ( have_posts() ) : the_post(); ?>

        <!-- GRID MODULE LOOP -->   
        <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                      <!-- title, featured-image, ect.... -->

プラグインから.jsファイルに小さな変更を加えましたが、どれも機能していないようです。これは、プラグイン内の元のファイルです。

jQuery(document).ready(function($) {
// The number of the next page to load (/page/x/).
var pageNum = parseInt(pbd_alp.startPage) + 1;

// The maximum number of pages the current query can return.
var max = parseInt(pbd_alp.maxPages);

// The link of the next page of posts.
var nextLink = pbd_alp.nextLink;

/**
 * Replace the traditional navigation with our own,
 * but only if there is at least one page of new posts to load.
 */
if(pageNum <= max) {

         // Insert the "More Posts" link.
    $('#content') //<--- I had changed it to #grid-content 

        .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
        .append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');

    // Remove the traditional navigation.
    $('.navigation').remove();
}

/**
 * Load new posts when the link is clicked.
 */
$('#pbd-alp-load-posts a').click(function() {

    // Are there more posts to load?
    if(pageNum <= max) {

        // Show that we're working.
        $(this).text('Loading posts...');

        $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
            function() {
                // Update page number and nextLink.
                pageNum++;
                nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                // Add a new placeholder, for when user clicks again.
                $('#pbd-alp-load-posts')
                    .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                // Update the button message.
                if(pageNum <= max) {
                    $('#pbd-alp-load-posts a').text('Load More Posts');
                } else {
                    $('#pbd-alp-load-posts a').text('No more posts to load.');
                }
            }
        );
    } else {
   // I changed this below to >>> .html('message here'); instead
        $('#pbd-alp-load-posts a').append('.');

    }   

    return false;
});
});

テンプレートのループの後で単純なhtmlでテストすると、希望する結果が得られます。サンプル：

                                   </div>
                <!-- /MODULE TEXT -->

            </li>
            <!-- /GRID MODULE LOOP -->  

       <?php endwhile; ?>       
       <!-- /END GRID LOOP QUERY -->


             <!-- I want to have the posts of the next page load in seperate 
                      containers like this -->  
             <li>Post 11 </li>
         <li>Post 12 </li>
         <li>Post 13 </li>  
                     <!--Then on the next click it would load 10 more -->  

                     <!-- couldn't get it loading in here  
                      <div class="gridcontent2"></div>-->

    </ul>
<!-- /END GRID LIST -->

どんな助けでもありがたいです。

4

1 に答える 1

0

ほとんどの場合、HTML に準拠しないため、リスト項目内に投稿を配置しません。JavaScript コードは.before、新しい投稿を div にロードするように pbd に指示します。それらをリスト項目に入れたい場合、これらは である必要がありますli。ただし、最初にポイント 1 を参照してください。li は使用しないでください。

リンクされたサイトを確認しないと、何が問題なのかを判断するのは困難ですが、私の推測では、プレースホルダー コンテンツが間違った場所にあると思われます。プラグインの作成者が提案したように、div の使用に切り替えます。

更新 あなたのフィードバックに基づいて、2 つの可能性が見えます。初め

行$('#grid-content')blahblahblah は、コンテンツ グリッドの後にデータ リトリーバーを配置します。その中にはありません。内部に入れるには、代わりにこれを使用します。

$('#grid-content ul')

これがレイアウトを台無しにするかどうかはわかりません。リスト内に div を配置することは確かに違法です。あなたは切り替えることができます

.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

合法である何か他のものと。

あなたが試すことができるもう1つのこと-そしてこれはコードには表示されません-新しい投稿のinsertステートメントで代わりにulをターゲットにすることです。ただし、これがどこで発生するかわからないため、その方法を説明することはできません。

Update2

When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.

.load メソッドは、新しい投稿を挿入します。したがって、現在のコードで確認できます

$('.pbd-alp-placeholder-'+ pageNum).load

プレースホルダーの新しいコンテンツをターゲットにします。代わりに、あなたの ul をターゲットにします。したがって、次のようになります。

$('#grid-content ul').load

Update1 で提供した情報の代わりにこれを行う

于 2011-07-11T00:04:33.367 に答える