X

Aggiungi una classe CSS personalizzata per pagine specifiche

Snippet di IsItWP

Stai cercando un modo per aggiungere una classe CSS personalizzata per pagine specifiche? Anche se probabilmente esiste un plugin per questo, abbiamo creato un rapido snippet di codice che puoi utilizzare per aggiungere una classe CSS personalizzata per pagine specifiche in WordPress.

Istruzioni:

Tutto quello che devi fare è aggiungere questo codice al file functions.php del tuo tema o in un plugin specifico per il sito:

add_filter( 'body_class', 'my_neat_body_class');
function my_neat_body_class( $classes ) {
     if ( is_page(7) || is_category(5) || is_tag('neat') )
          $classes[] = 'neat-stuff';

     return $classes; 
}

Aggiungi questo snippet di codice al file header.php del tuo tema WordPress per sostituire il tuo tag body HTML predefinito.

<body <?php body_class(); ?>>

Nota: Se questa è la prima volta che aggiungi snippet di codice in WordPress, consulta la nostra guida su come aggiungere correttamente snippet di codice in WordPress, in modo da non compromettere accidentalmente il tuo sito.

Se ti è piaciuto questo snippet di codice, prendi in considerazione la lettura dei nostri altri articoli sul sito come: 27 migliori temi WordPress per aziende e 7 migliori plugin WordPress per il GDPR.

Commenti   Lascia una risposta

  1. È possibile qualcosa di simile ma per un #id? Non voglio la classe .id

    1. Potresti comunque usare la classe .page-id: https://developer.wordpress.org/reference/functions/body_class/

      Detto questo, per gli ID effettivi, potresti aggiungere un ID al file del modello stesso e utilizzare le condizioni per controllare quando viene visualizzato.

  2. ottimo! mi ha davvero aiutato.

  3. Web Designer Freelance 3 giugno 2014 alle 15:30

    dove posso aggiungere la classe una volta completati i passaggi precedenti?

    1. cambia la classe nel codice 'neat-stuff' con quello che preferisci. Potresti anche aggiungere
      classi multiple se necessario.

      1. Web Designer Freelance 3 giugno 2014 alle 15:39

        voglio un id / classe diverso per ogni pagina... come lo assegno a una pagina specifica?

        1. Questo snippet non è quello che ti serve, aggiungerà solo una singola classe a

          “is_page(7) || is_category(5) || is_tag(‘neat’)”

          Una pagina con ID 7 o categoria 5 o una pagina che ha il tag neat. Penso che quello che si adatterebbe meglio alle tue esigenze sia il seguente.

          http://wpsnipp.com/index.php/functions-php/add-parent-page-slug-to-body_class/

          Questo aggiungerà lo slug della pagina come classe per la pagina con un prefisso di parent-{page_slug}. Oltre ad aggiungere questo snippet a functions.php non c'è altro da fare. Dai anche un'occhiata a questo risultato di ricerca per altri snippet relativi a body_class http://wpsnipp.com/?s=body_class

          Sono sicuro che ne troverai alcuni utili.

          1. Web Designer Freelance 3 giugno 2014 alle 16:24

            grazie!

  4. Funziona perfettamente per me, bel lavoro!

  5. Grazie mille per questo, davvero apprezzato!

  6. Grazie per questo, volevo un nome di classe del corpo più corto per un modello di pagina personalizzato, usando is_page_template ('template-name.php') e questo ha funzionato perfettamente.

  7. questo può essere combinato con l'altro snippet di classe del corpo in modo che se le pagine non sono specificate, vengano impostate di default sulla loro pagina come classe?

    1. Dovresti essere in grado di fare semplicemente

           if ( is_page(7) || is_category(5) || is_tag(‘neat’) ){
                $classes[] = ‘neat-stuff’;          }else{
                $classes[] = ‘other-class’;

                }

  8. C'è qualcosa che devi fare dopo aver aggiunto la classe? Non vedo alcun modo per aggiungere una classe personalizzata per una pagina...

    1. Ciao Trevor,
      Sì, dovrai aggiungere la funzione body_class() all'interno del tag body. Ho aggiornato lo snippet per evitare confusione.

  9. Molto utile. Si può fare qualcosa di simile usando il genitore della pagina?

    1. Certo, potresti fare qualcosa del genere, tuttavia se le tue pagine hanno un solo genitore, body_class() aggiungerà già la classe "page-parent" al body. Questo è un problema solo se hai molte pagine figlie poiché ogni sottopagina potrebbe anche essere una pagina genitore. Cosa stai cercando di fare?

  10. Elliott il ragazzo del web design 18 maggio 2011 alle 22:43

    Ora questo è uno snippet molto ordinato per layout di pagina personalizzati – fantastico!

    1. Fantastico, sono contento che ti piaccia!

Aggiungi un commento

Siamo lieti che tu abbia scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra normativa sulla privacy e tutti i link sono nofollow. NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.

Checklist per il lancio di WordPress

La Guida Definitiva per il Lancio di WordPress

Abbiamo raccolto tutti gli elementi essenziali della checklist per il lancio del tuo prossimo sito web WordPress in un comodo ebook.
Sì, Inviami l'eBook Gratuito!