Se crei il tuo tema WordPress, un tema figlio dal genitore o modifichi un tema, incontrerai la necessità di aggiungere il tuo foglio di stile personalizzato CSS. Molto probabilmente vorrai anche sovrascrivere alcuni stili dal foglio di stile del tema predefinito.

Esistono diversi modi per aggiungere i propri stili e/o sovrascrivere gli stili predefiniti. Quindi qual è il modo migliore per farlo? Gli sviluppatori saranno d’accordo è creando i propri file CSS personalizzati e incorporarli nel tema WordPress si sta lavorando.

Modi per aggiungere codice CSS personalizzato ai temi WordPress

Non parleremo di modi ammortizzati per aggiungere stili CSS in elementi HTML o aggiungere blocchi < style >. Al giorno d’oggi, questi metodi sono abbandonati dagli sviluppatori. Inoltre, non sono SEO friendly, che è una questione importante di cui preoccuparsi al giorno d’oggi.

Non suggeriremo nemmeno di modificare il foglio di stile CSS originale del tema (di solito lo stile.css), o l’aggiunta di codice personalizzato ad esso. Questo file è spesso molto grande e difficile da gestire. Qualsiasi piccolo errore di battitura o errore di sintassi potrebbe causare il crash dell’intero sito.

In questo articolo vi mostreremo come creare un file CSS personalizzato e incorporarlo in un tema WordPress.

Come aggiungere file di fogli di stile personalizzati ai temi WordPress usando wp_register_style() e wp_enqueue_style()

Il primo passo per incorporare file CSS personalizzati in WordPress è aggiungere file al tuo tema. Utilizzando un client FTP o il file manager cPanels individuare la cartella del tema e aprirlo. Ora puoi creare un nuovo file e un nome ad esempio personalizzato.css o caricare il file CSS dal computer. Nel caso in cui sia necessario aggiungere più di un file CSS al tema WP, ripetere questo passaggio.

Se hai completato correttamente questo passaggio, dovresti vedere il tuo file CSS personalizzato o i tuoi file nell’editor del tema di installazione di WordPress.

Collegamento di file CSS personalizzati la sezione head del sito

Ora che hai aggiunto i tuoi file CSS personalizzati alla cartella del tema WP è il momento di collegare i file nella sezione head< del tuo sito >. In questo modo il sito può applicare i tuoi stili personalizzati ai suoi elementi.

Puoi semplicemente aggiungere un elemento < link>alla sezione < head>del tuo sito, preferibile proprio prima del tag </head> di chiusura. In questo modo gli stili CSS personalizzati caricano l’ultimo e sovrascrivono gli stili predefiniti. La sezione < head> del tuo sito si trova solitamente nell’intestazione della cartella del tema.file php ed è accessibile attraverso l’editor di temi WordPress.

Ecco un esempio dell’elemento quando il tuo sito si trova nella cartella “test-site” nella cartella principale del tuo server, la tua cartella del tema si chiama “test-theme” e il tuo file CSS si chiama “custom.css”:

<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">

Questa semplice soluzione funzionerà bene, ma non è la migliore pratica di incorporare file CSS nei siti WordPress.

Incorporare un file CSS in WordPress utilizzando le funzioni wp_register_style() e wp_enqueue_style ()

La pratica consigliata per incorporare file CSS personalizzati nel tuo sito WordPress è registrando il tuo foglio di stile nelle funzioni del tuo tema WP.file php che utilizza le funzioni wp_register_style() e wp_enqueue_style (). In questo modo i tuoi file CSS verranno caricati nel momento in cui viene attivata l’azione wp_head. Il tuo foglio di stile sarà posizionato subito dopo il foglio di stile predefinito del tema. e ti permettono di sovrascrivere gli stili predefiniti.

La prima cosa da fare è individuare le funzioni del tema.file php. Si trova all’interno dell’editor di temi WordPress. Puoi anche farlo usando FTP o cPanels File Manager. Se si sta lavorando su un tema figlio, modificare il file di funzioni dei temi figlio, non quello del tema padre. In questo modo eviterai di perdere il tuo codice personalizzato quando aggiorni il tema principale. Scorri verso il basso fino alla fine delle funzioni.php e aggiungere il seguente frammento di codice:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

Personalizza lo snippet: nell’esempio sopra, abbiamo chiamato la funzione di registrazione ” additional_stylesheets “e registrato un file CSS del foglio di stile denominato” personalizzato.css”, precedentemente caricato nella nostra cartella tema. È possibile assegnare un nome alla funzione come si desidera e sostituire il nome della funzione nella riga superiore e inferiore dello snipet. Se il file del foglio di stile ha un nome diverso da quello personalizzato.css sostituire la parola custom nel snipet con il proprio nome del file.

Se hai fatto tutto correttamente, puoi iniziare a scrivere il tuo codice CSS nel tuo foglio di stile. Noterai che i tuoi stili influenzano il sito mentre salvi le modifiche e ricarichi la pagina. Non dimenticare di pulire la cache del browser quando si aggiorna la pagina.

Incorporare più file CSS di fogli di stile personalizzati in funzioni.php usando wp_register_style () e wp_enqueue_style ()

Prima di aggiungere più file CSS al tuo tema WP, prendi in considerazione che causa più richieste del server quando il sito viene caricato, il che influisce sulla velocità di caricamento del tuo sito. Cerca di usare meno fogli di stile possibile.

Ora, diciamo che hai un file di foglio di stile separato per gli stili desktop chiamato personalizzato.css e un secondo file di foglio di stile chiamato responsive.css per dispositivi mobili. Incorporare entrambi i fogli di stile nelle tue funzioni.il file php è semplice e richiede una leggera modifica del singolo frammento di file mostrato sopra:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

Come personalizzare il singolo frammento di file, modificare i nomi dei file di conseguenza alla situazione.

Ulteriori informazioni sulle funzioni wp_register_style() e wp_enqueue_style ()

Per ulteriori informazioni sull’utilizzo delle funzioni wp_register_style() e wp_enqueue_style() per registrare i fogli di stile, visitare la pagina dedicata del codice WP.