Stilizzare i collegamenti di impaginazione nei post di WordPress

WordPress offre una funzionalità relativamente poco conosciuta per dividere i tuoi post estremamente lunghi in pagine diverse. Tuttavia, è un po’ difficile da stilizzare, quindi corrisponde allo stile generale del tuo sito poiché, per impostazione predefinita, WordPress non applica le classi CSS per indirizzare i suoi elementi. Impariamo come filtrare la funzione che li genera e aggiungere classi per stilizzarli.

Panoramica

I post possono essere impaginati digitando il <!--nextpage--> Quicktag durante la scrittura del contenuto del post, per indicare che il contenuto che segue il tag deve essere inserito in una nuova pagina. I link vengono quindi generati utilizzando la funzione wp_link_pages, che crea l’impaginazione del contenuto del post.

Anche se devi considerare le implicazioni SEO dell’impaginazione dei contenuti, e questo è un intero argomento di per sé, probabilmente hai una buona ragione per farlo, come un articolo incredibilmente lungo, probabilmente con molte immagini e video incorporati che richiederebbero troppo molto da caricare e consumerebbe molte risorse sul tuo server.

Inizializzazione

Possiamo chiamare la wp_link_pagesfunzione nel nostro tema WordPress, comprese le nostre classi CSS pronte per essere stilizzate in questo modo:

<?php
    wp_link_pages(
        'before' => '<div class="nextpages">'. esc_html__( 'Next Pages:', 'startfunction' ),
        'after' => '</div>',
        'pagelink' => '<span class="pagelink">%</span>'
    );

Filtraggio

Cosa succede se utilizziamo un tema figlio? se è costruito correttamente usando get_template_partpotremmo copiare il file nel nostro tema figlio e reinizializzare la funzione con i valori appropriati.

Una buona alternativa sarebbe usare il filtro wp_link_pages_argsper sovrascrivere l’inizializzazione della wp_link_pagesfunzione. Possiamo aggiungere il seguente codice nel file functions.php del nostro tema figlio:

<?php
function startfunction_link_pages( $r) {
    $args = array(
        'before' => '<div class="nextpages">'. esc_html__( 'Next Pages:', 'startfunction' ),
        'after' => '</div>',
        'pagelink' => '<span class="pagelink">%</span>'
    );
    return wp_parse_args( $args, $r );

    }
add_filter( 'wp_link_pages_args','startfunction_link_pages' );

Questa è anche una buona alternativa se la funzione è inizializzata all’interno di un framework e vogliamo sovrascrivere i valori per il nostro scopo.