Vai al contenuto principale

Come personalizzare il CSS del tuo sito Web 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]

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 molte opzioni di personalizzazione che molti temi WordPress offrono in questi giorni, 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 l'aspetto del tuo sito web per renderlo davvero unico.

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

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

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.

Come personalizzare il CSS del tuo sito Web WordPress

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 dei temi WordPress utilizza il 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 una migliore comprensione di cosa sono i CSS e come li usano i temi di WordPress, daremo un'occhiata alle opzioni che puoi usare per personalizzare il tuo blog WordPress e discuteremo dei pro e dei contro di ogni metodo.

come personalizzare il sito Web css wordpress 1

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.

come personalizzare il sito Web CSS WordPress 1 1

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]

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.

foglio di stile WordPress

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.

come personalizzare il sito Web css wordpress 2

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

Accesso al personalizzatore di WordPress per personalizzare il tema

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.

inserisci codice css aggiuntivo e pubblica

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. jetpack-forme-plugin

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]

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.single-custom-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.CSS Eroe WordPress Plugin

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.

Scoprire 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 il CSS, CSS Hero è un'ottima opzione a tutto tondo per personalizzare il tuo sito web, specialmente se usi 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 utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa 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.Adning Advertising Plugin per WordPress

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 dei più potenti plugin di file manager di WordPress su CodeCanyon. Non avrai nemmeno bisogno di creare cartelle manualmente.

WP Media File Manager WordPress Media Library Cartelle Categorie Plugin di caricamento

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.Hero Menu Responsive WordPress Mega Menu Plugin

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]

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.

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.

... 

Questo articolo contiene 1 commento

  1. Buongiorno,

    Vorrei presentarvi il plug-in Anym Live Editor che consente la modifica completa di CSS o SCSS e Javascript da qualsiasi pagina di WordPress e che offre un rendering in tempo reale delle modifiche apportate! Inoltre, il plugin è dotato di una varietà di strumenti che ti consentono di interagire con la pagina che desideri modificare e funziona come un normale IDE (Sublime text style), ma questa volta, dedicato al tuo sito WordPress.

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