Cum să stilizezi numărul paginii curente (wp_link_pages)?

Question

Cum să stilizezi numărul paginii curente (wp_link_pages)?

10 apr. 2011, 14:43:03

Vizualizări: 13.2K

Voturi: 1

Când un articol este împărțit pe mai multe pagini, tema TwentyTen utilizează funcția nativă wp_link_pages pentru a afișa o bară de navigare a paginilor la sfârșitul articolului.

Încerc să stilizez aceste elemente pentru tema mea, dar din păcate se pare că numărul paginii curente nu poate fi stilizat.

Presupun că ar trebui să suprascriu funcția wp_link_pages, dar încă învăț elementele de bază ale programării în WordPress.

Poți să mă ajuți să identific pașii necesari pentru a rezolva această problemă?

Drake

1.43K

funcții paginare wp link pages

Toate răspunsurile la întrebare

Comentarii

Hei @toscho mulțumesc mult, acum sunt la serviciu dar în următoarele zile cu siguranță voi încerca pluginul tău. Crezi că e mai bine să-l folosesc ca plugin, sau mai bine să implementez acele funcții în functions.php al temei mele?

Drake

11 apr. 2011 11:00:30

@Drake Eu îl folosesc ca parte din framework-ul temei mele. Deoarece probabil nu îl vei lăsa niciodată nestilizat, ar trebui să fie în regulă să-l folosești în tema ta.

fuxia

11 apr. 2011 14:39:02

Testez codul pe care mi l-ai trimis, implementând diferitele funcții în functions.php. Acum în timp ce debughez văd că $GLOBALS['wp_query'] este setat dar $GLOBALS['wp_query']->max_num_pages întoarce întotdeauna 0. Ai vreo idee ce ar putea fi greșit?

Drake

13 apr. 2011 14:25:11

@Drake Îmi pare foarte rău; am înțeles greșit întrebarea ta. Primul meu plugin funcționează doar pentru arhive. Am făcut o actualizare cu o altă funcție pentru a rezolva problema ta.

fuxia

13 apr. 2011 20:25:12

O metodă simplă pe care o folosesc acum este să utilizez 'link_before' și 'link_after' ca parte din argumentele wp_link_pages. Apoi poți înfășura fiecare număr, inclusiv pe cel activ, într-un tag, apoi să le stilizezi corespunzător.

Seb

41

16 feb. 2012 20:05:50

Sunt de acord cu seb; modalitatea de a face acest lucru este să folosești link_before și link_after. Pentru a dezvolta acest lucru, folosește, de exemplu, 'link_before' => '<span class="page-link-number">', 'link_after' => '</span>'

Atunci vei obține următorul rezultat:

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

unde suntem în prezent pe pagina a doua.

APOI poți aplica stiluri în funcție de faptul că clasa "page-link-number" este copilul unui link sau nu.

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

.page-links .page-link-number { /* acesta este stilul implicit pentru starea "curentă" */
    background: #e5e5e5;
    display: inline-block;
    margin: 4px;
    padding: 4px 6px;
}

.page-links a .page-link-number { /* dacă este în interiorul unui link, schimbă culoarea de fundal */
    background: #fff;
}

.page-links a .page-link-number:hover { /* adaugă o stare la hover */
   background: #e0f0ff;
}

Vicki Farmer

31

7 aug. 2013 17:41:59

Mai întâi, trebuie să furnizați o clasă CSS pentru a ținti, ceea ce puteți face folosind argumentele funcției wp_link_pages():

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

Acum, pur și simplu stilizați clasa .link-pages. Iată ce folosesc eu:

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

Desigur, stilizați în funcție de nevoile dumneavoastră.

Chip Bennett

55.1K

10 apr. 2011 16:00:36

@toscho mulțumesc pentru articol, m-a ajutat foarte mult! Am mers puțin mai departe și am adăugat tag-uri de element de listă la ambele ieșiri, astfel încât să le pot formata mai ușor.

Postez acest hack în codul tău, poate ajuta pe cineva.

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

Este posibil să marchem pagina curentă folosind un filtru WP. Filtrul wp_link_pages_link utilizat în wp_link_pages() primește elementul de link, care este un singur număr pentru pagina curentă și un anchor pentru alte pagini. Deci, putem verifica dacă elementul este un număr și să-l înfășurăm într-un span:

/**
 * Filtru wp_link_pages pentru a înfășura pagina curentă în 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' );

Desigur, presupunând că nu filtrați deja linkurile într-un mod în care pagina curentă nu mai este un singur număr. Apoi, puteți să o stilizați folosind clasa current.

Elio

261

22 apr. 2014 03:36:02

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

Din păcate, nu există o modalitate de a face asta doar cu funcții native: WP este ... agnostic la cerere și produce întotdeauna linkuri către pagina curentă (meniuri de navigare, liste de pagini ...).

De asemenea, nu poți folosi un filtru, deoarece wp_link_pages() nu are un filtru adecvat.

În temele mele, folosesc o funcție proprie, bazată pe acest cod. Este probabil prea lungă pentru a fi postată aici, așa că am pus-o ca un plugin pe GitHub: Logical Page Links.
Poți folosi plugin-ul așa cum este sau poți copia codul în tema ta.

Marcajul rezultat va arăta astfel:

<p class="pager"> 
  <b title='Sunteți aici.'>1</b>  
  <a class=number href='http://example.com/page/2/'>2</a> 
</p>

Elementul <b> marchează pagina curentă, poți să-l stilizezi astfel:

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

Mai multe caracteristici sunt enumerate în readme-ul plugin-ului.

Actualizare

Am înțeles greșit întrebarea. Am crezut că ai nevoie de o astfel de funcție pentru arhive. Îmi cer scuze.

Iată o versiune rescrisă a funcției wp_link_pages() ca plugin. Presupun că o vei include în tema ta.

<?php # -*- coding: utf-8 -*-
/*
Plugin Name: Linkuri numerotate în pagină
Description: Înlocuitor pentru wp_link_pages cu numere. Folosește 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 );

/**
 * Modificare a wp_link_pages() cu un element suplimentar pentru evidențierea paginii curente.
 *
 * @param  array $args
 * @return void
 */
function numbered_in_page_links( $args = array () )
{
    $defaults = array(
        'before'      => '<p>' . __('Pagini:')
    ,   'after'       => '</p>'
    ,   'link_before' => ''
    ,   'link_after'  => ''
    ,   'pagelink'    => '%'
    ,   'echo'        => 1
        // element pentru pagina curentă
    ,   '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
        {   // evidențierea paginii curente
            // nu sunt sigur dacă avem nevoie de $link_before și $link_after
            $output .= "<$highlight>{$link_before}{$j}{$link_after}</$highlight>";
        }
    }

    print $output . $after;
}