Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere lo slug della pagina alla classe Contenuto in WordPress

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

State cercando un modo per aggiungere lo slug di una pagina di WordPress nel contenuto del tema?

L’aggiunta di uno slug di pagina nel tema WordPress consente di effettuare tutti i personalizzazioni desiderati senza alcuna complicazione. Potete facilmente cambiare i colori, i font e altri elementi in base a pagine specifiche.

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

How to Add the Page Slug to Body Class in 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 un particolare articolo 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.

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”.

Go to Code Snippets and click on Add New

Verrà visualizzata 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”.

Add custom code in WPCode with new 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.

Enter code snippet and choose code type

Quindi, scorrere verso il basso fino alla sezione “Pannello di inserimento”. Qui si può 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”.

Edit insertion method for code

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.

Save and activate code snippet WPCode

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

27 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Alds says

    How about using global $wp_query instead of $post? I’ve noticed that $post gets overwritten if you’ve run a wp_query before the functions.php gets executed.

  3. Daneil says

    Thank you for putting it out there, simple bit of code, but useful and allows you to write more human friendly css files, rather than classes based on ID. Cheers

  4. Austin says

    Thank you so much for this! I found out the hard way that page-id can change given different circumstances. This allows me to style individual pages without as much worry. :)

  5. Kevin says

    Many thanks for this. Had some problems initially due to the position of code in my stylesheet CSS but once moved to the bottom worked great. Just wish this was standard for WP as others have said and that i had known about this a long time ago

  6. Tom McGinnis says

    This code works quite well. I was finding, however, that search results would end up with the body class including the slug from the first item listed. Sometimes the first item would have styles that would override the styles for the search results page. Strange, huh!

    I figured out that if you put !is_search() inside the if statement, then this problem is eliminated. If anybody else runs into this problem, the fix is simple.

  7. Randy Caruso says

    Thanks for this – been stuck hacking myself to bits with the page-id and suffering the consequences.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.