Come aggiungere lo slug della pagina alla classe Contenuto in WordPress

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

L’aggiunta di uno slug di pagina nel tema WordPress consente di effettuare tutti i personalizzazioni desiderati senza alcuna complicazione. Potete facilmente modificare i colori, i font e altri elementi delle singole pagine senza influenzare il resto del sito.

In questo articolo vi mostreremo come aggiungere uno slug di pagina nel contenuto dei vostri temi WordPress.

Perché aggiungere uno slug di pagina nella classe Contenuto del tema?

Se si desidera personalizzare pagine specifiche del sito e si vuole identificare correttamente la pagina, l’aggiunta di uno slug nella classe del contenuto del tema è molto utile.

Di default, il sito WordPress mostra solo le classi ID dell’articolo, il che può essere complicato quando si tratta di riconoscere la pagina corretta. Uno slug di pagina mostra l’URL dell’articolo del blog, rendendo più facile personalizzare la pagina.

Inoltre, è possibile eseguire diversi personalizzazioni alle pagine utilizzando una classe di contenuto dello slug della pagina. Ad esempio, è possibile modificare il font e i colori di una particolare pubblicazione o evidenziare un pulsante di invito all’azione su una specifica landing page.

Detto questo, vediamo come aggiungere lo slug della pagina nel contenuto del tema di WordPress.

Aggiunta di uno slug alla pagina nel tema di WordPress

Per aiutarvi ad aggiungere l’URL della vostra pagina nel contenuto del tema WordPress, potete inserire il seguente codice nel file functions.php del vostro 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' );

È possibile accedere ai file functions.php del tema andando nell’editor del codice di WordPress. Tuttavia, modificare direttamente i file del tema è molto rischioso.

Questo perché qualsiasi errore nell’aggiunta del codice può danneggiare il sito e bloccare l’accesso alla dashboard di WordPress.

Un modo molto più semplice per aggiungere il codice alla classe del contenuto del tema è utilizzare un plugin di WordPress come WPCode.

Con WPCode è possibile aggiungere facilmente codice al sito in pochi minuti e senza errori. Inoltre, garantisce che il codice non venga rimosso in caso di aggiornamento o modifica del tema in futuro.

Inoltre, viene fornito con una libreria di snippet di codice creati da esperti che si possono installare con un clic. Quindi, non è necessario avere competenze di codifica per effettuare personalizzazioni avanzate di WordPress.

Per prima cosa, dovrete installare e attivare il plugin gratuito WPCode sul vostro sito. Per istruzioni passo passo, potete fare riferimento alla nostra guida su come installare un plugin di WordPress.

Una volta attivato il plugin, nella barra di amministrazione di WordPress verrà aggiunta una nuova voce di menu chiamata “Code Snippets”. Facendo clic su di essa, si accede alla pagina in cui è possibile gestire tutti gli snippet di codice.

Per aggiungere il primo snippet di codice personalizzato, fare clic sul pulsante “Aggiungi nuovo”.

Si aprirà la pagina “Aggiungi snippet”, dove è possibile scegliere uno snippet di codice dalla libreria predefinita o aggiungere il proprio codice personalizzato.

Per aggiungere il codice personalizzato, navigare fino all’opzione “Aggiungi codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet”.

A questo punto, dare un titolo al proprio snippet di codice e inserire il codice nella casella “Anteprima codice”. È inoltre necessario selezionare “Snippet PHP” come tipo di codice dal menu a discesa sulla destra.

Quindi, scorrere verso il basso fino alla sezione “Pannello di inserimento”. Qui è possibile scegliere il metodo “Inserimento automatico” per inserire ed eseguire automaticamente il codice in una posizione specifica di WordPress, come l’amministrazione, il frontend e altro. Se non siete sicuri, mantenete l’opzione predefinita “Esegui ovunque”.

Oppure si può scegliere il metodo ‘Shortcode’. Con questo metodo, lo snippet non viene inserito automaticamente. Si otterrà uno shortcode da inserire manualmente in qualsiasi punto del sito.

Quando si è pronti, spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’ in alto a destra.

Per maggiori dettagli, potete fare riferimento alla nostra guida su come add-on di codice personalizzato in WordPress.

Si inizierà a vedere una nuova classe di contenuto, come questa: pagina-{slug}. Usare questa classe per sovrascrivere gli stili predefiniti e personalizzare gli elementi per pagine specifiche.

Per esempio, supponiamo che si voglia dare uno stile ai widget della barra laterale, ma solo su una pagina con lo slug “istruzione”. In questo caso, si potrebbe aggiungere un CSS come questo:

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

Per maggiori dettagli, potete consultare la nostra guida su come add-on di CSS personalizzati a WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere uno slug di pagina nella classe del contenuto del vostro tema WordPress. Potreste anche dare un’occhiata alla nostra guida sui contenuti di WordPress e su come scegliere il miglior software di progettazione.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.