Come personalizzare un tema WordPress con CSS
Quando vuoi imparare come personalizzare un tema WordPress con CSS, una delle prime cose che devi sapere è come modificare i file all’interno del tema stesso.
Il processo per la modifica dei file del tema è effettivamente lo stesso se si sta cercando di personalizzare CSS o HTML, e in precedenti tutorial di questa serie abbiamo già coperto questo processo, allo scopo di modificare HTML.
Quindi, per evitare di ricostruzione stesso terreno, date un’occhiata a Come Modificare il codice HTML in un Tema WordPress” e “Come Installare WordPress in Locale Con XAMPP” per conoscere:
- La modifica di file tramite l’editor del tema
- Scaricare e caricare i file via FTP o di connessione remota
- Perché si dovrebbe considerare di apportare le modifiche all’interno di un tema bambino
- Editing offline tramite XAMPP
Con i metodi di modifica file del tema, già oggetto, in questo tutorial ci occuperemo di rimanere concentrati su come modificare il css in WordPress da imparare su questi argomenti:
- Come aggiungere CSS personalizzato, attraverso il tema customizer
- Come identificare il foglio di stile(s) in un tema è l’utilizzo di
- Come identificare il CSS deve essere cambiato, e dove, per personalizzare una parte specifica di un tema
Nota: Questo articolo si presuppone una conoscenza di base di CSS, ma non necessariamente di come modificare il CSS in WordPress.
Temi e plugin WordPress Premium
Prima di iniziare, non dimenticare che puoi esplorare le migliaia di temi WordPress su ThemeForest e plugin WordPress su CodeCanyon. Acquista questi temi e plugin WordPress di alta qualità e migliora la tua esperienza sul sito Web per te e per i tuoi visitatori.
Come modificare CSS nel tema WordPress Customizer
WordPress ha un’area dedicata in cui è possibile aggiungere il proprio codice CSS personalizzato. Questo codice verrà caricato al momento giusto per assicurarsi che sovrascriva lo stile predefinito del tema e l’utilizzo di questo approccio non apporta modifiche dirette ai file del tema.
Nella barra laterale sinistra del menu del vostro pannello di amministrazione di WordPress andare a Aspetto > Personalizza:
Questo vi porterà il tema di personalizzazione dell’area, dove è possibile fare clic sulla voce di menu CSS Aggiuntive:
UN grande campo verrà visualizzato, in cui è possibile aggiungere qualsiasi CSS personalizzati come:
Salva le tue modifiche facendo clic sul pulsante blu Pubblica nella parte superiore della barra laterale sinistra quando hai finito di aggiungere codice personalizzato.
Come identificare i fogli di stile di un tema
Se non si desidera utilizzare l’area CSS aggiuntiva nel Customizer del tema e invece si desidera modificare direttamente i CSS del tema, è necessario un modo per scoprire quali file un tema sta effettivamente utilizzando per lo styling.
Nella maggior parte dei casi i temi utilizzeranno la struttura standard per WordPress e avranno un file denominato ” style.css ” nella directory principale del tema. In realtà, questo è un file tema essenziale in modo da trovare sempre in qualsiasi tema.
Tuttavia quando lo apri per la modifica potresti scoprire che è vuoto di codice e lo sviluppatore sta caricando lo stile da un altro punto del tema. Oppure, potresti anche scoprire che stanno caricando in più file di fogli di stile.
Esistono due modi per verificare quali fogli di stile vengono utilizzati da un tema.
Controllo del codice Head
Il primo metodo consiste nell’ispezionare il codice <head> del tema. Puoi farlo facendo clic con il pulsante destro del mouse in qualsiasi punto della pagina e scegliendo Visualizza origine pagina, quindi individuando i tag <head>...</head>.
Tra questi tag, cerca <link>elementi che hanno anche rel='stylesheet'. Quindi guarda per vedere quale di questi proviene dalla directory del tuo tema. Gli URL dei fogli di stile ti diranno dove nella struttura del tema trovarli.
Nota che se stai usando un plugin che combina e minimizza tutti i fogli di stile del tuo sito in un unico file, questa tecnica non funzionerà, perché tutto ciò che vedrai è l’URL di quel singolo file. Invece, usa la tecnica due, controllando il file delle funzioni.
Controllo del file di funzioni
Ogni volta che un tema utilizza un foglio di stile, deve dire a WordPress quale file desidera utilizzare, attraverso una funzione denominata wp_enqueue_style(). Quindi possiamo vedere esattamente quale foglio di stile carica il tema trovando il suo uso di questa funzione.
Ogni tema ha un file denominato ” funzioni.php ” situato nella sua directory principale. L’utilizzo della funzione wp_enqueue_style() è in genere in questo file, quindi aprilo e inizia a cercare il nome della funzione.
Quando si individuano le istanze della funzione wp_enqueue_style(), cercare tra le parentesi il secondo parametro, ovvero il bit di testo dopo la prima virgola. Quel testo mostra la posizione del foglio di stile. Biru:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
Nel codice sopra, il secondo parametro è:
get_template_directory_uri() . '/css/mainstyle.css')
Questo ci dice che il foglio di stile si trova in una sottodirectory del tema denominata ” css “e che il suo nome del file è” mainstyle.CSS”.
Come identificare quale CSS modificare
Una volta che sai come aggiungere o modificare il tema CSS, la prossima cosa da imparare è come scoprire quale codice è effettivamente necessario modificare.
Il modo migliore per farlo è utilizzare gli strumenti di sviluppo nel browser, idealmente Chrome o Firefox a causa della qualità dei loro strumenti.
Diciamo, ad esempio, che vuoi cambiare la dimensione del carattere dei titoli dei tuoi post. Fare clic con il pulsante destro del mouse su uno dei titoli dei post e selezionare l’opzione Ispeziona:
Si aprirà il pannello Strumenti per sviluppatori. Cerca nella sua scheda Stili una proprietà font-size.
Se non vedi uno, il browser potrebbe essere che vi mostra un genitore o un figlio elemento, quindi, nella scheda Elementi provare a fare clic su elementi vicini fino a trovare un elemento che sia accuratamente evidenzia la forma del post il testo del titolo e ha un font-size proprietà:
Ora, nella scheda Stili, prova a cambiare il valore per il font-size proprietà. Se vedi il testo cambia dimensione nella finestra del browser sai di aver trovato il CSS corretto.
Per sapere dove si trova questo CSS nel foglio di stile, guarda in alto a destra nel punto in cui hai appena modificato il valore font-size. Dovresti vedere un nome file, quindi due punti, quindi un numero.
Il nome del file ti dice in quale foglio di stile si trova il codice e il numero dopo i due punti ti dice su quale riga troverai quel codice. Ad esempio, l’immagine sopra mostra il codice dallo “stile.file css ” sulla riga 4054. Se stai modificando direttamente il foglio di stile del tema, ora puoi aprirlo, andare al numero di riga in questione e cambiare il CSS.
Se stai lavorando nel campo CSS aggiuntivo del Customizer del tema o all’interno di un tema figlio, dovrai anche indirizzare lo stesso selettore del CSS originale, in modo da poterlo sovrascrivere con il tuo stile.
Torna negli strumenti di sviluppo del browser, cerca il selettore che si trova sopra la proprietà font-size appena modificata. È a sinistra del file del foglio di stile e delle specifiche del numero di riga che abbiamo appena esaminato.
Copia l’intero selettore e incollalo nel tuo codice personalizzato, quindi usalo per indirizzare correttamente il valore font-size modificato.
Controlla sempre le opzioni del tema Baked-in
Prima di andare alla briga di personalizzare i CSS, controlla sempre il Customizer del tema per le opzioni che lo sviluppatore potrebbe aver già inserito nel tema.
I temi hanno spesso opzioni di personalizzazione abbastanza complete che non richiedono codice personalizzato. Quindi, prima di modificare qualsiasi CSS, puoi risparmiare un sacco di tempo vedendo se c’è già un modo a pulsante per apportare la modifica di cui hai bisogno.
Come personalizzare un tema WordPress Passo dopo passo
Ora che abbiamo parlato di come personalizzare CSS e HTML di un tema WordPress, si potrebbe sentire un po ‘ incerto su dove cominciare. Quindi facciamo bollire le cose fino a un elenco di base di passi da seguire:
- Controllare il Tema Customizer per vedere se c’è già un’opzione disponibile che può facilitare il cambiamento che vuoi fare
- Se non lo è, ed è necessario aggiungere alcune semplici CSS personalizzato, utilizzare il CSS Aggiuntive campo in Tema Customizer
- Se avete bisogno di fare più ampie personalizzazioni di HTML o CSS, prendere in considerazione di fare un tema bambino
- Per apportare piccole modifiche direttamente al tema, utilizzare WordPress in tema editor
- Per di più in profondità le modifiche direttamente a un tema, utilizzare FTP, una connessione remota, o di lavorare completamente offline con XAMPP
- Una volta selezionato il metodo di modifica, identifica i fogli di stile del tema ispezionando il codice
<head>del tuo sito o guardando nelle “funzioni” del tema.php” per l’uso della funzionewp_enqueue_style() - Individua le linee specifiche di CSS che devi modificare e i relativi selettori, utilizzando la funzione Inspect di Chrome o Firefox developer tools
Quando approfondisci tutto quanto sopra e familiarizzi, inizierai a vedere quanto è personalizzabile WordPress.
Prima che tu te ne accorga, creerai i tuoi temi figlio completamente originali e creerai disegni tutti tuoi.
E si dà il caso che l’apprendimento “Come fare un tema bambino in WordPress” è il prossimo tutorial in arrivo in questa serie. Restate sintonizzati!