Cómo dar estilo al número de página actual (wp_link_pages)

Question

Cómo dar estilo al número de página actual (wp_link_pages)

10 abr 2011, 14:43:03

Vistas: 13.2K

Votos: 1

Cuando un post se divide en más páginas, el tema TwentyTen utiliza la función nativa wp_link_pages para mostrar una barra de navegación de páginas al final del post.

Estoy intentando dar estilo a esos elementos para mi tema, pero desafortunadamente parece que el número de página actual no se puede estilizar.

Imagino que debería sobrescribir la función wp_link_pages pero todavía estoy aprendiendo lo básico de la programación en WP.

¿Puedes ayudarme a identificar los pasos a seguir para resolver este problema?

Drake

1.43K

funciones paginación wp link pages

Todas las respuestas a la pregunta

Comentarios

Hola @toscho muchas gracias, ahora estoy en el trabajo pero en los próximos días probaré tu plugin seguro. ¿Crees que es mejor usarlo como plugin, o mejor implementar esas funciones en el functions.php de mi tema?

Drake

11 abr 2011 11:00:30

@Drake Yo lo uso como parte de mi framework de temas. Como probablemente nunca lo dejarás sin estilo, debería estar bien usarlo en tu tema.

fuxia

11 abr 2011 14:39:02

Estoy probando el código que me enlazaste, implementando las diferentes funciones en functions.php. Ahora, mientras depuro, veo que $GLOBALS['wp_query'] está configurado pero $GLOBALS['wp_query']->max_num_pages siempre devuelve 0. ¿Tienes alguna idea de qué podría estar mal?

Drake

13 abr 2011 14:25:11

@Drake Lamento mucho; leí mal tu pregunta. Mi primer plugin funciona solo para archivos. Hice una actualización con otra función para resolver tu problema.

fuxia

13 abr 2011 20:25:12

Una forma sencilla que estoy usando ahora es utilizar 'link_before' y 'link_after' como parte de los argumentos de wp_link_pages. Luego puedes envolver cada número, incluido el activo, en una etiqueta y darle el estilo apropiado.

Seb

41

16 feb 2012 20:05:50

Estoy de acuerdo con seb; la forma de hacerlo es usar link_before y link_after. Para ampliar eso, usa, por ejemplo, 'link_before' => '<span class="page-link-number">', 'link_after' => '</span>'

Entonces tendrás una salida como:

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

donde actualmente estamos en la página dos.

ENTONCES puedes aplicar estilos dependiendo de si la clase "page-link-number" es hija de un enlace o no.

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

.page-links .page-link-number { /* este es el estado predeterminado "actual" */
    background: #e5e5e5;
    display: inline-block;
    margin: 4px;
    padding: 4px 6px;
}

.page-links a .page-link-number { /* si está dentro de un enlace, cambia el color de fondo */
    background: #fff;
}

.page-links a .page-link-number:hover { /* añade un estado hover */
   background: #e0f0ff;
}

Vicki Farmer

31

7 ago 2013 17:41:59

Primero, necesitas proporcionar una clase CSS para seleccionar, lo cual puedes hacer usando los argumentos de wp_link_pages() mismo:

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

Ahora, solo debes dar estilo a la clase .link-pages. Esto es lo que yo uso:

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

Por supuesto, dale el estilo según tus necesidades.

Chip Bennett

55.1K

10 abr 2011 16:00:36

@toscho gracias por el post, ¡me ayudó mucho! Fui un poco más allá y agregué etiquetas de elementos de lista a ambas salidas, para poder darles estilo con más facilidad.

Pego este hack en tu código ya que podría ayudar a alguien.

$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 ene 2012 20:25:11

Es posible marcar la página actual utilizando un filtro de WP. El filtro wp_link_pages_link utilizado en wp_link_pages() recibe el elemento del enlace, que es un solo número para la página actual y un ancla para otras páginas. Entonces podemos verificar si el elemento es un número y envolverlo en un span:

/**
 * Filtra wp_link_pages para envolver la página actual en un 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' );

Por supuesto, esto asume que no estás filtrando ya los enlaces de una manera que la página actual ya no sea un solo número. Luego puedes estilizarlo usando la clase current.

Elio

261

22 abr 2014 03:36:02

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

Desafortunadamente, no hay forma de hacer esto solo con funciones nativas: WP es... agnóstico a las solicitudes y siempre genera enlaces a la página actual (menús de navegación, listas de páginas...).

Además, no puedes usar un filtro, porque wp_link_pages() no tiene un filtro apropiado.

En mis temas, uso una función propia, basada en este código. Probablemente es demasiado largo para publicarlo aquí, así que lo subí como un plugin en GitHub: Logical Page Links.
Puedes usar el plugin tal cual o copiar el código en tu tema.

El marcado resultante se verá así:

<p class="pager"> 
  <b title='Estás aquí.'>1</b>  
  <a class=number href='http://example.com/page/2/'>2</a> 
</p>

El <b> marca la página actual, puedes darle estilo mediante:

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

Más características se enumeran en el archivo readme del plugin.

Actualización

Malinterpreté la pregunta. Pensé que necesitabas una función así para archivos. Lo siento.

Aquí hay una versión reescrita de wp_link_pages() como un plugin. Supongo que lo pondrás en tu tema.

<?php # -*- coding: utf-8 -*-
/*
Plugin Name: Enlaces Numerados Dentro de Página
Description: Reemplazo para wp_link_pages con números. 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 );

/**
 * Modificación de wp_link_pages() con un elemento extra para resaltar la página actual.
 *
 * @param  array $args
 * @return void
 */
function numbered_in_page_links( $args = array () )
{
    $defaults = array(
        'before'      => '<p>' . __('Páginas:') // Traducido a español
    ,   'after'       => '</p>'
    ,   'link_before' => ''
    ,   'link_after'  => ''
    ,   'pagelink'    => '%'
    ,   'echo'        => 1
        // elemento para la página actual
    ,   '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
        {   // resaltar la página actual
            // no estoy seguro si necesitamos $link_before y $link_after
            $output .= "<$highlight>{$link_before}{$j}{$link_after}</$highlight>";
        }
    }

    print $output . $after;
}