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

Question

对于我的portfolio site，我想将锚链接添加到“工作”和“博客”部分，以便在单击下一页时转到相应的部分。我注意到在这个问题中使用 jQuery 是可能的：WordPress pagination - Adding an Anchor link，但我不确定这将如何与同一页面上的两个循环一起工作？

我当前的循环看起来像这样，只是替换了每个部分的类别：

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

Answer 1

啊，我明白你的意思了；实际上，最好将 wordpresses $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/

Answer 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>

parents('.navigation').attr('id') 告诉 jquery 向上移动 dom 直到找到导航标签，然后抓住它的 ID 用作锚文本的文本

如果您已经拥有 ids 博客并在页面上工作，则可以使用 rel="work" 代替，然后在 jquery 中使用 attr('rel')