Come aggiungere Page Slug in Body Class dei temi di WordPress

Se lavori regolarmente su temi WordPress, probabilmente è meglio familiarizzare con questi fogli predefiniti CSS predefiniti di WordPress. Recentemente mentre lavoravo a un progetto di tema personalizzato, abbiamo riscontrato la necessità di personalizzare determinati elementi in base a pagine diverse. WordPress ha queste cose chiamate body classes che emettono la pagina della classe, template-page- filename e page-id- numero. Non è stato possibile utilizzare ID-id- numero perché gli ID pagina cambiano dallo sviluppo alla distribuzione. Inoltre, non volevamo creare un modello di pagina personalizzato con codice ripetitivo. Sapevamo di poter mantenere una cosa uguale su tutte queste pagine che erano slug di pagina, quindi abbiamo deciso di aggiungere slug di pagina in body class che ci permettevano di eseguire tutte le personalizzazioni che volevamo senza complicazioni. In questo articolo, ti mostreremo come aggiungere slug di pagina nella classe del corpo dei tuoi temi WordPress.

Poiché si tratta di un codice specifico per il tema, ti consigliamo di inserirlo nel tema functions.php file.

 // Page Slug Funzione Body Class 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'); 

Ora inizierai a vedere una nuova classe corporea emessa in questo modo: page- slug. Usa quella classe per sovrascrivere gli stili predefiniti e personalizzare gli elementi per pagine specifiche.

Ad esempio, se si sta tentando di modificare un div con classe di widget. Puoi avere il tuo css in questo modo:

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

Spero che troverai questo tutorial utile.