如何将CSS类添加到PERVICE_POST_LINK或获取上一篇/下一篇文章链接URL

时间：2011-05-14 作者：Jiew Meng

如何将CSS类添加到previous_post_link 输出或仅获取URL并自己创建HTML标记

6 个回复

最合适的回答,由SO网友:kaiser 整理而成

您可以使用更为本机的函数，该函数位于previous_/next_post_link();:

# get_adjacent_post( $in_same_cat = false, $excluded_categories = \'\', $previous = true )
$next_post_obj  = get_adjacent_post( \'\', \'\', false );
$next_post_ID   = isset( $next_post_obj->ID ) ? $next_post_obj->ID : \'\';
$next_post_link     = get_permalink( $next_post_ID );
$next_post_title    = \'&raquo;\'; // equals "»"
?>
<a href="<?php echo $next_post_link; ?>" rel="next" class="pagination pagination-link pagination-next">
    <?php echo $next_post_title; ?>
</a>

SO网友:Yazeed Al Oyoun

previous\\u post\\u link和next\\u post\\u link函数有过滤器，其工作方式与previous\\u posts\\u link\\u属性和next\\u posts\\u link\\u属性不同，我不知道为什么wordpress网站上没有记录这一点。

function posts_link_next_class($format){
     $format = str_replace(\'href=\', \'class="next clean-gray" href=\', $format);
     return $format;
}
add_filter(\'next_post_link\', \'posts_link_next_class\');

function posts_link_prev_class($format) {
     $format = str_replace(\'href=\', \'class="prev clean-gray" href=\', $format);
     return $format;
}
add_filter(\'previous_post_link\', \'posts_link_prev_class\');

SO网友:Digitalchild

您可以在函数调用周围放置一个元素，并以这种方式设置它的样式。这样地：

<div class="previous_post_link"><?php previous_post_link(\'%link\'); ?></div>

然后控制css中的链接。

.previous_post_link a { some styles here }

SO网友:Lawrence Oputa

再加一点，下面的钩子的问题是它们是复数形式，你的问题意味着“你想用单数形式来设置它们的样式”。

posts_link_attributes() {
    return \'class="styled-button"\';
}

add_filter(\'next_posts_link_attributes\', \'posts_link_attributes\');
add_filter(\'previous_posts_link_attributes\', \'posts_link_attributes\');

虽然它们工作得很好，但这些链接显示在帖子列表的底部，而不是单个帖子的底部。逻辑上说，我们应该能够用单数形式（“next\\u post\\u link”和“previous\\u post\\u link”）复制此代码，并且它会工作。不幸的是，情况并非如此。

因为单数下一个链接和前一个链接的过滤器应用不同see this

下面的代码应该适用于单数链接。把它们放在你的功能中。php文件

function post_link_attributes($output) {
    $code = \'class="styled-button"\';
    return str_replace(\'<a href=\', \'<a \'.$code.\' href=\', $output);
}

add_filter(\'next_post_link\', \'post_link_attributes\');
add_filter(\'previous_post_link\', \'post_link_attributes\');

以上代码经过测试并正常工作。但是，您可以在不使用函数的情况下解决此问题。php将围绕每个链接分类一个LI：

    <!--BEGIN: Page Nav-->
    <?php if ( $wp_query->max_num_pages > 1 ) : // if there\'s more than one page turn on pagination ?>

        <nav id="page-nav">
            <h1 class="hide">Page Navigation</h1>
            <ul class="clear-fix">
                <li class="prev-link"><?php next_posts_link(\'« Previous Page\') ?></li>
                <li class="next-link"><?php previous_posts_link(\'Next Page »\') ?></li>
            </ul>
        </nav>

    <?php endif; ?>
    <!--END: Page Nav-->

此代码未经测试，请注意复数。

SO网友:Jahirul Islam Mamun

尝试以下方式--

<?php $prv_post = get_previous_post();
$next_post = get_next_post(); 
?>
<?php if(!empty($prv_post)) { ?>
<a href="<?php echo get_permalink($prv_post->ID ); ?>" class="prev" rel="prev">
<span class="meta-nav"><?php _e(\'Previous Post\', \'awe\') ?></span>
<span class="nav-icon"><i class="fa fa-angle-double-left"></i></span>
<?php echo get_the_title($prv_post->ID ); ?> ...
</a>
<?php } ?>

<?php if(!empty($next_post)) { ?>
<a href="<?php echo get_permalink($next_post->ID ); ?>" class="next" rel="next">
<span class="meta-nav"><?php _e(\'Next Post\', \'awe\') ?></span>
<span class="nav-icon"><i class="fa fa-angle-double-right"></i></span>
<?php echo get_the_title($next_post->ID ); ?> ...
</a>
<?php } ?>

SO网友:Adrian

我发现最简单的方法就是在函数中添加div。包装链接的php文件。我将我的命名为class=“plinks”

if ( ! function_exists( \'themename_post_nav\' ) ) :
function themename_post_nav() {
global $post;
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, \'\', true );
$next     = get_adjacent_post( false, \'\', false );
if ( ! $next && ! $previous )
return;
?>
<nav>
<div class="plinks">
<?php next_post_link( \'%link\', _x( \'Previous\', \'Pevious link\', \'themename\' ) ); ?>
<?php previous_post_link( \'%link\', _x( \'Next\', \'Next link\', \'themename\' ) ); ?>
</div>
</nav>
<?php
}
endif;

然后在css文件中为

.plinks a{
display:inline-block;
margin:1em 4px;
font-size:1em;
font-weight:500;
border:0;
padding:8px 1em;
color:#fff;
background:#000;
}
.plinks a:hover{
opacity:0.8;
}

使用将其调用到任何主题模板页面中

<?php themename_post_nav(); ?>

结束

小码农CODE

如何将CSS类添加到PERVICE_POST_LINK或获取上一篇/下一篇文章链接URL

相关推荐

Thesis -style Navigation