Vai al contenuto principale

Come aggiungere CSS personalizzati al tuo blog WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

C'è più di un modo per aggiungere codice CSS personalizzato a un blog WordPress.

Oggi spiegherò i punti di forza e di debolezza dei due diversi metodi che ti propongo, in modo che tu possa scegliere quello più adatto a te.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Come trovare gli articoli che desideri personalizzare

Dopo aver isolato la parte di il tuo tema WordPress che vuoi cambiare (ad esempio il titolo di un articolo), dovrai farlo determinare le proprietà CSS applicato ad esso in modo da poter apportare le modifiche appropriate. Fortunatamente, questo processo non è complicato.

Il CSS utilizza i selettori per determinare quali elementi subiranno le diverse modifiche specifiche. Di solito, questo viene fatto specificando un " classe "Di un elemento (o elemento DOM). Tuttavia, i CSS possono anche essere utilizzati per definire il layout di un intero elemento (ad esempio, il tag " ") o utilizzando l'identificatore del tag.

Fortunatamente, i browser più diffusi ci consentono di vedere i diversi selettori e dichiarazioni applicati agli elementi della pagina con pochi clic. Su Google Chrome, ad esempio, è sufficiente evidenziare una parte specifica del documento e quindi fare clic con il pulsante destro del mouse, come nell'esempio seguente.

blogpascher ispezione

Cliccando " Ispeziona l'elemento Nel menu a discesa che appare, vedrai il codice HTML della pagina in una nuova finestra con l'elemento ispezionato evidenziato nella finestra a destra (o sotto). È possibile vedere un esempio qui sotto.

blogpascher-logo

I testi di questi elementi (o attributi) Evidenziato in rosso mostra i diversi stili specifici applicabili all'elemento che hai evidenziato esaminando il codice.

Leggi anche: Come aggiungere un menu a tendina con i CSS in Visual Editor

Ad esempio, l'elemento " dimensione del carattere Indica che il carattere visualizzato nell'elemento evidenziato è dimensionato in pixel 13. I descrittori sono circondati da parentesi graffe e preceduti da selettori. Il nome del file del foglio di stile corrispondente viene visualizzato a destra dei selettori.

Una volta che hai in mente queste informazioni, cambiare lo stile diventa facile. Ad esempio, se si desidera modificare il carattere da 13px a 14px, è sufficiente cercare il file del foglio di stile, il selettore che corrisponde a quello dell'elemento evidenziato. È generalmente in questa forma: (« # Informazioni .block-plugin-contenuti"). È quindi possibile modificare i diversi valori degli attributi.

Puoi fare la stessa cosa su Firefox, evidenziare una parte specifica della pagina, fare clic con il tasto destro del mouse sull'elemento, quindi selezionare " Ispeziona l'elemento Nel menu che appare.

Come WordPress e CSS lavorano insieme

È un dato di fatto che i temi di WordPress vengono creati in modo diverso. Quindi, tieni presente che il tuo tema WordPress potrebbe non essere conforme al 100% con ciò che leggi nelle sezioni seguenti.

Detto questo, è più che probabile che il CSS utilizzato sul tuo blog WordPress si trovi in ​​un file chiamato " style.css ". Questo è il nome comune per un foglio di stile per qualsiasi tipo di sito Web, non solo per WordPress.

Vedi anche: Come ridimensionare le immagini Gravatar su WordPress

Ora è il momento di passare attraverso i diversi processi di modifica.

Metodo # 1: modifica del file di stile del tema WordPress

Esistono due modi per accedere al file style.css del tema.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Il primo è farlo dalla dashboard di WordPress. Nel menu a sinistra, seleziona il menu " Apparence "E poi" editore '.

menu Editor-in-picture-edge

Una volta che sei nella pagina dell'editor, vedrai un elenco di file su una barra verticale sul lato destro della pagina. Scorri l'elenco dei file. Vedrai un file denominato " Foglio di stile Style.css Nella parte inferiore della pagina.

Se fai clic sul nome di questo file, questo verrà caricato e visualizzato nell'editor nel mezzo. È possibile utilizzare questa schermata per modificare il file.

menù-wordpress-redattore-code

L'altro modo per trovare il foglio di stile è navigare nel sistema operativo del tuo provider di hosting e individuare il file nella cartella del tema WordPress (utilizzando un client FTP). La posizione esatta varierà a seconda del provider di hosting. Nell'esempio mostrato di seguito, il nome del sito web (nel nostro caso thecare) È una cartella sotto la cartella public_html.

Poiché WordPress è installato, puoi vedere la cartella wp-content in "thecare". La sottocartella wp-content è un'altra cartella chiamata " wp-themes", Che è dove sono installati tutti i temi WordPress.

Da questo sito Web utilizza un tema chiamato " Newsletter », Il file di stile« style.css Si trova nella cartella " Parent Newsletter '.

Newsletter genitore-cartella-800x401

Metodo n. 2: utilizzo di un plug-in per modificare CSS

Forse il modo più conveniente per modificare il CSS del tuo blog WordPress è l'uso di un plugin.

Uno dei principali vantaggi dell'utilizzo di un plugin è simile a quello dei temi figlio. sì aggiorni il tema WordPress, le modifiche non verranno sovrascritte, poiché verranno archiviate separatamente e non tra i file del tema. L'altro vantaggio, ovviamente, è che non devi creare un tema figlio.

Ecco alcuni plugin premium che puoi usare anche per modificare il codice CSS del tuo tema WordPress:

1. Matita gialla: Visual CSS Style Editor

Yellow Pencil è un editor di stili visivi che puoi utilizzare con qualsiasi tema per personalizzare il tuo sito web in pochi minuti (caratteri, colori, animazioni e altro ...).Plugin per wordpress di YellowPencil Visual CSS Style Editor

Questo plugin premium per WordPress creerà stili CSS in sfondo mentre giochi con i colori come se fosse un gioco, pensato sia per i principianti che per gli utenti esperti.

Scopri anche il nostro 5 Plugin WordPress per mostrare le notifiche

Non è richiesta alcuna conoscenza di codifica. Tuttavia, il plugin WordPress ha un buon editor CSS per coloro a cui piace programmare. Puoi scrivere codice live con questo editor e personalizzare il tuo CSS.

Download | Demo | Web hosting

2. Custom JS e CSS per Gutenberg

Il plugin WordPress premium Custom JS e CSS per Gutenberg ti consentirà di aggiungere un numero illimitato di stili personalizzati all'editor WYSIWYG per i tuoi post e pagine WordPress. È completamente compatibile con la versione Gutenberg di WordPress.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Custom JS e CSS per il plugin Gutenberg WordPress

Puoi semplicemente creare un nuovo stile con un editor CSS facile da usare. Questo plugin per WordPress estende le funzionalità di campi personalizzati del tuo sito web e ti dà la possibilità di modificare i tuoi campi personalizzati con un modulo di personalizzazione dinamico e potente. e la funzionalità di anteprima in tempo reale di questo plugin WordPress lo rende molto comodo e intuitivo.

Download | Demo | Web hosting

3. SiteOrigin CSS

È di gran lunga il plug-in di WordPress che offre la maggior parte delle opzioni in questo elenco. La cosa sorprendente di quest'ultimo è che è gratuito. Questo plugin per WordPress è l'unico che non può essere trovato nel customizer.

SiteOrigin CSS - Plugin per WordPress

Dopo aver installato e attivato il plug-in, è necessario accedere al seguente percorso " Aspetto> CSS personalizzato Per accedere all'edizione CSS del plugin. In questa pagina puoi vedere un editor di testo che non offre un'anteprima dal vivo. 

Leggi anche il nostro articolo su Plugin 10 WordPress per aumentare le vendite del tuo sito web

Per accedere a quest'ultimo, devi cliccare su uno dei due pulsanti che compaiono a sinistra, subito sopra l'editor. Il pulsante con l'icona di un occhio mostrerà un editor di codice CSS visivo che gli appassionati apprezzeranno. L'icona con le frecce di estensione mostrerà un editor di testo che implica una padronanza dei codici CSS.

Download | Demo | Web hosting

4. Semplice CSS personalizzato

Semplice CSS personalizzato è uno dei plugin più popolari.

CSS personalizzato semplice - Plugin WordPress WordPress.org

Scopri anche il nostro Come rendere veloce il tuo blog: gestire i file CSS e JS.

È stato installato oltre 100 volte e ha ricevuto una valutazione a cinque stelle.

Download | Demo | Web hosting

5. WP Aggiungere CSS personalizzato

WP Aggiungi CSS personalizzato è un plugin che ti consente di cambia il layout di un blog WordPress articoli interi o solo singoli. Questa è un'ottima opzione se stai cercando flessibilità nella personalizzazione degli articoli.

wp-add-custom

Il plugin è stato scaricato oltre 10.000 volte e attualmente gode di una valutazione di 4,3 stelle.

Download | Demo | Web hosting

6. Junkie tema personalizzato CSS

Se stai cercando una soluzione che offra un'anteprima in tempo reale delle tue modifiche, potresti prendere in considerazione l'utilizzo Tema Junkie CSS personalizzato

tema-junkie-css

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Questa soluzione aggiunge un gestore CSS personalizzato alla tua dashboard, dove puoi aggiungere i tuoi stili. Offre anche un'alternativa a usando un tema figlio.

Download | Demo | Web hosting

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

Conclusione

Ecco! Questo è tutto per questo tutorial, spero che riuscirai ad aggiungere codice CSS personalizzato al tuo blog WordPress in 2 metodi, se ne hai commentaires o suggerimenti, non esitate a comunicarcelo nella sezione riservata a questi.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Se ti è piaciuto questo articolo, nnon esitate a condividi sui tuoi social network preferiti

...  

Questo articolo contiene 1 commento

  1. Grazie mille per tutti i diversi articoli sul tuo sito !! È sempre molto esplicito e comprensibile per un principiante come me… penso che tornerò molto spesso !!

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
4 azioni
quota2
Tweet
Enregistrer2