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>

父母（'。navigation'）。attr（'id'）告诉jquery向上移动dml，找到导航标签，然后抓住它的ID作为achor文本的文本

如果您已经拥有ids博客并在页面上工作，那么您可以使用rel =“work”，然后您将在jquery中使用attr（'rel'）

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

2 个答案: