在同一页面上对WordPress分页应用锚链接两次


Applying anchor link to WordPress pagination twice on same page

对于我的投资组合网站,我想添加锚链接到'工作'和'博客'部分,以便当点击到下一页它去到各自的部分。我注意到这是可能的使用jQuery从这个问题:WordPress分页-添加一个锚链接,但我不确定这将如何与两个循环在同一页面上工作?

我的当前循环是这样的,只是替换每个部分的类别:

 <?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(); ?>

啊,我明白你的意思;实际上,您最好使用wordpress$ args作为paginate_links()函数。你可以在这里看到: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/

你有你的第一个<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>

父元素('.navigation').attr('id')告诉jquery向上移动dom,直到找到导航标签,然后获取它的id作为锚文本的文本

如果你已经有了id的博客和工作的页面,你可以使用rel="工作"代替,然后你会在jquery中使用attr('rel')