web-dev-qa-db-ja.com

カスタムアーカイブページにjQuery Infinite Scrollを追加する方法

私は現在、自分の現在の投稿を上部に表示し、それより下の古い投稿のすべてにリンクするカスタムアーカイブページを持っています。ただし、現在の投稿が表示され、その下に現在の投稿が表示されるようにページを分割する必要があります。私はjQueryの無限スクロールプラグインを使用して、古いポストを月ごとにスクロールしながらページをスクロールダウンして表示します。

現在の投稿を表示するために必要なコードは次のとおりです。

<?php get_header(); ?>
    <div id="members-msg" class="para-element" data-offset="-0.1">
        <div class="third fleft">
            <?php
            global $post;
            $tmp_post = $post;
            $args = array( 'numberposts' => 1, 'category' => 6 );
            $myposts = get_posts( $args );
            foreach( $myposts as $post ) : setup_postdata($post); ?>
                <a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
                <?/* <?php the_excerpt(); ?> */?>
                <?php the_content();?>
            <?php endforeach; ?>

        </div>
        <div class="twothirds fright">
            <div id="slider-con">
                <ul id="slider">
                    <?php 
                    $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID ); 
                    $attachments = get_posts($args);
                    if ($attachments) {
                        foreach ( $attachments as $attachment ) {
                            echo '<li>';
                            the_attachment_link( $attachment->ID , 'full' );
                            echo '</li>';
                        }
                    }
                    ?>

                </ul>
                            <?php $post = $tmp_post; ?>
            </div>
        </div>
    </div>
</div>
</div>

これは私が私の古い記事を表示するために持っていなければならないコードです：

<div id="reason-header" class="row-fluid">
<div class="parallax">
    <div class="para-element" data-offset="-0.3">
        <h3>Browse <span>Our</span> Archives</h3>
    </div>
    <div id="reasons-hdr" class="para-image" data-offset="-0.8">
    </div>
</div>
</div>
<div id="all-posts">
<div class="content">
    <?php
     global $post;
     $tmp_post = $post;
     $myposts = get_posts('numberposts=-1&category=6&orderby=date&order=DESC');
     foreach($myposts as $post) :
    ?>
    <?php 
        setup_postdata($post);
                $size = 'thumb';
                $images = get_children(array(
                'post_type' => 'attachment',
                'numberposts' => 1,
                'post_status' => null,
                'post_parent' => $post->ID));
                foreach($images as $image){
                $attachment = wp_get_attachment_image_src($image->ID, $size);
                ?>
                <div class="rea-con" style="background: url(<?php echo   
$attachment[0]; ?>) no-repeat center center;">  
                    <h4><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title(); ?></a></h4>
                </div>
               <?php } ?>
        <?php endforeach; ?>
    <?php $post = $tmp_post; ?>
</div>
</div>

デフォルトで現在の月の投稿のみを引き出し、スクロールダウンすると前の月の投稿が自動的に表示され、さらにスクロールダウンすると自動的に月が表示されるそれが投稿の前に？

これを行うには、jQueryの無限スクロールプラグインを使用したいです。

任意の助けは大歓迎です。

ありがとうございます。

pluginspostsjqueryarchives
4
Jeremy

これはある種のページまたはページテンプレートだと思いますか。私は同様の必要性を持っていたので、新しいフィルタinfinite_scroll_load_javascriptを含めるために パッチをInfiniteスクロールプラグイン に提出しました。デフォルトでは、プラグインは特定の投稿やページにはロードされませんが、このフィルタを使用すると、好きな場所にロードするように切り替えることができます。

function wpa_73217($load){
  if(is_page_template('my_special_template.php'))
       $load = true;
  return $load;
} 
add_filter('infinite_scroll_load_javascript', 'wp_73217');

もちろん、初期化スクリプトはまだ機能する必要があります。セレクタも正しくなければなりません。

1
helgatheviking