0

私のポートフォリオ サイトでは、「仕事」セクションと「ブログ」セクションの両方にアンカー リンクを追加して、クリックして次のページに進むとそれぞれのセクションに移動できるようにしたいと考えています。これは、次の質問から jQuery を使用して可能であることに気付きました: WordPress ページネーション - アンカー リンクの追加、しかし、これが同じページの 2 つのループでどのように機能するかは不明です?

私の現在のループは、各セクションのカテゴリを置き換えるだけで、次のようになります。

 <?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
 $args=array('category_name'=>'portfolio','posts_per_page'=>4,'paged'=>$paged);
 query_posts($args);
 if (have_posts()) : while (have_posts()) : the_post(); ?>  

    <div class="blog-post">
    <div class="thumbnail">

    <a href="<?php the_permalink(); ?>">
    <?php
        if ( has_post_thumbnail() ) {
        the_post_thumbnail();
        }   
    ?>  
    </a>

    <a class="details" href="<?php the_permalink(); ?>">
    <h6><?php echo get_the_excerpt(); ?></h6>
    </a><!-- DETAILS -->
    </div><!-- THUMBNAIL -->        

    <div class="aside">

    <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

    </div><!-- ASIDE -->
    </div><!-- BLOG - POST -->

<?php endwhile; ?>
<div class="navigation">
<h3><?php posts_nav_link('&#8734;','&#171; Newer Posts','Older Posts &#187;'); ?></h3>
</div><!-- PAGED-NAVIGATION -->
<?php wp_reset_query(); ?>
4

2 に答える 2

1

ああ、あなたの言いたいことはわかります。実際には、paginate_links() 関数に wordpresses $args を使用する方が良いでしょう。ここで確認できます: http://codex.wordpress.org/Function_Reference/paginate_links。

変更したいのは'format'=>'?page=%#%',（ページ番号）で、それを次のように変更し'format' => '?page=%#%#work',ます'format' => '?page=%#%#blog',

これ echo paginate_links(array('format' => '?page=%#%#work'));により、リンクをクリックすると作業アンカーに戻ります。

問題は、ユーザーがアンカー リンクの位置まで正確にスクロールしないと、ページ ジャンプが発生することです。ページのリロードがまったくないように、Ajax ソリューションを実装することをお勧めします。ここにあなたが始めるための良いチュートリアルがあります: http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/

于 2013-01-10T21:04:53.470 に答える
0

最初の場所にand を 2 番目<div class="navigation"> に追加するid="work"と、次のid="blog" ようになります。

<div class="navigation" id="work">
</div> 
<div class="navigation" id="blog"> 
</div>

あなたのページのどこかに。

次に、参照した質問から jquery を少し変更して、正しいアンカー リンクを作成する必要があります。

<script type="text/javascript">
$(document).ready(function() {
    $('.pagenavi a').each(function(i,a){
        $(a).attr('href',$(a).attr('href')+'#'+a.parents('.navigation').attr('id'));
        //$(a).attr('href',$(a).attr('href')+'#blog') <-- instead of this 
    });
});
</script>

parent('.navigation').attr('id') は、navigition タグが見つかるまで dom を上に移動するよう jquery に指示し、その ID を取得してアンカー テキストのテキストとして使用します。

すでに ids ブログがあり、そのページで作業している場合は、代わりに rel="work" を使用できます。その後、jquery で attr('rel') を使用します。

于 2013-01-09T23:21:51.897 に答える