Come stilizzare il numero della pagina corrente (wp_link_pages)?

Question

Come stilizzare il numero della pagina corrente (wp_link_pages)?

10 apr 2011, 14:43:03

Visualizzazioni: 13.2K

Voti: 1

Quando un articolo è suddiviso su più pagine, il tema TwentyTen utilizza la funzione nativa wp_link_pages per visualizzare una barra di navigazione alla fine dell'articolo.

Sto cercando di personalizzare lo stile di questi elementi per il mio tema, ma sembra che il numero della pagina corrente non possa essere stilizzato.

Immagino che dovrei sovrascrivere la funzione wp_link_pages ma sto ancora imparando le basi della programmazione in WP.

Puoi aiutarmi a identificare i passaggi da seguire per risolvere questo problema?

Drake

1.43K

funzioni paginazione wp link pages

Tutte le risposte alla domanda

Commenti

Ciao @toscho grazie mille, adesso sono al lavoro ma nei prossimi giorni proverò sicuramente il tuo plugin. Pensi che sia meglio usarlo come plugin, o è meglio implementare quelle funzioni nel functions.php del mio tema?

Drake

11 apr 2011 11:00:30

@Drake Io lo uso come parte del mio tema framework. Dato che probabilmente non lo lascerai mai senza stile, dovrebbe andare bene usarlo nel tuo tema.

fuxia

11 apr 2011 14:39:02

Sto testando il codice che mi hai linkato, implementando le diverse funzioni in functions.php. Ora mentre faccio debug vedo che $GLOBALS['wp_query'] è impostato ma $GLOBALS['wp_query']->max_num_pages restituisce sempre 0. Hai qualche idea su cosa potrebbe non funzionare?

Drake

13 apr 2011 14:25:11

@Drake Mi dispiace davvero; ho frainteso la tua domanda. Il mio primo plugin funziona solo per gli archivi. Ho fatto un aggiornamento con un'altra funzione per risolvere il tuo problema.

fuxia

13 apr 2011 20:25:12

Un modo semplice che sto utilizzando ora è usare 'link_before' e 'link_after' come parte degli argomenti di wp_link_pages. Puoi quindi racchiudere ogni numero, incluso quello attivo, in un tag e poi stilizzarlo opportunamente.

Seb

41

16 feb 2012 20:05:50

Sono d'accordo con seb; il modo per farlo è utilizzare link_before e link_after. Per approfondire, usa ad esempio 'link_before' => '<span class="page-link-number">', 'link_after' => '</span>'

Quindi avrai un output come:

<p class="page-links"><span class="before">Pagine:</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>

dove ci troviamo attualmente nella pagina due.

POI puoi applicare lo stile in base al fatto che la classe "page-link-number" sia figlia di un link o meno.

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

.page-links .page-link-number { /* questo è lo stato predefinito "corrente" */
    background: #e5e5e5;
    display: inline-block;
    margin: 4px;
    padding: 4px 6px;
}

.page-links a .page-link-number { /* se è all'interno di un link, cambia il colore di sfondo */
    background: #fff;
}

.page-links a .page-link-number:hover { /* aggiungi uno stato al passaggio del mouse */
   background: #e0f0ff;
}

Vicki Farmer

31

7 ago 2013 17:41:59

Per prima cosa, devi fornire una classe CSS da utilizzare come target, cosa che puoi fare utilizzando gli argomenti di wp_link_pages() stesso:

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

Ora, basta stilizzare la classe .link-pages. Ecco quello che uso io:

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

Stilizza ovviamente in base alle tue esigenze.

Chip Bennett

55.1K

10 apr 2011 16:00:36

@toscho grazie per il post, è stato molto utile! Sono andato un po' oltre e ho aggiunto i tag degli elementi di lista a entrambi gli output, così da poterli stilizzare più facilmente.

Incollerò questo hack al tuo codice perché potrebbe essere utile a qualcuno.

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

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

Camilo

Camilo Delvasto

21

19 gen 2012 20:25:11

È possibile contrassegnare la pagina corrente utilizzando un filtro di WordPress. Il filtro wp_link_pages_link utilizzato in wp_link_pages() riceve l'elemento del link, che è un singolo numero per la pagina corrente, e un anchor per le altre pagine. Quindi possiamo verificare se l'elemento è un numero e avvolgerlo in uno span:

/**
 * Filtra wp_link_pages per avvolgere la pagina corrente in uno 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' );

Ovviamente, questo presuppone che non stai già filtrando i link in un modo per cui la pagina corrente non è più un singolo numero. Puoi poi stilizzarlo utilizzando la classe current.

Elio

261

22 apr 2014 03:36:02

fuxia 107K · Accepted Answer · 2011-04-11T07:08:24Z

Sfortunatamente, non c'è modo di farlo solo con funzioni native: WP è … agnostico rispetto alle richieste e genera sempre link alla pagina corrente (menu di navigazione, elenco pagine …).

Inoltre, non è possibile utilizzare un filtro, perché wp_link_pages() non ha un filtro appropriato.

Nei miei temi, utilizzo una funzione personalizzata, basata su questo codice. Probabilmente è troppo lunga per postarla qui, quindi l'ho inserita come plugin su GitHub: Logical Page Links.
Puoi usare il plugin così com'è o copiare il codice nel tuo tema.

Il markup risultante sarà simile a questo:

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

Il tag <b> indica la pagina corrente, puoi stilizzarlo con:

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

Altre funzionalità sono elencate nel readme del plugin.

Aggiornamento

Ho frainteso la domanda. Pensavo che avessi bisogno di una funzione simile per gli archivi. Scusa.

Ecco una versione riscritta di wp_link_pages() come plugin. Suppongo che la inserirai nel tuo tema.

<?php # -*- coding: utf-8 -*-
/*
Plugin Name: Numbered In-Page Links
Description: Sostituzione per wp_link_pages con numeri. Usa 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 );

/**
 * Modifica di wp_link_pages() con un elemento extra per evidenziare la pagina corrente.
 *
 * @param  array $args
 * @return void
 */
function numbered_in_page_links( $args = array () )
{
    $defaults = array(
        'before'      => '<p>' . __('Pagine:')
    ,   'after'       => '</p>'
    ,   'link_before' => ''
    ,   'link_after'  => ''
    ,   'pagelink'    => '%'
    ,   'echo'        => 1
        // elemento per la pagina corrente
    ,   '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
        {   // evidenzia la pagina corrente
            // non sono sicuro se servano $link_before e $link_after
            $output .= "<$highlight>{$link_before}{$j}{$link_after}</$highlight>";
        }
    }

    print $output . $after;
}