Come modificare i CSS in WordPress (modifica, aggiungi e personalizza l'aspetto del tuo sito)

Vuoi provare a modificare i CSS di WordPress, ma non hai idea da dove iniziare? Con lo stile CSS, puoi modificare l'aspetto del tuo sito a livello globale o su determinate pagine. Aggiungi colori, distanzia alcuni elementi, progetta un layout e sostanzialmente cambia esattamente l'aspetto di qualsiasi cosa nel tuo tema WordPress.

Se vuoi acquisire maggiore familiarità con l'ambiente di sviluppo di WordPress o semplicemente avere un controllo più preciso sull'aspetto del tuo sito Web, dovrai sapere come aggiungere CSS in WordPress (oltre a come modificare ciò che è già presente).

Modificando il tuo tema e includendo CSS aggiuntivo, sarai in grado di ottimizzare ogni singolo elemento visivo del tuo sito. Oggi, daremo un'occhiata più da vicino.

Pronto per iniziare? Facciamolo!

Preferisci guardare la versione video?

Che cos'è la modifica CSS?

CSS sta per Cascading Style Sheets ed è il linguaggio web più popolare oltre all'HTML. I due vanno di pari passo, poiché i CSS vengono utilizzati per lo stile degli elementi HTML. L'HTML pone le basi per l'aspetto di un sito Web e il CSS viene utilizzato per definirlo ulteriormente.

CSS ti dà la possibilità di rendere reattivo un sito Web, aggiungere colori, modificare i caratteri, modificare il layout e, in generale, perfezionare la presentazione visiva di un sito Web. Come HTML e JavaScript, CSS è un linguaggio lato client front-end, il che significa che viene eseguito sull'estremità dell'utente, anziché sul server back-end.

Quando ti immergi nello sviluppo di WordPress, HTML, CSS, JavaScript e PHP sono i linguaggi che devi conoscere. Questo è ciò in cui è integrato il CMS principale, così come i suoi numerosi temi e plugin.

Ma anche se non sei un web designer o uno sviluppatore, è bene prendere un po' di CSS, poiché puoi usarlo per spostare o dare uno stile agli elementi del tuo sito web, o apportare piccole modifiche estetiche al tuo tema per adattarlo meglio a te.

WordPress e CSS

All'interno di WordPress, CSS è leggermente diverso. È controllato da temi, che sono costituiti da file modello, tag modello e, naturalmente, foglio di stile CSS. Sebbene generati dal tuo tema, tutti questi sono modificabili da te.

I file modello dividono parti del tuo sito Web in sezioni (come header.php o archive.php) e i tag modello vengono utilizzati per richiamarli e altri contenuti dal tuo database. Questi file sono in realtà costituiti principalmente da PHP e HTML, anche se puoi aggiungere CSS se necessario.

Quello che stai veramente cercando è il foglio di stile, o style.css. Per cambiare l'aspetto del tuo sito web, dovrai imparare come aggiungere e modificare il codice in questo file.

Come personalizzare il tuo tema WordPress con CSS

Se desideri personalizzare il tuo tema e modificare l'aspetto del tuo sito con i CSS, dovrai aggiungere il tuo codice o modificare ciò che è già presente. Esistono modi per aggiungere CSS senza dover mai toccare i file del tema, ma per modificare il codice del tema esistente, dovrai accedere al foglio di stile del tuo sito.

Quando apporti queste modifiche, c'è una cosa che dovresti sapere: quando il tuo tema viene aggiornato, tutte le modifiche apportate a style.css , functions.php o altri file di modelli di temi verranno cancellati. In generale, non dovresti apportare modifiche dirette al tuo sito Web nell'editor senza utilizzare un tema figlio.

Il foglio di stile è come un "elenco di istruzioni" per il tuo sito Web, che imposta esattamente come è disegnato e come viene gestito il codice CSS. Qui è dove farai la maggior parte delle tue modifiche, ma ti mostreremo anche come accedere ad altri file di modelli di temi, come header.php e footer.php.

Esistono due modi per accedere al foglio di stile del tuo sito Web WordPress: tramite la dashboard di WordPress o tramite un client FTP. Li copriremo entrambi.

Non ti senti a tuo agio nel farlo da solo? Prendi in considerazione l'assunzione di uno sviluppatore WordPress per gestire questo passaggio per te.

Modifica dei CSS di WordPress nella Dashboard

Il modo più semplice e conveniente per accedere al tuo foglio di stile CSS è direttamente nella dashboard di WordPress. Non è necessario installare programmi FTP o editor di codice. Puoi modificare direttamente qualsiasi file con l'evidenziazione della sintassi e la documentazione delle funzioni integrate.

Prima di apportare modifiche importanti ai file core, dovresti sempre eseguire il backup del tuo sito WordPress. È molto facile commettere accidentalmente un errore che potrebbe alterare l'aspetto del tuo sito se non conosci i CSS e potrebbe essere difficile capire come ripristinare le modifiche.

Dopo aver eseguito un backup e un tema figlio, accedi al tuo back-end. Puoi trovare l'editor andando al menu e facendo clic su Aspetto > Editor temi .

Dovresti vedere un popup che ti avverte di non apportare modifiche dirette a questi file. Non preoccuparti, fai clic su "Capisco". È solo un avvertimento per utilizzare un tema figlio ed eseguire il backup del tuo sito Web prima di apportare modifiche importanti. Segui questi passaggi ed è sicuro modificare.

E ora ci sei! Dovresti essere sul foglio di stile per impostazione predefinita, ma in caso contrario guarda il menu a destra per visualizzare i file del tuo tema.

Oltre a style.css, avrai anche accesso a file modello come functions.php, header.php e single.php. Tutti questi influiscono sul modo in cui agiscono determinate pagine del tuo sito.

Ma dovresti familiarizzare con PHP prima di immergerti in questi file particolari.

Ricorda solo: la maggior parte delle modifiche CSS che apporti qui saranno globali. Ad esempio, se modifichi le intestazioni H1 con un determinato carattere, avrà effetto per ogni singola pagina del tuo sito. Dovrai utilizzare una sintassi speciale per personalizzare lo stile di pagine specifiche.

Modifica i file del tema direttamente

Cosa succede se non riesci ad accedere all'Editor dei temi o preferisci eseguire il tuo lavoro tramite FTP? È più facile utilizzare l'editor di back-end, ma alcuni temi o plugin potrebbero disabilitarlo. In tal caso, dovrai connetterti al tuo sito Web tramite FTP.

FTP, o File Transfer Protocol, consente di accedere e modificare in remoto i file di un sito Web. La prima cosa che devi fare è scaricare FileZilla o qualsiasi altro client FTP.

Successivamente, dovresti contattare il tuo host e chiedere le tue credenziali FTP (host, porta e nome utente/password se applicabile). Se il tuo host ha una dashboard, potresti essere in grado di trovarli effettuando l'accesso.

Le credenziali degli utenti di Kinsta si trovano nella dashboard di MyKinsta in Siti > SFTP/SSH .

Una volta che li hai, avvia il tuo client FTP e inserisci tali informazioni. Se non funziona, prova a mettere "sftp://" prima dell'URL nella sezione Host .

Una volta entrato, puoi trovare il tuo file style.css facendo clic sulla cartella wp-content per aprirlo, quindi sulla cartella del tuo tema (come il tema T goy Twenty ), quindi scorrendo fino a visualizzare style.css.

Fare doppio clic per aprirlo (o fare clic con il pulsante destro del mouse e selezionare Visualizza/Modifica ) e apportare le modifiche. Ricordati di salvare e caricare di nuovo sul server.

Se hai bisogno di modificare altri file modello come home.php, single.php, archive.php, puoi trovarli nella stessa cartella di style.css.

La modifica dei file del tema, tramite FTP o dashboard, non è sempre necessaria. In effetti, è meglio evitare di farlo se stai solo aggiungendo del codice extra.

Per piccole aggiunte, ecco il modo migliore per aggiungere CSS al tuo sito WordPress.

Come aggiungere CSS personalizzati in WordPress

Se non stai cercando di modificare il codice CSS esistente e vuoi semplicemente aggiungere il tuo stile, ti consigliamo vivamente di utilizzare uno dei seguenti metodi: Personalizzatore di WordPress o utilizzando un plug-in dedicato.

Per uno, il codice CSS aggiunto tramite uno di questi metodi è molto più facile da accedere e utilizzare. Non devi preoccuparti di mettere il tuo nuovo CSS nel posto sbagliato o di dimenticare dove lo hai aggiunto se vuoi apportare modifiche in seguito.

Iscriviti alla newsletter

Vuoi sapere come abbiamo aumentato il nostro traffico oltre il 1000%?

Unisciti a oltre 20.000 altri che ricevono la nostra newsletter settimanale con suggerimenti per esperti di WordPress!

Iscriviti ora

Inoltre, i CSS aggiunti tramite uno di questi metodi non andranno persi quando il tuo tema si aggiorna (sebbene possa ancora scomparire se cambi i temi).

Ciò significa che non è necessario utilizzare un tema figlio e, se qualcosa si rompe, tutto ciò che devi fare è rimuovere il CSS che hai appena aggiunto.

Tieni presente che dovresti comunque conservare un backup del tuo sito Web, poiché alcune persone hanno riferito di aver perso occasionalmente i propri CSS durante gli aggiornamenti principali. Tuttavia, questo metodo è molto più affidabile rispetto alla modifica diretta dei file dei temi.

Anche se puoi semplicemente aggiungere codice a style.css e chiamarlo un giorno, se non vuoi creare un tema figlio, apportare modifiche importanti ai CSS esistenti nel tuo tema e potenzialmente finire con tutto il tuo lavoro cancellato, è meglio per utilizzare l'opzione CSS aggiuntivo nel personalizzatore di WordPress o installare un plug-in.

1. Modifica CSS tramite Personalizzatore di WordPress

Invece di usare l'editor dei temi, prova questo. Accedi al tuo backend WordPress e fai clic su Aspetto > Personalizza per aprire la schermata di personalizzazione del tema. Vedrai un'anteprima dal vivo del tuo sito web, con opzioni a sinistra per personalizzare elementi come i colori, i menu o altri widget.

Nella parte inferiore di questo menu, dovresti trovare la casella CSS aggiuntivo .

Fare clic per aprirlo. Verrai indirizzato a una nuova schermata con una casella di immissione del codice e alcune istruzioni. La schermata CSS aggiuntivo include l'evidenziazione della sintassi, proprio come l'editor del tema, insieme alla convalida che ti consente di sapere se il tuo codice è sbagliato.

Qualsiasi codice che scrivi appare automaticamente nell'area di anteprima a destra a meno che non presenti un errore (sebbene tu possa comunque scegliere di pubblicarlo).

Quando hai finito di lavorare, puoi pubblicare il tuo codice, programmare quando entrerà in vigore o salvarlo come bozza su cui lavorare in seguito. Puoi persino ottenere un collegamento in anteprima da condividere con gli altri.

Come puoi vedere, la pagina CSS aggiuntivo è per molti versi più potente dell'Editor dei temi e molto più adatta per aggiungere codice che per pasticciare con i file core.

Il codice CSS che scrivi qui sovrascrive lo stile predefinito del tuo tema e non scompare quando il tuo tema viene aggiornato. Se non riesci a vederlo "dal vivo" sulla tua anteprima, ricontrolla di utilizzare i selettori corretti nel tuo codice CSS.

Proprio come con l'Editor temi, CSS è globale per impostazione predefinita, ma puoi scrivere codice che ha come target pagine specifiche.

L'unico aspetto negativo è che, se cambi tema, tutto ciò che hai scritto verrà cancellato. Assicurati di eseguire il backup del tuo CSS prima di passare a un nuovo tema o potresti perdere molto lavoro.

Se hai difficoltà a utilizzare questa opzione o desideri una soluzione che funzioni su più temi e possa indirizzare più facilmente determinate pagine, dovresti invece provare un plug-in.

2. Aggiunta di CSS personalizzati a WordPress utilizzando i plugin

Ci sono alcuni motivi per cui potresti voler utilizzare un plugin per aggiungere CSS a WordPress. Sebbene la funzione sia simile al menu CSS aggiuntivo, gli stili di solito rimangono attivi anche se si cambiano/aggiornano i temi.

Potresti anche goderti di più la loro interfaccia utente o apprezzare le funzionalità extra come il completamento automatico. Alcuni plugin ti consentono persino di creare CSS tramite menu a discesa, invece di doverlo scrivere tu stesso.

CSS personalizzato semplice

Simple Custom CSS è il plugin per editor CSS più popolare, grazie alla sua facilità d'uso, all'interfaccia minima e al backend leggero. In breve, è un plug-in WordPress molto piccolo che racchiude un grande pugno.

La configurazione è un gioco da ragazzi e non vedrai alcun impatto negativo sulle prestazioni. Funziona su qualsiasi tema e include l'evidenziazione della sintassi e il controllo degli errori.

CSS e JS personalizzati semplici

Simple Custom CSS e JS è una buona alternativa. Ti consente anche di scegliere come target l'intestazione, il piè di pagina, il front-end o persino il back-end dell'amministratore.

SiteOrigin CSS

SiteOrigin CSS è un'altra opzione che include anche un editor CSS tradizionale. Puoi passare da esso all'editor visivo in qualsiasi momento.

WP Aggiungi CSS personalizzato

Se stai lottando per aggiungere CSS a pagine specifiche, WP Add Custom CSS aggiunge una casella CSS personalizzata alla schermata di modifica e include anche uno stile globale.

CSS Eroe

Potresti anche prendere in considerazione la possibilità di provare un editor CSS visivo. Questi prendono tutta la codifica complicata e la trasformano in una serie di campi di input e menu a discesa facili da usare che gestiscono tutta la programmazione per te.

CSS Hero è un plug-in di editing visivo premium con alcune funzionalità davvero potenti (animazione, modifiche specifiche del dispositivo e editing non distruttivo per citarne alcuni).

Dove imparare i CSS

Pronto per tuffarti nei CSS? Questi tutorial per principianti stabiliranno le basi e ti insegneranno la sintassi che dovrai conoscere per scrivere il tuo codice CSS funzionale.

Può essere scoraggiante, ma a meno che tu non stia cercando di fare qualcosa di veramente avanzato, CSS non è troppo difficile! Cose semplici come cambiare il colore di sfondo o impostare lo stile dei caratteri sono abbastanza facili e ci sono molti esempi online.

(Lettura consigliata: oltre 50 caratteri moderni da utilizzare sul tuo sito Web WordPress)

Anche la maggior parte dei tutorial di programmazione che troverai su Internet sono completamente gratuiti. Ci sono un sacco di informazioni là fuori a nessun/piccolo costo.

Ecco alcuni esempi che coprono i migliori tutorial CSS per principianti.

• Tutorial CSS di W3Schools: qui puoi trovare un sacco di informazioni: tutorial approfonditi, esempi e riferimenti con cui lavorare. I tutorial di W3Schools sono il più semplici e facili da seguire possibile, quindi anche se sei un principiante assoluto, questo è un ottimo punto di partenza.
• Codeacademy Impara i CSS: attraverso sei lezioni pratiche gratuite, imparerai le basi dei CSS. Questo non è un semplice video tutorial, ma una lezione interattiva che ti fa lavorare con il codice reale. Con la versione pro, ottieni anche quiz e progetti a mano libera su cui lavorare.
• Impara i CSS in un'ora: molte persone vogliono imparare un nuovo linguaggio di programmazione, ma semplicemente non hanno il tempo da dedicare. Ma se puoi dedicare solo un'ora, puoi imparare i CSS con questo corso gratuito in 20 parti. Anche se alla fine non sei un maestro, dovresti avere una buona conoscenza delle basi.
• Introduzione a HTML e CSS di base per utenti di WordPress: cerchi qualcosa di specifico per WordPress? Se hai sempre lottato con la scrittura di HTML e CSS, questo corso è perfetto per te. È a pagamento, ma include 52 lezioni e cinque ore di video da cui imparare.

Sommario

Come utente di WordPress, saltare in CSS potrebbe inizialmente creare confusione. Ma una volta che sai come modificare i file del tuo tema e dove aggiungere uno stile, non dovresti più avere problemi.

I file dei temi possono essere modificati dal tuo back-end o tramite FTP per cambiare l'aspetto del tuo sito, ma questo di solito dovrebbe essere evitato a meno che tu non debba modificare il codice esistente.

Se vuoi solo aggiungere il tuo CSS, usa la pagina CSS aggiuntivo in Aspetto > Personalizza o prova un plugin se hai bisogno di qualcosa di più potente.

Le modifiche al foglio di stile andranno perse durante l'aggiornamento del tema, a meno che non utilizzi un tema figlio. Lo stesso non vale per CSS aggiuntivo. Il tuo codice è al sicuro dagli aggiornamenti, ma non dimenticare: solo un plug-in manterrà i CSS quando cambi i temi.

Qualunque sia il metodo che scegli, dovresti sempre mantenere backup regolari del tuo sito Web, inclusi il foglio di stile e il codice personalizzato che hai aggiunto. Ora è il momento di rispolverare le tue basi CSS utilizzando le risorse che abbiamo fornito.

Stile felice!

Letture consigliate: I migliori corsi di Web Design online