Come personalizzare il CSS del tuo sito Web WordPress? Scoprilo in questo articolo

Indipendentemente dal tema WordPress che scegli per il tuo sito Web, ci saranno altri siti Web che lo utilizzeranno. E nonostante le tante possibilità di personalizzazione offerte da molti Temi WordPress oggigiorno puoi rendere il tuo sito web ancora più unico.

Per davvero Per toccare l'aspetto visivo del tuo tema WordPress, devi andare oltre la personalizzazione standard offerta dalle opzioni o impostazioni di un tema WordPress. La personalizzazione CSS del tuo blog WordPress ti consentirà di modificare il fileaspetto del tuo sito web per renderlo davvero unico.

Questo tutorial esaminerà la varietà di metodi disponibili per personalizzare il tuo sito Web con CSS, creando e personalizzando temi figlio, utilizzando plug-in di personalizzazione di WordPress integrati e plugin di WordPress di CSS.

Ma prima di iniziare, prenditi il ​​tempo per dare un'occhiata Come installare un tema WordPress, Quanti plugin dovrei installare su WordPress.

Quindi scopri insieme la nostra lista.

CSS: le basi e come WordPress le usa

Prima di tutto: CSS sta per Cascading Style Sheets, che non è più chiaro dell'acronimo. Quindi, scomponiamolo.

Un foglio di stile è un documento che descrive gli stili (come il tipo di carattere, colori, ecc.) da utilizzare per la presentazione di un altro documento. Nel nostro caso, abbiamo a che fare con uno stile delle pagine web.

La partecascataDel nome fa parte di ciò che lo rende davvero potente. Le pagine Web possono essere progettate con più fogli di stile, come una cascata a cascata, con il foglio inferiore che aggiunge o sostituisce gli stili da un livello superiore. Questo è importante perché il modo in cui aggiungi i tuoi stili sovrascriverà le modifiche originali.

Per quanto possa sembrare semplice, i CSS possono essere utilizzati per modificare praticamente qualsiasi cosa in una pagina web (inclusi layout, colori, caratteri e persino animazioni).

Scopri come gestire le tue notifiche scoprendo Come gestire le notifiche email su WordPress

La maggior parte delle Temi WordPress utilizzare un codice CSS disponibile in un file chiamato style.css. Se apri questo file, vedrai un elenco completo di regole di stile per il tuo tema WordPress. Qualunque cosa tu faccia non modificare questo file! Gli aggiornamenti sovrascriveranno le tue modifiche.

Esistono diversi modi per aggiungere un file codice CSS personalizzato al tuo tema WordPress in modo che le tue modifiche sopravvivano ad un aggiornamento del tema WordPress.

Come personalizzare il tuo sito Web WordPress con CSS

Ora che hai capito meglio cos'è il CSS e come farlo Temi WordPress usali, daremo un'occhiata alle opzioni che puoi utilizzare per personalizzare il tuo blog WordPress e discuteremo i pro e i contro di ciascun metodo.

Alla fine del nostro lavoro, sarai in grado di determinare quale metodo corrisponde al tuo tema WordPress.

Opzione # 1: personalizza CSS usando un tema figlio

Se si utilizza un tema bambino per personalizzare il codice CSS, gli aggiornamenti ai temi di cui abbiamo parlato prima non saranno più un problema. Un aggiornamento di un tema WordPress influirà sul tema "genitore», Lasciando intatte le modifiche al tema figlio. Molti sviluppatori di temi WordPress comprendono l'utilità di un tema figlio.

Scopri Quando e come installare WordPress in una sottodirectory

La creazione di un tema figlio è piuttosto semplice. Consiste nel creare una cartella sul tuo web hosting che include un file style.css che elenca il tema principale come modello e importa il file style.css del tema principale (ricordi il significato dei fogli di stile "a cascata"?).

Il WordPress codex contiene ulteriori informazioni sulla creazione di temi figlio.

Dopo aver creato il tema figlio e attivato correttamente, puoi iniziare a personalizzare il tuo tema WordPress. Il modo più veloce sarà modificare il file style.css, a cui è possibile accedere in due modi.

Dai un'occhiata a questo articolo per scoprire Come comprimere i file CSS, HTML e Javascript

Il primo è utilizzare l'editor incluso nella dashboard di WordPress, facendo clic su Aspetto> Editor. Ileditore visualizza un elenco di file sulla destra disponibile nel tema (Vengono visualizzati solo i file più diffusi). Il tuo file style.css sarà in fondo all'elenco e facendo clic sull'opzione foglio di stile votre fichier style.css caricherà.

È possibile aggiungere le modifiche a questa posizione e salvare le modifiche.

L'altro modo per accedere al tuo file style.css (uno si consiglia) è sfogliare i file nel tuo hosting web tramite a client FTP o un file manager. La cartella del tema secondario che hai creato sarà nella cartella " wp-content> temi« . Sarai in grado di utilizzare un editor di testo per modificare il file style.css.

Opzione n ° 2: personalizza il CSS dal Customizer

A partire da WordPress 4.7, gli utenti possono aggiungere CSS personalizzati direttamente dall'area di amministrazione di WordPress. È semplicissimo e potrai vedere le tue modifiche con un'anteprima in tempo reale.

Per prima cosa, devi andare alla pagina Temi »Personalizza.

Questo avvierà l'interfaccia di personalizzazione del tema WordPress.

Vedrai l'anteprima in tempo reale del tuo sito web sulla destra con una serie di opzioni nel riquadro di sinistra. Fare clic sulla scheda Ulteriori CSS nel riquadro di sinistra.

La scheda scorrerà per mostrarti una semplice area in cui puoi aggiungere il tuo CSS personalizzato. Non appena aggiungi una regola CSS valida, sarai in grado di vederla applicata nel riquadro di anteprima in tempo reale del tuo sito web.

Puoi continuare ad aggiungere codice CSS personalizzato, finché non sei soddisfatto di come appare sul tuo sito web. Non dimenticare di fare clic sul pulsante " Salva e pubblica In alto quando hai finito.

Nota: Qualsiasi CSS personalizzato che aggiungi utilizzando il Customizer è disponibile solo con quel particolare tema WordPress. Se vuoi usarlo con altri temi, dovrai copiarlo e incollarlo nel tuo nuovo tema usando lo stesso metodo.

Opzione # 3: personalizza CSS usando un plugin

Il vantaggio dell'utilizzo di un plug-in per la personalizzazione CSS è che si mantiene il plug-in anche se si apporta una modifica al tema di WordPress. Questo ha i suoi compromessi, poiché gli stili non possono essere visualizzati bene su tutti i temi di WordPress.

Qui ci sono alcuni plugin:

1. CSS personalizzato in Jetpack (gratuito)

Il plugin WordPress jetpack  è installato su oltre un milione di siti Web WordPress e probabilmente anche sul tuo. Porta funzionalità disponibili su WordPress.com per i siti Web self-hosted e offre anche a Modulo per la personalizzazione CSS.

Una volta attivato il modulo nella dashboard Jetpack, sarà disponibile un editor CSS personalizzato, che ti consentirà di personalizzare il tuo tema WordPress senza creare un tema figlio. Si accede all'editor seguendo questo percorso " Aspetto> Modifica CSS« .

2. CSS personalizzato semplice (gratuito)

Se invece si desidera una soluzione stand-alone, Semplice CSS personalizzato è una buona scelta. Questo plugin gratuito, utilizzato su più siti Web 200.000 con una valutazione di stelle 4,9, ti aiuterà sicuramente a personalizzare il tuo blog WordPress CSS.

Questo plugin non richiede alcuna configurazione, devi solo installare e attivare il plugin. Per modificare il codice CSS, vai a " Aspetto> CSS personalizzato«  nella dashboard di WordPress. Applica le modifiche al CSS nella casella di testo e, una volta terminato, salva le impostazioni.

3. CSS Hero (da $ 14 all'anno)

L'ultima opzione del plugin WordPress che stiamo esaminando oggi è un plugin WordPress premium chiamato CSS eroe. Da 14 $ all'anno per un sito Web, questo plugin ti consente di personalizzare il tuo tema WordPress usando un'interfaccia intuitiva.

Progettato per funzionare al meglio con dozzine di temi WordPress compatibili , CSS Hero ti dà il controllo totale su tutti gli elementi del tuo tema WordPress. Per i temi che non sono nella loro lista, puoi usare il la moda Rocket per abilitare la personalizzazione di CSS Hero.

CSS Hero elimina la necessità di comprendere la sintassi CSS semplificando l'interazione con il codice tramite un'interfaccia, e questo vale per le animazioni e le transizioni. Puoi anche visualizzare in anteprima le modifiche in tempo reale e ripristinare una versione precedente.

Scopri Come spostare i commenti da un articolo all'altro su WordPress

Se vuoi cambiare completamente il CSS del tuo blog WordPress, ma non vuoi imparare i CSS, CSS Hero è un'ottima opzione per personalizzare il tuo sito web, specialmente se stai utilizzando uno dei loro temi WordPress.

Sebbene tu sappia che il contenuto è importante, tuttavia, vorrai che il tuo sito Web si distingua dalla massa, anche se stai utilizzando un tema WordPress popolare. Con CSS, puoi personalizzare il design del tuo sito web in modo che sia completamente unico.

Vai oltre scoprendo Come consentire agli utenti di modificare alcune pagine

Quindi ci sono diversi modi per personalizzare il CSS del tuo tema WordPress:

1. un tema infantile.
2. il Customizer.
3. plug-in CSS.

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Pubblicità pubblicitaria

WP PRO Advertising System è un plug-in di gestione della pubblicità WordPress, che offre posizioni strategiche 18 per aiutarti a visualizzare annunci pubblicitari sul tuo sito web. Ha anche una sezione statistica dettagliata da cui vedrai il rendimento di ogni annuncio.

Questa funzione è fondamentale perché ti aiuterà a migliorare la tua campagna e massimizzare i tuoi profitti. Questo plug-in di WordPress Adsense include anche una funzionalità unica chiamata annunci in background. Ti consente di visualizzare annunci come sfondo del tuo contenuto.

Inoltre, poiché è compatibile con plugin come WPBakery et Slider Revolution, puoi visualizzare i tuoi annunci sotto forma di cursori o posizionarli ovunque sul tuo sito web.

Download | Demo | Web hosting

2. WP Media File Manager

WP Media File Manager è un plug-in di WordPress che semplifica l'organizzazione della libreria multimediale in una forma gerarchica, utilizzando la funzionalità Drag and Drop. È uno di plugin di WordPress il file manager più potente su CodeCanyon. Non avrai nemmeno bisogno di creare cartelle manualmente.

Questo plugin per WordPress ti consente di caricare migliaia di file dal file manager del tuo PC al sito web copiando automaticamente la gerarchia della cartella di origine. Se vuoi avere lo stesso file in cartelle diverse, sappi che ora hai una vera libreria multimediale che fornisce questa funzionalità.

Dì addio ai problemi di download di tipi di file specifici, ora non ti resta che installare questo plugin per WordPress e lasciare che ti aiuti a gestire i tuoi file.

Download | Demo | Web hosting

3. eroe Menu

Hero Menu è un plugin WordPress per mega menu. E sebbene non sia molto eroico, ha tutte le funzionalità necessarie per soli $ 19. Un po 'come Mega Main Menu, è un plug-in che include anche i prodotti presenti su CodeCanyon e al momento ha quasi 4500 vendite al suo attivo.

Nella sezione delle funzionalità, ti renderai presto conto che è abbastanza facile creare un file megamenu. Il processo richiede solo pochi passaggi. Inoltre, noterai che il plug-in è compatibile WooCommerce, offre un design reattivo e un'interfaccia "drag and drop" per creare i menu.

Il generatore di menu migliora l'uso del plug-in e semplifica notevolmente il lavoro dell'acquirente. Anche l'integrazione dell'interfaccia utente è un ottimo lavoro e l'interfaccia utente si comporta perfettamente con altri plugin.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

• Come proteggere con password un modulo in WordPress
• Come creare belle transizioni di pagine su WordPress
• Come utilizzare l'API REST di WordPress
• Come associare il tuo sito Web WordPress a Telegram
• Come pulire WordPress in pochi passaggi

Conclusione

Ecco! Questo è tutto per questo tutorial. Speriamo che questo tutorial ti abbia mostrato come personalizzare il CSS del tuo sito Web WordPress. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti. 

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.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...