Question

我正在尝试在这两个帖子上设置上一个/下一个链接＆amp; wordpress中的产品。这是我正在使用的代码：

<div class="navigation">
  <div class="prev">
  <span class="nav-label">‹</span>
    <span class="nav-info-wrap">
      <span class="nav-info">
        <?php previous_post_link( '%link', '%title', TRUE ); ?><?php the_post_thumbnail(); ?>
      </span>
    </span>
  </div>
  <div class="next">
  <span class="nav-label">›</span>
    <span class="nav-info-wrap">
      <span class="nav-info">
        <?php the_post_thumbnail(); ?><?php next_post_link( '%link', '%title', TRUE ); ?>
      </span>
  </span>
  </div>
</div>

目前，如果没有上一个/下一个帖子，则该链接不存在，但容器<div class="prev"></div>或<div class="next"></div>仍然存在。

我想要做的是隐藏上一个或下一个链接的容器<div class="prev"></div>或<div class="next"></div>如果没有上一篇或下一篇文章，我不知道如何编辑什么我目前必须到那儿。

Answer 1

您的代码应如下所示

<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
  // code executed 
<?php endwhile; ?>
<!-- pagination -->
<div class="navigation">
  <div class="prev">
  <span class="nav-label">‹</span>
    <span class="nav-info-wrap">
      <span class="nav-info">
        <?php previous_post_link( '%link', '%title', TRUE ); ?><?php the_post_thumbnail(); ?>
      </span>
    </span>
  </div>
  <div class="next">
  <span class="nav-label">›</span>
    <span class="nav-info-wrap">
      <span class="nav-info">
        <?php the_post_thumbnail(); ?><?php next_post_link( '%link', '%title', TRUE ); ?>
      </span>
  </span>
  </div>
</div>
<?php else : ?>
<!-- No posts found -->
<?php endif; ?>

Answer 2

您可以在从数据库中获取数据时跟踪记录。例如，如果您有auto_increment的数据库记录主键。你知道第一条记录总是1，最后一条记录是总行数。如果主键符合条件，则可以禁用或隐藏按钮。

 <?php 
 if ($post = get_post()){
    // $post has false if the post is last or fist.
    }

  ?>
  <div class="navigation">
  <div class="prev">
  <span class="nav-label">‹</span>
    <span class="nav-info-wrap">
      <span class="nav-info">
        <?php previous_post_link( '%link', '%title', TRUE ); ?><?php the_post_thumbnail(); ?>
      </span>
    </span>
  </div>
  <div class="next">
  <span class="nav-label">›</span>
    <span class="nav-info-wrap">
      <span class="nav-info">
        <?php the_post_thumbnail(); ?><?php next_post_link( '%link', '%title', TRUE ); ?>
      </span>
  </span>
  </div>
</div>

Answer 3

我使用此处的代码段稍微更改了代码：https://gist.github.com/projoomexperts/e63152d5d8f3264f5a47

<div class="navigation">

   <div class="prev"><span class="nav-label">&lsaquo;</span><span class="nav-info-wrap"><span class="nav-info">
    <?php 
        $prevPost = get_previous_post(); 
        $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) );
        $theTitle = get_the_title();
        $prevLink = get_permalink( $prevPost->ID ); 
    ?>
    <?php if($prevPost){ ?>
        <a href="<?php echo $prevLink; ?>">
            <?php print_r($theTitle); print_r($prevThumbnail); ?>
        </a>
    <?php } ?>
    </span></span></div>


    <div class="next"><span class="nav-label">&rsaquo;</span><span class="nav-info-wrap"><span class="nav-info">
    <?php 
        $nextPost = get_next_post();    
        $nextLink = get_permalink( $nextPost->ID );
    ?>

    <?php if($nextPost) { ?>
        <a href="<?php echo $nextLink; ?>">
            <?php
            $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(150,150) );
            $theTitle = get_the_title();
            print_r($nextThumbnail); print_r($theTitle); ?>
        </a>
    <?php } ?>
  </span></span></div>

</div>

但是它会在“nav-info”div之间创建空格，所以使用javascript：

<script>
jQuery(function($){
    if( $.trim( $(".prev .nav-info").text())!=='') {
            $(".next .nav-info").parent().parent().hide();
        }
});
jQuery(function($){
    if( $.trim( $(".next .nav-info").text())!=='') {
            $(".prev .nav-info").parent().parent().hide();
        }
});
</script>

这解决了我的所有问题：）

Answer 4

您还可以使用display：none隐藏为空的posts_link;或可见性：隐藏。这需要两个步骤 - 如果我们忽略了分页查询$ paged例程，我可以假设它已经在你的帖子页面中。

首先是jQuery：

jQuery( function() {

/* Add class if there are previous and next posts links */
if ( ( jQuery( '#onlist-pagination .alignright' ).length ) && ( jQuery( '#onlist-pagination .alignright a' ).length ) ) {
    jQuery( '#onlist-pagination' ).addClass( 'previous-and-next' );
}

/* Add class if there is just one previous or next post link */
if ( ! ( jQuery( '#onlist-pagination .alignright a' ).length ) || ! ( jQuery( '#onlist-pagination .alignleft a' ).length ) ) {
    jQuery( '#onlist-pagination' ).addClass( 'previous-or-next' );
}

});

然后添加导航部分：

<div id="onlist-pagination" class="pagination">
<nav><?php 
$prevpost = get_previous_posts_link( 'Newer Listings',         $wp_query->max_num_pages );
$nextpost = get_next_posts_link( 'Older Listings', $wp_query->max_num_pages );
echo '<div class="alignleft">' . $prevpost . '</div>'; 
echo '<div class="alignright">' . $nextpost .'</div>'; ?> 
</nav>
</div>

根据你不想表现出来的风格。

#onlist-pagination.pagination div.alignright a,
#onlist-pagination.pagination div.alignleft a {
    padding: 15px;
    line-height: 2;
    font-size: 115%;
    }
#onlist-pagination.pagination.previous-or-next div.alignright,
#onlist-pagination.pagination.previous-or-next div.alignleft,
#onlist-pagination.pagination.previous-and-next.previous-or-next     div.alignleft {
display: none;
}
#onlist-pagination.pagination.previous-or-next.previous-and-next     div.alignright,
#onlist-pagination.pagination.previous-or-next div.alignleft {
display: block;
}

我省略了锚链接本身的样式，所以你需要一些CSS用于左右div，或者只是使用＆＃34; hidden＆＃34;来设置锚点的样式。 a在get_next / previous_posts_link

中

以下是一个很好的链接： * get_prev / next_posts_link（$ label，$ max_page） * https://docs.pluginize.com/article/81-cleanly-done-pagination-with-custom-wpquery-objects

如果没有帖子，请不要显示帖子链接

4 个答案: