web-dev-qa-db-fra.com

Comment styler le numéro de page actuel (wp_link_pages)?

Lorsqu'un article est divisé sur plusieurs pages, utilisez la fonction native wp_link_pages pour afficher une barre de page de navigation à la fin de l'article.

J'essaie de styliser ces éléments pour mon thème, mais malheureusement, il semble que le numéro de page actuel ne puisse pas être stylé.

J'imagine que je devrais remplacer la fonction wp_link_pages mais j'apprends toujours les bases de la programmation WP.

Pouvez-vous m'aider à identifier les étapes à suivre pour résoudre ce problème?

functionspaginationwp-link-pages
1
Drake

Malheureusement, il n’ya aucun moyen de le faire uniquement avec les fonctions natives: WP est… demande agnostique et produit toujours des liens vers la page actuelle (nav manus, pages de liste…).

De plus, vous ne pouvez pas utiliser de filtre car wp_link_pages() n'a pas de filtre approprié.

Dans mes thèmes, j'utilise une fonction propre, basée sur ce code . Il est probablement trop long de le poster ici, donc je le mets comme un plugin sur GitHub: Liens de page logique .
Vous pouvez utiliser le plugin tel quel ou copier le code dans votre thème.

Le balisage résultant ressemblera à ceci:

<p class="pager"> 
  <b title='You are here.'>1</b>  
  <a class=number href='http://example.com/page/2/'>2</a> 
</p>

Le <b> marque la page actuelle, vous pouvez la styler via:

.pager b
{
    color:      #fff;
    background: #111;
}

Plus de fonctionnalités sont listées dans le readme du plugin.

Mettre à jour

J'ai mal compris la question. Je pensais que vous aviez besoin d'une telle fonction pour les archives. Pardon.

Voici une version réécrite de wp_link_pages() sous forme de plugin. Je suppose que vous allez le mettre dans votre thème.

<?php # -*- coding: utf-8 -*-
/*
Plugin Name: Numbered In-Page Links
Description: Replacement for wp_link_pages with numbers. Use do_action( 'numbered_in_page_links' );
Version:     1.0
Required:    3.1
Author:      Thomas Scholz
Author URI:  http://toscho.de
License:     GPL v2
*/
! defined( 'ABSPATH' ) and exit;

add_action( 'numbered_in_page_links', 'numbered_in_page_links', 10, 1 );

/**
 * Modification of wp_link_pages() with an extra element to highlight the current page.
 *
 * @param  array $args
 * @return void
 */
function numbered_in_page_links( $args = array () )
{
    $defaults = array(
        'before'      => '<p>' . __('Pages:')
    ,   'after'       => '</p>'
    ,   'link_before' => ''
    ,   'link_after'  => ''
    ,   'pagelink'    => '%'
    ,   'echo'        => 1
        // element for the current page
    ,   'highlight'   => 'b'
    );

    $r = wp_parse_args( $args, $defaults );
    $r = apply_filters( 'wp_link_pages_args', $r );
    extract( $r, EXTR_SKIP );

    global $page, $numpages, $multipage, $more, $pagenow;

    if ( ! $multipage )
    {
        return;
    }

    $output = $before;

    for ( $i = 1; $i < ( $numpages + 1 ); $i++ )
    {
        $j       = str_replace( '%', $i, $pagelink );
        $output .= ' ';

        if ( $i != $page || ( ! $more && 1 == $page ) )
        {
            $output .= _wp_link_page( $i ) . "{$link_before}{$j}{$link_after}</a>";
        }
        else
        {   // highlight the current page
            // not sure if we need $link_before and $link_after
            $output .= "<$highlight>{$link_before}{$j}{$link_after}</$highlight>";
        }
    }

    print $output . $after;
}
4
fuxia

Je suis d'accord avec seb; Pour ce faire, utilisez link_before et link_after. Pour développer cela, utilisez, par exemple, 'link_before' => '<span class="page-link-number">', 'link_after' => '</span>'

Ensuite, vous aurez la sortie:

<p class="page-links"><span class="before">Pages:</span> 
<a href="http://myurl.com/page-blah/1/"><span class="page-link-number">1</span></a> 
<span class="page-link-number">2</span> 
<a href="http://myurl.com/page-blah/3/"><span class="page-link-number">3</span></a>
</p>

où nous en sommes actuellement à la page deux.

ALORS vous pouvez choisir si la classe "page-link-number" est l'enfant d'un lien ou non.

.page-links a {
    color: #004c98;
    text-decoration: none;
}

.page-links .page-link-number { /* this is the default "current" state */
    background: #e5e5e5;
    display: inline-block;
    margin: 4px;
    padding: 4px 6px;
}

.page-links a .page-link-number { /* if it's inside a link, change the background color */
    background: #fff;
}

.page-links a .page-link-number:hover { /* add a hover state */
   background: #e0f0ff;
}
3
Vicki Farmer

Un moyen simple que j'utilise maintenant est d'utiliser 'link_before' et 'link_after' dans le cadre de l'argument wp_link_pages. Vous pouvez ensuite envelopper chaque numéro, y compris le numéro actif, dans une balise, puis styliser de manière appropriée.

3
Seb

@toscho merci pour le post, ça a beaucoup aidé! Je suis allé un peu plus loin et j'ai ajouté des balises d'élément de liste aux deux sorties afin de pouvoir les styler plus facilement.

Je colle ce hack dans votre code car cela pourrait aider quelqu'un.

$output .= _wp_link_page( $i ) . "<li>{$link_before}{$j}{$link_after}</a></li>"

$output .= "<li><$highlight>{$link_before}{$j}{$link_after}</$highlight></li>"

Camilo

0
Camilo Delvasto

Tout d'abord, vous devez fournir une classe CSS à cibler, que vous pouvez utiliser à l'aide des arguments de wp_link_pages() lui-même:

wp_link_pages( 'before=<p class="link-pages">Page: ' );

Maintenant, appelez simplement la classe .link-pages. Voici ce que j'utilise:

.link-pages {
    clear:both;
    font-size:10pt;
    text-align:center;
}
.link-pages a {
    margin: 0px 3px 0px 3px;
    padding: 0px 3px 0px 3px;
}

Style selon vos besoins, bien sûr.

0
Chip Bennett

Il est possible de marquer la page en cours à l'aide d'un filtre WP. Le filtre wp_link_pages_link utilisé dans wp_link_pages() reçoit l'élément de lien, qui est un numéro unique pour la page en cours et une ancre pour les autres pages. Ainsi, nous pouvons vérifier si l’article est un nombre et l’envelopper dans un intervalle:

/**
 * Filter wp_link_pages to wrap current page in span.
 *
 * @param $link
 * @return string
 */
function elliot_link_pages( $link ) {
    if ( ctype_digit( $link ) ) {
        return '<span class="current">' . $link . '</span>';
    }
    return $link;
}
add_filter( 'wp_link_pages_link', 'elliot_link_pages' );

Bien sûr, en supposant que vous ne filtrez pas déjà les liens de manière à ce que la page en cours ne soit plus un numéro unique. Vous pouvez ensuite le styliser en utilisant la classe current.

0
Elliot