Come applicare i CSS su pagine/post specifici

Pubblicato: 2022-01-04

Sai che puoi applicare CSS su una pagina specifica o un post in WordPress ? Sì, grazie alla natura compatibile con i CSS di WordPress, questo è possibile. E in questa guida, ti mostreremo i vari modi attraverso i quali puoi aggiungere CSS a una pagina o un post specifici.

Tutti i temi WordPress di solito applicano stili diversi a ciascun tipo di contenuto. Post, pagine, tassonomie, profili e qualsiasi altro contenuto hanno fogli di stile diversi in ciascuno di essi. E lo stesso vale per i plugin e anche per tutti gli altri aspetti di WordPress.

Tuttavia, grazie alla flessibilità di WordPress, puoi anche utilizzare fogli di stile diversi per una pagina e tipi di post specifici. Ma diamo un'occhiata al motivo per cui potresti dover aggiungere CSS a loro prima di eseguire il processo.

Perché applicare CSS a una pagina o un post specifico

L'aggiunta di CSS a pagine e post specifici è molto utile se stai creando un sito Web o progettando il tuo sito Web . I CSS vengono generalmente utilizzati per personalizzare l'aspetto visivo del sito web. Quindi, l'utilizzo dei CSS sul tuo sito web in generale può essere molto utile per presentare le tue pagine web esattamente come desideri per i visitatori del tuo sito web.

Potrebbe esserci una pagina particolare o un tipo di post che necessita di un design unico rispetto ad altre pagine o post sul tuo sito web. In questo caso, una delle tue migliori opzioni è applicare i CSS sulla pagina specifica o sul post. Queste pagine o post vengono solitamente aggiunti ai menu del tuo sito web. Ma possono anche includere altre pagine e post unici come la pagina del negozio, la pagina del prodotto o persino la home page.

Ad esempio, anche noi di QuadLayers abbiamo utilizzato i CSS su pagine specifiche come Portfolio e About per renderle diverse da altre pagine o tipi di post. Ora, senza ulteriori indugi, andiamo avanti con il processo.

Come applicare CSS su una pagina o un post specifico

Esistono vari modi con cui puoi aggiungere CSS applicati a una pagina o un post specifici. Ma ecco i 3 più comuni :

  1. Utilizzo dell'ID o della classe HTML
  2. Aggiunta di una funzione PHP
  3. Compreso il file CSS su una pagina o un post specifico

Tutti questi approcci possono essere utilizzati per applicare i CSS per molteplici scopi. Analizzeremo tutti questi approcci in questo articolo con un tutorial passo-passo adeguato.

1. Utilizzo dell'ID o della classe HTML

Questo è uno degli approcci più comuni e ampiamente accettati se desideri applicare i CSS su una pagina o un post specifico. Tutto quello che dobbiamo fare è prendere un identificatore univoco che avrà una pagina o un post. Quindi, questa classe o ID HTML ci consente di indirizzare tutti i nostri script CSS alla pagina o al post desiderati.

1.1. Trova la classe HTML o l'id della pagina

Innanzitutto, devi scoprire l'id o la classe da utilizzare per lo script CSS. Questo può essere facilmente trovato con l'aiuto dello strumento di ispezione del browser.

Basta aprire la pagina in cui si desidera applicare i CSS e fare clic con il pulsante destro del mouse sull'elemento che si desidera modificare. Quindi fare clic su Ispeziona .

Qui, controlla il tag HTML del corpo. Questo varierà a seconda del tema che stai utilizzando.

Abbiamo usato il tema Twenty Twenty in tutti i seguenti esempi. Quindi, questo è ciò che vedrai quando ispezioni la home page di un sito Web utilizzando il tema Twenty Twenty:

Dallo screenshot sopra, l'identificatore univoco che ha la home page è la classe " home ". Pertanto, se vuoi applicare alcune regole CSS solo alla home page, devi utilizzare questa classe nei tuoi selettori.

Ad esempio, supponiamo di voler applicare uno stile al logo solo nella home page . Quindi, oltre alla classe home, abbiamo bisogno anche del selettore dell'immagine del logo. Ancora una volta, questo può essere ottenuto dallo strumento di ispezione del browser.


In questo caso, utilizzeremo la classe "logo personalizzato" per applicare il nostro stile al logo. Ora, mettiamoli insieme alla classe acquisita nel passaggio precedente. Infine, possiamo applicare il nostro script solo sulla home page utilizzando il seguente selettore CSS:

 .home .custom-logo{ /*your CSS here */}

Nota: non è necessario seguire tutti i tag HTML intermedi e includerli nel selettore. Puoi saltarli tutti anche se l'elemento a cui vuoi applicare lo stile è lontano dal selettore di pagina unico.

Naturalmente, se hai bisogno di un selettore più specifico, puoi utilizzare il selettore di percorso CSS completo. Ma questo è piuttosto opprimente e non sarà necessario nella maggior parte dei casi.

Ad esempio, questo è un selettore molto specifico per lo stile dello stesso elemento del logo che abbiamo visto prima:

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2. Trova la classe HTML o l'ID del post

Simile alle pagine, dovrebbe esserci anche una classe HTML univoca per ogni post. Ancora una volta, ispeziona l'elemento sul post a cui desideri applicare i CSS con l'aiuto dello strumento di sviluppo del browser. Quindi, sarai in grado di vedere l'identificatore univoco come con l'attributo postid .

Per il post successivo con il tema Twenty Twenty, la classe che identifica questo post è postad -557.

post id ispeziona applica CSS su una pagina specifica post

Allo stesso modo, puoi fare lo stesso con qualsiasi altra pagina di un sito web. Utilizzando la classe univoca che identifica una pagina. Se guardi lo screenshot seguente, puoi vedere che la classe che identifica la pagina è page-id-357 .

id pagina ispeziona applica CSS su un post di pagina specifico

Infine, crea il tuo selettore CSS adatto alle esigenze del tuo sito Web, proprio come l'esempio del logo personalizzato. Quindi, puoi applicare il CSS sulla pagina specifica o sul post aggiungendolo in Aspetto > Personalizza > CSS aggiuntivo . Se hai bisogno di ulteriore aiuto, puoi dare un'occhiata alla nostra guida su come applicare CSS a WordPress o applicare CSS utilizzando lo strumento di sviluppo del browser.

2. Aggiunta di una funzione PHP

Il metodo precedente è adeguato per applicare il nostro CSS personalizzato a post o pagine specifici. Sarà sufficiente per la maggior parte della personalizzazione di cui potresti aver bisogno. Ma in alcuni casi possono esserci delle limitazioni:

  • Il tuo tema non ha alcuna classe o ID HTML univoco per il contenuto di cui hai bisogno per lo stile.
  • Hai un ampio elenco di regole CSS e devi salvarle in file separati.
  • Vuoi applicare qualche altra condizione oltre alla pagina corrente.

Se hai problemi simili quando vuoi applicare CSS a una pagina o un post specifico, usare una funzione PHP sarebbe meglio.

Ma prima di iniziare, assicurati di eseguire il backup del tuo sito Web WordPress o di creare un tema figlio per questo approccio. Modificheremo alcuni file delicati sul tuo sito web. Pertanto, qualsiasi modifica non necessaria potrebbe portare a ulteriori problemi con il tuo sito web.

Se hai bisogno di aiuto puoi anche utilizzare uno dei migliori plugin per temi figlio per WordPress per creare un tema figlio.

2.1. Trova l'ID della pagina/del post

Il primo passo è controllare l'id della pagina o del post in cui vogliamo applicare i nostri stili. Potresti notare che i valori id sono gli stessi del passaggio precedente. Tuttavia, questo non è lo stesso ID HTML che abbiamo usato prima.

L'id a cui ci riferiamo ora è una variabile PHP che identifica post e pagine. Considerando che l'id nell'approccio precedente identifica una classe HTML.

Per fortuna, è molto facile trovare la pagina e pubblicare l'ID sul tuo sito web. Puoi vedere l'ID di pagine e post nella dashboard dell'amministratore di back-end quando apri l'editor . L'ID del post o della pagina è menzionato nell'URL del tuo browser.

URL id pagina applica CSS su un post di pagina specifico

Un altro modo per ottenere l'ID di una pagina o di un post è utilizzare il seguente script nel file functions.php del tema figlio. Basta andare su Aspetto > Editor temi e aprire il file functions.php .

Quindi, incolla il seguente snippet nell'editor e aggiorna il file. Stamperà l'id della pagina sul front-end.

 add_action('wp_head',function(){
    $page_id = get_queried_object_id();
    eco $page_id;
});

front-end dell'id della pagina come applicare i CSS su una pagina/post specifico

Dopo aver conosciuto l'identificatore PHP per il post o la pagina a cui devi applicare il CSS, puoi semplicemente stampare il CSS sulla testa. Puoi usare lo stesso hook che abbiamo usato prima, cioè wp_head() .

Basta incollare ancora una volta il seguente snippet nel file functions.php .

 add_action('wp_head','my_head_css');
funzione mia_testa_css(){
    $page_id = get_queried_object_id();
    se($id_pagina==97){
        echo "<style> /* il tuo CSS qui */ </style>";
    }
}

Assicurati di aggiungere il tuo CSS nella sezione "il tuo CSS qui" e Aggiorna il file.

3. Compreso il file CSS su una pagina o un post specifico

I metodi precedenti vanno bene per aggiungere piccoli pezzi di CSS per la personalizzazione di base richiesta da un post o una pagina specifici. Ma per script CSS più grandi, devi seguire le buone pratiche e caricare un file CSS separato. dove dovrebbero essere raccolti tutti i tuoi CSS personalizzati.

3.1. Crea file CSS utilizzando l'editor di codice

Innanzitutto, è necessario creare il file CSS separato con tutti gli script CSS necessari utilizzando un editor di codice. È possibile utilizzare editor come Visual Studio Code, Sublime text o qualsiasi altro che supporti i file CSS.

Quindi, crea un nuovo file con estensione CSS e incolla qui il tuo codice. Abbiamo chiamato il file my-style.css per questo tutorial.

3.2. Carica il file CSS nella cartella del tema figlio

Ora, il file CSS che hai creato deve essere caricato nella directory del tema figlio. Per questo, puoi utilizzare un client FTP come FileZilla per caricare il file. Puoi persino caricarlo nella directory principale del tema figlio stesso.

3.2. Accoda il tuo file CSS personalizzato

Ora puoi accodare il tuo file CSS personalizzato al tuo sito Web WordPress aggiungendo uno snippet di codice al tuo file functions.php .

Nello script seguente, utilizzeremo l' wp_enqueue_script() , che è il modo corretto per applicare i file CSS a un sito Web WP. All'interno della funzione, registriamo e accodiamo il nostro file CSS ( my-styles.css ) solo se la condizione è soddisfatta. Questo è lo stesso utilizzo dell'esempio precedente.

Quindi, la funzione get_queried_object_id() recupererà l'id della pagina o del post corrente. Tutto quello che devi fare è aggiungere ancora una volta il seguente script al file functions.php e aggiornarlo .

 add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

funzione my_theme_styles() {
    if(get_queried_object_id()==97){
        wp_register_style( 'i miei-stili', get_stylesheet_directory_uri() . '/i miei-stili.css');
        wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
    }
}

Nota: nello script di esempio sopra, ci riferiamo allo stesso riferimento ID utilizzato negli esempi precedenti, che è 97.

Se desideri ulteriori informazioni sull'aggiunta di un file CSS, dai un'occhiata alla nostra guida dettagliata per applicare CSS a WordPress.

Conclusione

Questi sono tutti i vari metodi attraverso i quali puoi applicare CSS a una pagina o un post specifici. Può aiutarti molto a creare design unici per pagine e post particolari per il tuo sito web. Per riassumere, ci sono 3 modi più comuni per aggiungere CSS a pagine e post specifici:

  • Utilizzo dell'ID o della classe HTML
  • Aggiunta di una funzione PHP
  • Incluso il file CSS su una pagina o un post specifico

L'approccio più semplice è utilizzare l'ID HTML o la classe per i selettori CSS. Tuttavia, se il tuo tema ha dei limiti, la tua prossima opzione migliore è aggiungere una funzione PHP per applicare CSS. Infine, se devi applicare script CSS di grandi dimensioni per la pagina specifica o il post, includerli in un file CSS è l'approccio più adatto a te.

Se vuoi usare più CSS sul tuo sito web, abbiamo anche tutorial per personalizzare il menu Divi con CSS o modificare il negozio WooCommerce in modo programmatico. Allo stesso modo, puoi anche personalizzare ulteriormente le tue pagine e i tuoi post con l'aiuto delle nostre guide per creare post e pagine in modo programmatico, trasformare un post in una pagina, creare un tipo di post personalizzato o persino aggiungere post a una pagina in WordPress.

Quindi, puoi applicare i CSS a pagine o post specifici ora? Questo tutorial è stato utile? Per favore fateci sapere nei commenti. Nel frattempo, ecco altri articoli che potresti voler visitare:

  • Come convertire/cambiare il tipo di post in WordPress
  • Crea un tipo di post personalizzato WordPress in modo programmatico
  • Come personalizzare la pagina del carrello di WooCommerce