web-dev-qa-db-fra.com

Comment ajouter une classe CSS à previous_post_link ou obtenir l'URL du lien précédent/suivant

Comment puis-je ajouter une classe CSS à la sortie previous_post_link ou simplement obtenir l'URL et créer le balisage HTML moi-même

paginationnavigation
5
Jiew Meng

Vous pouvez utiliser la fonction plus native qui est "en dessous" de la 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    = '»'; // equals "»"
?>
<a href="<?php echo $next_post_link; ?>" rel="next" class="pagination pagination-link pagination-next">
    <?php echo $next_post_title; ?>
</a>
7
kaiser

Il existe des filtres pour les fonctions previous_post_link et next_post_link qui fonctionnent différemment de previous_posts_link_attributes et next_posts_link_attributes. Je ne sais pas pourquoi cela n’est pas documenté sur le site Web 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');
15
Yazeed Al Oyoun

Vous pouvez mettre un élément autour de l'appel de fonction et le styler de cette façon. Comme ça:

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

puis contrôlez le lien dans le css.

.previous_post_link a { some styles here }
6
Digitalchild

Juste un petit ajout, le problème avec le crochet ci-dessous est qu’ils sont au pluriel et que votre question implique "vous voulez les nommer au singulier".

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

Bien qu'ils fonctionnent parfaitement mais ce sont les liens qui sont affichés au bas des listes de publication, pas ceux au bas des publications individuelles. La logique dit que nous devrions pouvoir dupliquer ce code avec les formes singulières (“next_post_link” et “previous_post_link”) et cela fonctionnera. Malheureusement, ce n’est pas le cas.

Bien puisque les filtres pour les liens singuliers suivant et précédent sont appliqués différemment voyez ceci

Le code ci-dessous devrait fonctionner pour les liens singuliers. Mettez-les dans votre fichier 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');

Le code ci-dessus est testé et fonctionne. Cependant, vous pouvez contourner ce problème en utilisant la fonction.php consiste à classer un LI autour de chaque lien:

    <!--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-->

Ce code n'est pas testé et remarque la pluralité.

1
Lawrence Oputa

Essayez de suivre way--

<?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 } ?>
0
Jahirul Islam Mamun

Tout bien pensé, le moyen le plus simple que j'ai trouvé était d'ajouter un div dans le fichier functions.php qui encapsule les liens. J'ai nommé mine 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;

puis dans votre fichier CSS simplement écrire une nouvelle classe pour

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

Appelez-le dans l'une de vos pages de modèle de thème à l'aide de

<?php themename_post_nav(); ?>
0
Adrian