[NOVITÀ] WP Media Cleanup elimina le immagini inutilizzate nascoste nella tua libreria multimediale
Joella Dunn
Joella Dunn
John Turner
John Turner
Vi è mai capitato di guardare il vostro sito WordPress pensando: "È quasi perfetto, ma quel pulsante è della tonalità di blu sbagliata" o "Vorrei che il testo fosse un po' più grande"?
I temi WordPress sono dotati di opzioni di personalizzazione, ma a volte non sono in grado di coprire tutto ciò che si desidera modificare.
È qui che entra in gioco il CSS: è come avere una bacchetta magica che vi permette di modificare l'aspetto del vostro sito esattamente come volete.
In questa guida vi mostrerò cos'è il CSS, come aggiungere i vostri stili personalizzati e alcuni esempi pratici per iniziare.
Alla fine, vi sentirete più a vostro agio nell'apportare quelle modifiche visive che portano il vostro sito da "quasi" a "esattamente".
Pensate al vostro sito web WordPress come a una casa. Il codice HTML costituisce la struttura - i muri, le stanze e le fondamenta. I CSS (Cascading Style Sheets) sono tutti gli elementi di design interno: i colori della vernice, la disposizione dei mobili, l'illuminazione e i tocchi decorativi.
I CSS indicano al browser come visualizzare il contenuto della pagina. Volete che tutto il testo dei vostri paragrafi sia blu? I CSS possono farlo.
Avete bisogno di più spazio tra il titolo e il paragrafo sottostante? I CSS si occupano anche di questo.
La struttura di base dei CSS segue questo schema:
selector { property: value; }
Il selettore si rivolge a elementi specifici della pagina e le coppie proprietà-valore definiscono l'aspetto di tali elementi.
Ad esempio:
p { color: blue; }
Questa semplice riga indica al browser di visualizzare tutto il testo dei paragrafi in blu. È tutto qui!
Pur essendo semplice nel concetto, il CSS diventa potente quando si iniziano a combinare diversi selettori e proprietà per creare regole di stile precise per il sito.
Il CSS in WordPress non si trova solo in un posto, ma è stratificato in tutto il sito, ed è per questo che si chiama "a cascata". Capire questa gerarchia aiuta a capire dove apportare le modifiche.
Il file style.css del tema è la base. Contiene tutte le regole di stile di base che conferiscono al tema il suo aspetto caratteristico. Consideratelo come il pacchetto predefinito per l'arredamento degli interni.
Il Customizer di WordPress offre una sezione dedicata "CSS aggiuntivi", dove è possibile aggiungere in modo sicuro i propri stili. Questi sostituiscono quelli predefiniti del tema e sopravvivono agli aggiornamenti del tema.
Se si devono apportare modifiche sostanziali, un tema figlio è la scelta migliore. Il suo file style.css eredita tutto dal tema padre, ma gli stili aggiunti hanno la precedenza.
Alcuni plugin apportano il proprio CSS per lo stile delle loro funzioni specifiche. Di solito questi vengono caricati dopo gli stili del tema.
L'Editor dei blocchi (Gutenberg) e l'Editor del sito completo introducono nuovi modi per aggiungere CSS, consentendo di stilizzare blocchi o sezioni specifiche senza influenzare l'intero sito.
Occasionalmente, è possibile vedere CSS inline, ovvero stili applicati direttamente agli elementi HTML utilizzando l'attributo style. Questo approccio è generalmente sconsigliato per lo stile di tutto il sito, perché è più difficile da mantenere.
La comprensione di questa cascata è importante perché quando gli stili sono in conflitto, vince il CSS più specifico o che si carica più tardi. Per questo motivo è possibile sovrascrivere lo stile del tema con CSS personalizzati.
Imparare i CSS permette di avere un controllo che le opzioni del tema da sole non possono dare.
Molti utenti di WordPress si scontrano con un muro di frustrazione quando non riescono a cambiare qualcosa nell'aspetto del loro sito. Il selezionatore di colori non ha la tonalità giusta. La spaziatura tra gli elementi sembra sbagliata. La dimensione dei caratteri deve essere un po' più grande.
Con una conoscenza di base dei CSS, è possibile effettuare queste regolazioni precise da soli.
I CSS consentono di rendere il sito veramente unico. Senza di esso, siete limitati alle opzioni di personalizzazione che lo sviluppatore del tema ha pensato di includere. Con i CSS, potete liberarvi da questi vincoli.
Quando si verificano degli inconvenienti visivi (e capita), la comprensione dei CSS aiuta a risolverli rapidamente. Forse l'aggiornamento di un plugin ha causato la sovrapposizione di un testo o l'aggiornamento di un tema ha modificato lo stile di un pulsante. Spesso poche righe di CSS possono risolvere immediatamente questi problemi.
Soprattutto, l'apprendimento dei CSS getta le basi per la comprensione del funzionamento dei temi di WordPress. Una volta compreso il modo in cui i CSS controllano l'aspetto, capirete meglio perché le cose appaiono nel modo in cui appaiono, rendendo la risoluzione dei problemi molto più veloce.
Per imparare i CSS sono disponibili numerose risorse accessibili, molte delle quali gratuite.
Mozilla Developer Network (MDN) Web Docs è una grande risorsa per le tecnologie web, compresi i CSS. I loro tutorial suddividono i concetti in parti digeribili con esempi pratici.
W3Schools offre lezioni di CSS per principianti con esempi interattivi in cui è possibile testare il codice direttamente nel browser. Questo approccio pratico rende l'apprendimento meno astratto.
YouTube è pieno di tutorial specifici per i CSS di WordPress. Vedere qualcuno che esegue le modifiche in tempo reale può aiutare i concetti a fare clic quando le spiegazioni testuali non sono sufficienti.
Molte piattaforme di corsi, come Coursera e Udemy, offrono corsi di CSS gratuiti (o molto convenienti). Alcuni si concentrano specificamente su WordPress, mostrandovi esattamente come indirizzare gli elementi del tema.
L'apprendimento più efficace avviene quando si fa pratica. Create un sito di prova (non fate esperimenti sul vostro sito reale!) e provate ad apportare piccole modifiche. Osservate cosa succede quando regolate proprietà come i colori, i margini o le dimensioni dei caratteri.
Ricordate che non è necessario memorizzare ogni proprietà CSS. Anche gli sviluppatori professionisti consultano regolarmente le proprietà. Ciò che conta è capire i concetti fondamentali.
WordPress offre diversi modi per aggiungere CSS personalizzati. Ognuno di essi ha i suoi vantaggi, a seconda delle vostre esigenze e del vostro livello di comfort.
Il Customizer di WordPress è il luogo più sicuro per aggiungere facilmente CSS a WordPress.
Andare su Aspetto " Personalizzazione " CSS aggiuntivi nella dashboard di WordPress.
Verrà visualizzato un editor di codice in cui è possibile digitare o incollare i CSS.
È possibile visualizzare l'anteprima delle modifiche in tempo reale prima di pubblicarle. Se qualcosa non va bene, modificate il codice e vedrete immediatamente i risultati.
Il Customizer è perfetto per piccole e medie quantità di CSS. Se vi trovate ad aggiungere centinaia di righe di codice, potreste prendere in considerazione uno degli altri metodi.
WPCode (ex Insert Headers and Footers) è un popolare plugin per gli snippet di codice. Offre un modo più organizzato di gestire i CSS personalizzati.
Dopo aver installato il plugin, andare su Code Snippets " Add Snippet. Passare il mouse su Aggiungi il tuo codice personalizzato e fare clic su Aggiungi snippet personalizzato.
Scegliere CSS Snippet come tipo di codice, assegnargli un nome descrittivo e aggiungere il codice CSS.
WPCode offre diversi vantaggi rispetto al Customizer. È possibile creare più snippet CSS, rendendoli più facili da gestire rispetto a un unico grande blocco di codice.
È inoltre possibile controllare con precisione dove e quando gli snippet vengono eseguiti. Avete bisogno di CSS che si applichi solo ai post del vostro blog? WPCode può gestire il caricamento condizionale.
Il plugin include funzioni di prevenzione degli errori che aiutano a individuare gli errori di sintassi prima che si ripercuotano sul sito live: un'utile rete di sicurezza quando si sta imparando.
Se si utilizza un tema a blocchi, si ha accesso all'Editor completo del sito anziché al Customizer. Tuttavia, è possibile aggiungere CSS personalizzati al sito.
Navigare a questo URL, adattandolo con il dominio del vostro sito: https://example.com/wp-admin/customize.php
Si aprirà una versione limitata di FSE. Si noterà che ha una sezione CSS aggiuntivi, proprio come il Customizer.
Per le personalizzazioni più estese, potrebbe essere necessario modificare direttamente i CSS nei file del tema di WordPress.
Nella dashboard, si può andare su Aspetto " Editor file del temae modificare il file style.css.
Tuttavia, ciò comporta un'importante avvertenza: Non consiglio di modificare direttamente i file di un tema padre.
Creare invece un tema figlio. Un tema figlio eredita tutte le funzionalità e lo stile del tema padre, consentendo al contempo di apportare modifiche sicure che non saranno sovrascritte durante gli aggiornamenti.
Una volta attivato un tema figlio, è possibile modificare i file CSS nell'editor di file del tema di WordPress. Potete anche accedere ai file del tema tramite FTP o il file manager del vostro provider di hosting.
Vediamo alcuni esempi pratici di semplici CSS personalizzati che risolvono le comuni esigenze di personalizzazione di WordPress.
Volete far risaltare maggiormente i vostri blocchi di citazioni? È possibile definirli con i CSS:
.wp-block-quote {
background-color: #f9f9f9;
border-left: 4px solid #0073aa;
padding: 20px;
}In questo modo i blocchi di citazioni hanno uno sfondo grigio chiaro, un bordo blu a sinistra e un padding per dare respiro.
Forse i widget della barra laterale hanno bisogno di una separazione visiva. È possibile aggiungere spazio e bordi tra di essi:
.widget {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
}Ogni widget avrà ora più spazio sotto di sé e una sottile linea di demarcazione.
I menu di navigazione spesso necessitano di modifiche stilistiche per adattarsi al design del sito:
.main-navigation li a {
color: #333333;
font-weight: 500;
text-transform: uppercase;
}
.main-navigation li a:hover {
color: #0073aa;
}Questo rende i link del menu grigio scuro, leggermente in grassetto, tutto maiuscolo e blu quando ci si passa sopra.
La tipografia ha un impatto enorme sulla personalità del sito. Ecco un esempio di come si possono personalizzare i caratteri con i CSS:
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}Ricordate che se utilizzate font non standard, dovrete prima importarli usando @font-face o collegandovi a Google Fonts.
La modifica dei colori è uno dei compiti più comuni dei CSS. Queste poche righe cambiano lo sfondo del sito in grigio chiaro e rendono i link rosa con una tonalità più scura quando ci si passa sopra:
body {
background-color: #f5f5f5;
}
a {
color: #e94c89;
}
a:hover {
color: #c13872;
}Lo spazio intorno e all'interno degli elementi (margine e padding) influisce in modo significativo sulla leggibilità. Questo aggiunge spazio sotto i paragrafi e crea un padding intorno all'area del contenuto principale:
.entry-content p {
margin-bottom: 20px;
}
.site-content {
padding: 40px 20px;
}I moduli hanno spesso bisogno di un aiuto stilistico per adattarsi al design del sito. Questi stili creano campi di moduli puliti con un pulsante di invio ben visibile:
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0073aa;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}Anche gli sviluppatori più esperti si imbattono in problemi con i CSS. Ecco alcuni problemi comuni e come risolverli.
Avete aggiunto nuovi CSS, ma il vostro sito sembra esattamente lo stesso. Prima di farsi prendere dal panico, spesso si tratta di un problema di caching del browser.
I browser salvano i file CSS (cache) per caricare i siti più velocemente. Ciò significa che potrebbero mostrare il vecchio CSS invece delle nuove modifiche.
Provate a fare un refresh rigido premendo Ctrl+F5 (Windows) o Cmd+Shift+R (Mac). In questo modo si obbliga il browser a ottenere copie fresche di tutti i file invece di utilizzare le versioni memorizzate nella cache.
Se si utilizza un plugin per la cache come WP Super Cache o W3 Total Cache, è necessario cancellare anche la cache quando si apportano modifiche ai CSS.
Cercare il pulsante Cancella cache nelle impostazioni del plugin di caching.
Finché non si cancella la cache, le modifiche potrebbero essere visibili solo all'utente (quando è connesso), ma non ai visitatori abituali.
Quando i CSS non funzionano, il problema spesso risiede nel selettore: il bersaglio è l'elemento sbagliato.
I CSS seguono una gerarchia di specificità. I selettori più specifici sovrascrivono quelli generali. Ad esempio, #sidebar p (un ID più un elemento) sovrascriveranno gli stili impostati solo per p (un elemento).
Gli errori ortografici sono facili da non notare. Era .sidebar o .side-bar? Un trattino fa la differenza.
Gli strumenti di sviluppo del browser sono preziosi per la risoluzione dei problemi. Fare clic con il pulsante destro del mouse sull'elemento che si sta cercando di stilizzare e selezionare Ispeziona. Si vedranno tutti gli stili attualmente applicati e quali sono stati sovrascritti.
Il !important forza l'applicazione di uno stile, indipendentemente dalla specificità:
p { color: blue !important; }
Sebbene sia allettante nei momenti di frustrazione, !important crea grattacapi a lungo termine. Interrompe il naturale funzionamento a cascata dei CSS e porta a "guerre di specificità" in cui si finisce per avere bisogno di più dichiarazioni !important.
Invece, è bene rendere i selettori più specifici. Se .content p non funziona, provare con .content .entry-content p per essere più precisi.
Il vostro sito deve essere bello ovunque. Ciò che funziona sul vostro computer portatile potrebbe rompersi sugli schermi dei cellulari.
Utilizzate gli strumenti per sviluppatori del vostro browser per simulare diverse dimensioni dello schermo. In Chrome, fate clic con il pulsante destro del mouse, selezionate Ispeziona e cercate l'icona di selezione del dispositivo.
Prima di effettuare modifiche al CSS, soprattutto se di ampia portata, eseguite un backup del vostro sito. Non si tratta solo di un buon consiglio, ma di una protezione fondamentale.
Strumenti come Duplicator rendono i backup semplici. È sufficiente creare un nuovo backup e scegliere la preimpostazione Sito completo.
Per una maggiore protezione contro gli errori specifici del sito, invio sempre i backup al cloud. Durante la creazione del backup, scegliete una delle numerose integrazioni con il cloud storage.
Grazie a questa rete di sicurezza, potete sperimentare più liberamente, sapendo che potete ripristinare tutto se qualcosa va storto.
Un backup di cinque minuti può far risparmiare ore di risoluzione dei problemi. Se notate un errore nel CSS, andate a questo backup e premete Ripristina.
Anche se il backup è nel cloud, Duplicator lo scaricherà e lo ripristinerà. Sarà come se l'errore non fosse mai accaduto!
I CSS sono integrati nel tema di WordPress. È possibile aggiungere il proprio CSS personalizzato attraverso il Customizer(Aspetto " Personalizza " CSS aggiuntivo), con un plugin per il codice di WordPress come WPCode o creando un tema figlio e modificando il suo file style.css.
WordPress utilizza entrambi. L'HTML crea la struttura delle pagine e dei post, mentre il CSS controlla l'aspetto della struttura. WordPress genera automaticamente l'HTML in base ai contenuti, mentre il tema fornisce il CSS per lo stile.
Ecco alcuni semplici esempi di CSS personalizzati per WordPress:
p { font-size: 18px; }.button { background-color: #ff6b6b; }.wp-block-image { margin-bottom: 30px; }.element-to-hide { display: none; }.special-text { font-weight: 700; }Non è necessario imparare i CSS se si è soddisfatti delle opzioni integrate nel tema. Tuttavia, imparare anche solo i CSS di base vi permette di avere un maggiore controllo sull'aspetto del vostro sito e di risolvere i problemi visivi senza dover aspettare gli aggiornamenti del tema o pagare uno sviluppatore.
Sì, il CSS è una delle tecnologie fondamentali utilizzate da tutti gli sviluppatori web front-end, insieme a HTML e JavaScript. È un'abilità essenziale per chiunque costruisca siti web a livello professionale.
Il CSS non è un codice misterioso che solo gli sviluppatori professionisti possono capire. È uno strumento pratico che vi dà un controllo preciso sull'aspetto del vostro sito WordPress.
La chiave è iniziare con poco: cambiare un colore qui, regolare la spaziatura là. Man mano che si acquisisce dimestichezza, ci si troverà in grado di effettuare regolazioni più complesse.
Ricordate che ogni sviluppatore professionista di WordPress ha iniziato esattamente dove siete voi ora. Hanno imparato sperimentando, commettendo errori e costruendo gradualmente le loro competenze.
Per iniziare, tenete a portata di mano un backup con Duplicator. Il programma annulla gli errori con un clic, quindi se qualcosa non funziona, è sempre possibile ripristinare le modifiche e riprovare.
Mentre siete qui, penso che vi piaceranno anche queste altre guide su WordPress:
Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Raccomandiamo solo prodotti che riteniamo possano apportare un valore aggiunto ai nostri lettori.
