Как добавить CSS класс к previous_post_link или получить URL предыдущей/следующей записи

Существуют фильтры для функций previous_post_link и next_post_link, которые работают иначе, чем previous_posts_link_attributes и next_posts_link_attributes. Непонятно, почему это не задокументировано на сайте 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');

Вы можете обернуть вызов функции в элемент и стилизовать его таким образом. Например:

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

Затем управляйте ссылкой через CSS.

.previous_post_link a { некоторые стили здесь }

Небольшое дополнение: проблема с хуками ниже в том, что они работают с множественным числом, а ваш вопрос подразумевает, что "вы хотите стилизовать их в единственном числе".

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_post_link" и "previous_post_link"), и он будет работать. К сожалению, это не так.

Дело в том, что фильтры для ссылок единственного числа next и previous применяются по-другому см. здесь.

Приведенный ниже код должен работать для ссылок единственного числа. Поместите его в файл function.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');

Вышеуказанный код протестирован и работает. Однако вы можете обойтись без использования function.php, добавив класс LI вокруг каждой ссылки:

    <!--НАЧАЛО: Навигация по страницам-->
    <?php if ( $wp_query->max_num_pages > 1 ) : // если страниц больше одной, включаем пагинацию ?>

        <nav id="page-nav">
            <h1 class="hide">Навигация по страницам</h1>
            <ul class="clear-fix">
                <li class="prev-link"><?php next_posts_link('« Предыдущая страница') ?></li>
                <li class="next-link"><?php previous_posts_link('Следующая страница »') ?></li>
            </ul>
        </nav>

    <?php endif; ?>
    <!--КОНЕЦ: Навигация по страницам-->

Этот код не тестировался, обратите внимание на множественное число.

Попробуйте следующий способ:

<?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('Предыдущая запись', '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('Следующая запись', '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 } ?>

Все очень хорошо, но самый простой способ, который я нашел, — это добавить div в файл functions.php, который оборачивает ссылки. Я назвал свой классом "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( 'Предыдущий', 'Ссылка на предыдущий пост', 'themename' ) ); ?>
<?php previous_post_link( '%link', _x( 'Следующий', 'Ссылка на следующий пост', '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(); ?>

Этот код проверяет, являются ли переменные $previous_post_obj и $next_post_obj пустыми, перед генерацией кнопок "предыдущий" и "следующий" соответственно. Если любая из переменных пуста, соответствующая кнопка не будет отображаться.

<div>
  <?php $previous_post_obj = get_adjacent_post( '', '', true );
  if ( ! empty( $previous_post_obj ) ) {
    $previous_post_ID = isset( $previous_post_obj->ID ) ? $previous_post_obj->ID : '';
    $previous_post_link = get_permalink( $previous_post_ID ); ?>
    <a href="<?php echo $previous_post_link; ?>" rel="prev" class="prev">
      <span>предыдущий</span>
    </a>
  <?php } ?>
  <?php $next_post_obj = get_adjacent_post( '', '', false );
  if ( ! empty( $next_post_obj ) ) {
    $next_post_ID = isset( $next_post_obj->ID ) ? $next_post_obj->ID : '';
    $next_post_link = get_permalink( $next_post_ID ); ?>
    <a href="<?php echo $next_post_link; ?>" rel="next" class="next">
      <span>следующий</span>
    </a>
  <?php } ?>
</div>