Cum să adaugi o clasă CSS la previous_post_link sau să obții URL-ul pentru postarea anterioară/următoare

Există filtre pentru funcțiile previous_post_link și next_post_link care funcționează într-un mod diferit față de previous_posts_link_attributes și next_posts_link_attributes, nu sunt sigur de ce acest lucru nu este documentat pe site-ul 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');

Puteți înfășura elementul în jurul apelului funcției și să-l stilizați în acest fel. Astfel:

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

apoi controlați link-ul în css.

.previous_post_link a { unele stiluri aici } 

Doar o mică adăugire, problema cu hook-urile de mai jos este că sunt la forma de plural, iar întrebarea ta implică faptul că "vrei să le stilezi la forma singulară".

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');

Deși funcționează perfect, acestea sunt link-urile afișate în partea de jos a listărilor de articole, nu cele de la sfârșitul articolelor individuale. Logica spune că ar trebui să putem duplica acest cod cu formele singular ("next_post_link" și "previous_post_link") și va funcționa. Din păcate, nu este cazul.

Deoarece filtrele pentru link-urile singular următor și anterior sunt aplicate diferit vezi aici

Codul de mai jos ar trebui să funcționeze pentru link-urile singular. Pune-le în fișierul functions.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');

Codul de mai sus a fost testat și funcționează. Totuși, poți rezolva această problemă fără a folosi functions.php prin adăugarea unei clase LI în jurul fiecărui link:

    <!--ÎNCEPUT: Navigare pagină-->
    <?php if ( $wp_query->max_num_pages > 1 ) : // dacă sunt mai multe pagini, activează paginarea ?>

        <nav id="page-nav">
            <h1 class="hide">Navigare pagină</h1>
            <ul class="clear-fix">
                <li class="prev-link"><?php next_posts_link('« Pagina anterioară') ?></li>
                <li class="next-link"><?php previous_posts_link('Pagina următoare »') ?></li>
            </ul>
        </nav>

    <?php endif; ?>
    <!--SFÂRȘIT: Navigare pagină-->

Acest cod nu a fost testat și observă forma de plural.

Încercați următoarea metodă --

<?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('Postarea Anterioară', '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('Postarea Următoare', '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 } ?>

Totul foarte bine gândit, dar cea mai simplă metodă pe care am găsit-o a fost să adaug un div în fișierul functions.php care să încadreze linkurile. L-am numit 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( 'Anterior', 'Link anterior', 'themename' ) ); ?>
<?php previous_post_link( '%link', _x( 'Următor', 'Link următor', 'themename' ) ); ?>
</div>
</nav>
<?php
}
endif;

apoi în fișierul css doar scrieți o nouă clasă pentru

.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;
}

Apelați-o în oricare dintre paginile de șablon ale temei folosind

<?php themename_post_nav(); ?>

Acest cod va verifica dacă variabilele $previous_post_obj și $next_post_obj sunt goale înainte de a genera butoanele "previous" (anterior) și "next" (următor), respectiv. Dacă oricare dintre variabile este goală, butonul corespunzător nu va fi afișat.

<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>anterior</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>următor</span>
    </a>
  <?php } ?>
</div>