, ,

I Css di WordPress – Come usarli per rendere più bello il tuo sito velocemente

WordPress ti consente di creare un sito Web funzionale e accattivante senza conoscenze tecniche o di sviluppo Php.

Ma, se vuoi ottenere il massimo dal tuo sito WordPress, imparare qualcosa sulla programmazione può essere molto utile.

Uno dei modi più rapidi per iniziare ad apportare modifiche significative al tuo sito WordPress è imparare a utilizzare i CSS in WordPress.

I Cascading Style Sheets (CSS) sono uno dei linguaggi più importanti nel web design. Apportare modifiche CSS al tuo sito ti consente di personalizzarne l’aspetto, il layout, i caratteri, i colori e altro ancora. I CSS offrono un controllo più completo sull’aspetto del tuo sito rispetto al tuo tema – e non è così difficile lavorarci.

 

Saltiamo subito dentro la questione!

Cosa si intende con CSS?

CSS sta per linguaggio Cascading Style Sheets e viene utilizzato per stilizzare elementi scritti in un linguaggio di markup come HTML. Separa il contenuto dalla rappresentazione visiva del sito. La relazione tra HTML e CSS è fortemente legata poiché HTML è il fondamento stesso di un sito e CSS è tutta l’estetica di un intero sito web.

Cosa Sono i Css ?

Per prima cosa, riavvolgiamo la faccenda e parliamo di Hypertext Markup Language (HTML). Questo è il linguaggio principale utilizzato per creare il tuo blog o sito web WordPress ed esso è un linguaggio di natura descrittiva. Il codice HTML comunica ai browser web i vari elementi del tuo contenuto. Ad esempio, indica quale testo fa parte di un Titolo e quale fa parte del corpo del paragrafo.

Puoi anche utilizzare l’HTML per “dettare” (per così dire) lo stile del tuo sito web. Tuttavia, questo è un modo poco maneggevole per portare a termine il lavoro. Ad esempio, se volessi rendere viola tutti i titoli dei tuoi post, dovresti aggiungere il codice HTML contenente le stesse istruzioni a ogni intestazione, individualmente per ogni singolo testo.

È qui che i Cascading Style Sheets (CSS) vengono in nostro soccorso. Questo linguaggio viene utilizzato per dettare come appaiono gli elementi HTML, comprese le dimensioni, layout, colori, caratteri e così via. Ad esempio, puoi cambiare il colore di tutti i titoli del tuo sito utilizzando poche righe di codice con i CSS, senza alterare l’HTML dei tuoi contenuti.

Mantenere la struttura e lo stile separati in questo modo, ti dà il controllo completo sull’aspetto del tuo sito e ti consente di apportare facilmente modifiche ogni volta che lo desideri.

Questo significa anche che puoi iniziare a utilizzare alcuni CSS personalizzati di base in WordPress senza conoscere l’HTML (anche se comprendere le basi dell’HTML aiuta ad accelerare il processo).

Qual’è il compito principale dei Css?

Il compito dei Css è definire lo stile e il layout delle pagine web, rendendole visivamente più accattivanti, user-friendly e accessibili.

Dove aggiungere CSS personalizzati su WordPress?

Sebbene tu possa aggiungere CSS direttamente al foglio di stile del tuo tema WordPress, sconsigliamo questo metodo perché è facile commettere errori e qualsiasi modifica apportata verrà sovrascritta quando aggiorni il tema (a meno che non utilizzi un tema Child).

Fortunatamente, esiste una soluzione più semplice. Per aggiungere CSS a WordPress, devi solo:

Andare su Aspetto > Personalizza nella bacheca di WordPress per aprire il personalizzatore di WordPress
Selezionare l’opzione CSS aggiuntivo dal menu a sinistra nell’interfaccia del personalizzatore WordPress:

L’editor (attualmente) vuoto in quest’area ti consente di digitare righe di codice CSS, senza dover scorrere il foglio di stile esistente. Puoi aggiungere qui tutti i CSS che desideri: includi semplicemente ogni nuovo snippet sulla propria riga. Inoltre, puoi vedere le modifiche diventare effettive nell’anteprima dal vivo. In questo modo, saprai se hanno un aspetto corretto prima di pubblicarle sul tuo sito.

Inoltre, questo editor ti aiuterà a “convalidare” il tuo CSS, che è un modo elegante per dire che ti avviserà se commetti errori evidenti.

Se sei curioso di sapere quali tipi di modifiche CSS puoi apportare, non preoccuparti, ci arriviamo. Rimani su questa pagina e nella tua Bacheca ed esploreremo alcuni modi per iniziare a personalizzare l’aspetto del tuo sito con i CSS.

Come iniziare a personalizzare il tuo sito WordPress con i CSS

Come accennato in precedenza, puoi modificare praticamente qualsiasi aspetto della Grafica del tuo sito utilizzando i CSS su WordPress.

Per ora, tuttavia, faremo cose semplici ed esamineremo alcune modifiche CSS di base che puoi apportare.

Personalizza il colore del testo con i CSS

Abbiamo già accennato  alla modifica del colore del testo, quindi iniziamo da lì. Se vuoi davvero che i tuoi post WordPress attirino l’attenzione dei tuoi visitatori, puoi provare a cambiare il colore del titolo di ogni post. Ecco come appare un post di base nel tema WordPress Twenty Seventeen:

Ora aggiungi questo codice alla casella CSS aggiuntivo nel personalizzatore:

h1 {
colore viola;
}

Come puoi vedere, il colore del titolo del post è cambiato da nero a viola:

Questa stessa modifica verrà applicata anche a tutti gli altri post sul tuo sito. Invece di nominare semplicemente un colore, puoi anche utilizzare codici esadecimali per ottenere la tonalità giusta. Sostituisci semplicemente il viola con # 9C33FF (o qualunque colore tu voglia usare). Quando sei soddisfatto della nuova tonalità, seleziona Pubblica nella parte superiore dello schermo per rendere attive le modifiche.

Personalizza la famiglia e la dimensione dei caratteri con i CSS

E se volessi apportare alcune modifiche al corpo del testo? Modifichiamo la famiglia e la dimensione del carattere, aggiungendo questo codice su una nuova riga:

P {
font-family: Georgia;
font-size: 20px;
}

Ancora una volta, puoi vedere subito i risultati nel personalizzatore:

Infine, facciamo risaltare un po’ di più la barra laterale, aggiungendo uno sfondo azzurro e un po’ di riempimento. Su una nuova riga, incolla questo CSS:

.widget {
background: #B9EBFA;
padding: 25px;
}

Ciò inserisce uno sfondo semplice dietro la barra laterale:

Tieni presente che questo codice influenzerà tutte le aree del tuo widget, incluso il piè di pagina. Se preferisci, puoi anche apportare modifiche a widget specifici. Ad esempio, potresti aggiungere uno sfondo solo al widget di ricerca, sostituendo .widget nel codice sopra con .widget_search:

A questo punto, potresti iniziare a capire come funzionano i CSS dietro le quinte. La prima riga di uno snippet CSS specifica quale elemento stai modificando, come i titoli dei post (h1), il testo contenuto nei paragrafi (p) o le aree del widget (widget). Le righe seguenti, racchiuse tra parentesi, contengono istruzioni specifiche su cosa dovrebbe essere modificato.

Dove imparare di più sui CSS

Ci sono molte guide utili online che ti aiuteranno a saperne di più sui CSS e sugli elementi più comuni che puoi influenzare. Fino ad allora, se hai difficoltà a capire quale codice ti serve per apportare una particolare modifica, una semplice ricerca su Google di solito ti porterà alla risposta. Risorse come i documenti web MDN di Mozilla oppure puoi seguire la guida Css di Html.it di solito questi si posizionano molto bene su Google e fanno un ottimo lavoro spiegando vari aspetti dei CSS.

Con un po’ di pratica, ti ritroverai ad aggiungere CSS con facilità in pochissimo tempo.

 

Conclusione

Lavorare con il codice del tuo sito web può sembrare intimidatorio se sei un principiante. Invece, molte dei linguaggi su cui si basa il tuo sito sono sorprendentemente facili da usare quando si tratta di apportare modifiche di base.

Imparare a utilizzare i CSS personalizzati in WordPress in modo efficace potrebbe richiedere un po’ di tempo, ma ti fornirà un livello di controllo senza precedenti sull’aspetto e sul layout del tuo sito.

Invece di apportare modifiche direttamente al foglio di stile CSS del tuo tema, dovresti utilizzare il personalizzatore WordPress per aggiungere codice CSS in modo rapido e sicuro.

Questo processo ti consente di modificare i colori, le dimensioni, i caratteri e il posizionamento di vari elementi, senza influenzare in modo permanente il codice principale del tema attivo. Inoltre, potrai vedere le tue modifiche in tempo reale, così saprai esattamente quale effetto avranno.