Come aggiungere lo slug della pagina alla classe del corpo in WordPress

Abbiamo lavorato su molti siti WordPress nel corso degli anni e un trucco di personalizzazione a cui torniamo sempre è l'aggiunta dello slug della pagina alla classe del body. È una cosa così semplice, ma fa un'enorme differenza quando si tratta di flessibilità di progettazione.

Ecco cosa intendiamo: Probabilmente ci sei già passato: vuoi stilizzare una sola pagina in modo diverso dal resto del tuo sito. Senza lo slug della pagina nella classe del body, finisci per lottare con complessi selettori CSS o per creare fogli di stile separati.

Aggiungere uno slug di pagina nel tema WordPress ti consente di eseguire tutte le personalizzazioni che desideri senza complicazioni. Puoi facilmente cambiare colori, font e altri elementi su singole pagine senza influenzare il resto del tuo sito.

In questo articolo, ti mostreremo come aggiungere uno slug di pagina alla classe del body dei tuoi temi WordPress. Abbiamo utilizzato questo metodo su tutto, da semplici siti aziendali a complessi negozi di e-commerce.

Perché aggiungere uno slug di pagina alla classe del body nel tuo tema?

Se stai cercando di personalizzare pagine specifiche del tuo sito e vuoi identificare correttamente la pagina, allora aggiungere uno slug di pagina alla classe del body del tuo tema è davvero utile.

Per impostazione predefinita, il tuo sito WordPress mostrerà solo le classi degli ID dei post, il che può essere complicato quando si tratta di riconoscere la pagina corretta. Uno slug di pagina mostra l'URL del tuo post del blog, rendendo più facile personalizzare la pagina.

Oltre a ciò, puoi eseguire diverse personalizzazioni alle tue pagine utilizzando una classe body basata sullo slug della pagina. Ad esempio, puoi modificare il font e i colori di un post particolare o evidenziare un pulsante di call-to-action su una specifica landing page.

Detto questo, vediamo come puoi aggiungere lo slug della pagina alla classe body del tuo tema WordPress.

Aggiungere uno Slug di Pagina nel Tuo Tema WordPress

Per aiutarti ad aggiungere l'URL della tua pagina alla classe body del tuo tema WordPress, puoi inserire il seguente codice nel file functions.php del tuo tema.

function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Puoi accedere ai file functions.php del tuo tema andando all'Editor Temi di WordPress (Editor Codice). Tuttavia, modificare direttamente i file del tema è molto rischioso.

Questo perché qualsiasi errore durante l'aggiunta del codice può rompere il tuo sito e impedirti di accedere alla tua bacheca di WordPress.

Un modo molto più semplice per aggiungere il codice alla classe body del tuo tema è utilizzare un plugin WordPress come WPCode. Lo utilizziamo su più siti, consulta la nostra recensione completa di WPCode per saperne di più.

Con WPCode, puoi facilmente aggiungere codice al tuo sito in pochi minuti e senza errori. Inoltre, garantisce che il tuo codice non venga rimosso se aggiorni o cambi il tuo tema in futuro.

Viene inoltre fornito con una libreria di snippet di codice creati da esperti che puoi installare con 1 clic. Quindi, non hai bisogno di competenze di codifica per effettuare personalizzazioni avanzate di WordPress.

Infatti, l'aggiunta di uno slug di pagina alla classe del corpo è disponibile come snippet predefinito nella libreria WPCode. Questo è il metodo più semplice da seguire.

Innanzitutto, dovrai installare e attivare il plugin gratuito WPCode sul tuo sito. Per istruzioni passo passo, puoi fare riferimento alla nostra guida su come installare un plugin WordPress.

Una volta attivato il plugin, verrà aggiunto un nuovo elemento di menu chiamato 'Snippet di codice' alla barra di amministrazione di WordPress. Facendo clic su di esso, verrai portato alla pagina in cui gestirai tutti i tuoi snippet di codice.

Per aggiungere il tuo primo snippet di codice, fai clic sul pulsante ‘Aggiungi nuovo’.

Questo aprirà la pagina ‘Aggiungi snippet’, dove puoi scegliere uno snippet di codice dalla libreria predefinita.

Cerca semplicemente lo snippet ‘Aggiungi lo slug della pagina alla classe del corpo’ e, quando lo trovi, fai clic sul pulsante ‘Usa snippet’.

Ora, WPCode aggiungerà automaticamente il codice e imposterà il metodo di inserimento corretto.

Tutto quello che devi fare è spostare l'interruttore da ‘Inattivo’ ad ‘Attivo’. Infine, fai clic sul pulsante ‘Aggiorna’ in cima alla pagina.

Ora inizierai a vedere una nuova classe del corpo che viene generata in questo modo: page-{slug}. Usa quella classe per sovrascrivere i tuoi stili predefiniti e personalizzare gli elementi per pagine specifiche.

Ad esempio, supponiamo che tu voglia stilizzare i tuoi widget della barra laterale, ma solo su una pagina che ha lo slug “education”. In tal caso, potresti aggiungere CSS in questo modo:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Per maggiori dettagli, puoi consultare la nostra guida su come aggiungere CSS personalizzato a WordPress.

Aggiungere il codice personalizzato manualmente

Se preferisci aggiungere manualmente il codice personalizzato sopra, ecco come farlo.

Innanzitutto, naviga alla pagina Snippet di codice » Aggiungi snippet dal tuo pannello di controllo di WordPress.

Da lì, vai all'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’.

Quindi, devi selezionare un tipo di codice dall'elenco di opzioni che appaiono sullo schermo. Per questo tutorial, scegli ‘Snippet PHP’.

Ora, assegna un titolo al tuo frammento di codice, che servirà solo come riferimento e potrà essere qualsiasi cosa per aiutarti a identificare il codice.

Successivamente, copia e incolla semplicemente il codice sopra nella casella ‘Anteprima codice’.

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’. Qui, puoi scegliere il metodo ‘Inserimento automatico’ per inserire ed eseguire automaticamente il codice in una specifica posizione di WordPress come l'area di amministrazione, il frontend e altro ancora.

Se non sei sicuro, mantieni l'opzione predefinita ‘Esegui ovunque’.

Oppure, puoi scegliere il metodo ‘Shortcode’. Con questo metodo, lo snippet non viene inserito automaticamente. Otterrai uno shortcode che potrai inserire manualmente ovunque sul tuo sito.

Quando sei pronto, attiva l'interruttore da ‘Inattivo’ ad ‘Attivo’ e fai clic sul pulsante ‘Salva snippet’ nell'angolo in alto a destra.

Per maggiori dettagli, puoi fare riferimento alla nostra guida su come aggiungere codice personalizzato in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere uno slug di pagina nella classe body del tuo tema WordPress. Potresti anche voler consultare la nostra guida su la classe body di WordPress e come scegliere il miglior software di web design.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.