对于我的投资组合网站,我想添加锚链接到'工作'和'博客'部分,以便当点击到下一页它去到各自的部分。我注意到这是可能的使用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('∞','« Newer Posts','Older Posts »'); ?></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')