Share
In questo tutorial, illustreremo come eseguire cinque personalizzazioni CSS rapide che fanno risaltare il tuo blog. Anche se non sai cosa sia il CSS, sarai in grado di seguire le istruzioni e cambiare l'aspetto standard del tuo tema.
Se non sai già come, ti mostrerò come trovare e impostare queste cose. In questo modo puoi modificare in modo sicuro il layout del tuo sito web o blog. Se il tuo sito web è già attivo e riceve traffico, può essere una buona idea utilizzare un plug-in "down for maintenance" in modo che i visitatori non si confondano con il layout in continua evoluzione.
Un'altra alternativa sarebbe quella di creare un ambiente di sviluppo sul computer locale e quindi caricare le modifiche sul server una volta completate.
In definitiva, dipende da te.
Alcuni temi hanno già la possibilità di sovrascrivere parti del foglio di stile CSS, consentendo di creare il proprio layout senza installare plug-in aggiuntivi o creare un tema figlio. Questo può essere trovato sotto il Aspetto> Opzioni tema menu.
A volte è in una delle sottocategorie, ma cerca una casella che abbia "Modifica CSS" come titolo.
Se il tuo tema non ha questa opzione, il plugin Jetpack viene fornito con una funzione di editor CSS, ma per utilizzarlo devi connettere il plugin con il tuo account WordPress.com o crearne uno nuovo.
Salva le tue revisioni, il che rende facile tornare a un layout precedente se hai voglia di incasinare da qualche parte lungo la strada, ma se non sei interessato alle altre funzioni del plugin Jetpack, un'alternativa più rapida sarebbe la semplice plugin CSS personalizzato.
Una volta installato e attivato il plugin, puoi modificare il css da Aspetto> css personalizzato. (In Jetpack, si trova sotto l'opzione Aspetto> Modifica menu CSS.)
Se sei pronto a fare grandi cambiamenti, l'idea migliore è quella di creare un tema figlio. Il problema con la personalizzazione tramite l'override è che si ottengono linee di codice superflue e per una modifica estesa potrebbe rallentare il caricamento del blog o del sito Web.
Inoltre, è molto più facile tenere traccia delle cose quando si modifica il codice in un unico punto. Puoi usare un plugin come Orbisius Child Theme Creator o un tema duplicato per creare istantaneamente un tema figlio.
In alternativa, puoi semplicemente creare una nuova cartella tema, chiamala THEMENAME child, crea style.css nella nuova cartella del tema e importa il foglio di stile principale. (THEMENAME dovrebbe essere sostituito dal tema che desideri modificare).
Accentsconagua
@import url ("... /THEMENAME/style.css"); Per maggiori informazioni su come creare un tema figlio, puoi consultare la nostra guida. Ora che sei tutto pronto, è tempo di cominciare a sporcarci le mani. Iniziamo con qualcosa di molto semplice: cambiare lo sfondo del tuo blog / sito web. Ti mostrerò anche come aggiungere un'immagine di sfondo elegante.
Per cambiare lo sfondo del tuo sito web, devi prima familiarizzare con lo stile del tema. Il colore dello sfondo è semplicemente sotto il corpo o è incorporato nella sua cornice?
Alcuni temi non sono intuitivi come altri, quindi se quello che stai usando è comprensibile, potresti voler passare a un tema diverso prima di iniziare a modificarlo. (Quello che sto usando nell'esempio è il tema gratuito Catchbox e un tema di partenza molto comune è ventesimo.)
Con la maggior parte dei temi non a larghezza intera, il colore di sfondo è semplicemente sotto il corpo. E annullarlo è abbastanza semplice.
body background-color: # 477C67;
Puoi utilizzare il selettore di colori HTML W3Schools per ottenere i tuoi colori oppure installare un'estensione per Chrome, un plug-in per Firefox o un plug-in di WordPress per velocizzare le cose quando stai modificando mentre sei in movimento.
Ho scelto un colore di sfondo verde acqua profondo: # 477C67:
Se questo snippet di codice non cambia il colore di sfondo del tuo blog, è probabile che utilizzi contenitori vuoti stilizzati per riempire lo sfondo.
Se si desidera impostare un'immagine come sfondo, caricare prima l'immagine. Assicurati che sia ad alta risoluzione altrimenti non sembrerà molto buono. Quindi copia l'URL. Hai solo bisogno della parte dopo il blog, quindi se hai caricato il file tramite WordPress, il percorso dovrebbe assomigliare a questo: "wp-content / uploads / 2014/01 / IMAGE.jpg"
body background: url (location / img.jpg) no-repeat centro centro fisso; -webkit-background-size: cover; -moz-background-size: cover; -o-sfondo-size: copertina; dimensione di sfondo: copertina;
Il risultato finale dovrebbe assomigliare a questo:
La cosa bella è che l'immagine rimane statica anche quando scorri verso il basso nella pagina. Per foto fantastiche che sei libero di usare senza dare credito (anche se probabilmente è il benvenuto), puoi visitare unsplash.com.
A volte ti imbatti in un grande tema. Sembra fantastico, ma c'è solo un problema. Il carattere è piccolo e grigio, quindi è quasi illeggibile. Ma non preoccuparti, puoi cambiarlo in un semplice passaggio.
body font-size: 16px; colore: # 000
Aggiungi questo breve snippet di codice al CSS personalizzato e risolverà il problema. (Mettilo dopo il codice sullo sfondo se hai cambiato il tuo.)
Una buona dimensione per il carattere standard del tuo sito web o blog è 14-16 pixel. Evita i 12 pixel che erano obbligatori su, per esempio, rapporti scolastici, poiché il tuo obiettivo principale non è quello di risparmiare carta. Vuoi che il tuo contenuto respiri e renderlo più leggibile. Se ritieni che il carattere standard del tuo tema non sia professionale, puoi aggiungere questa riga:
body font-family: Arial, Helvetica, sans-serif;
Rendere il tutto simile a questo:
body font-family: Arial, Helvetica, sans-serif; font-size: 16px; colore: # 000
Se vuoi cambiare il colore dei link, puoi farlo abbastanza facilmente. Tutto quello che devi fare è usare il parametro per i collegamenti in css "a" e quindi cambiare il colore in quello che vuoi.
a color: # BA2323;
Ho deciso di andare per un rosso (# BA2323) e ha finito per sembrare così.
Ci sono un paio di altre opzioni per come vuoi modellare i tuoi link. Ad esempio, puoi decidere come si desidera che il link reagisca quando qualcuno vi passa sopra. Il più comune è sottolineato, ma potresti cambiarne il colore principale o il colore di sfondo.
a: hover color: # 222; background-color: # BA2323;
Ad esempio, cambiando il testo in grigio e cambiando il colore di sfondo nel solito colore del testo. Quindi puoi cambiare lo stile dei link visitati. Più comunemente c'è un cambio di colore, ma puoi usare anche una qualsiasi delle modifiche precedenti.
a: visited color: # 004A4A;
Il titolo di un post è in genere in un elemento h1 e il sottotitolo utilizzato nei post è in genere in un elemento h2 (sebbene questo sia qualcosa che scegli tu stesso quando crei un post). Ma se il tuo tema specifica in modo specifico il colore dei titoli dei post, cambiare lo stile dei tag h1 non sarà di aiuto. Quindi devi scoprire se il tema che usi lo fa.
È possibile verificare se il tema utilizza o meno uno stile specifico per i titoli dei post aprendo l'origine della pagina e la ricerca (premere Control-F) per "post title". Se i risultati mostrano ""allora non hai lo stile h1, devi fornire lo stile nell'attributo" some-style ".
In alternativa, se si stanno apportando diverse modifiche, è possibile installare un'estensione del browser che mostra lo stile CSS del testo selezionato. Tipicamente sarà "entry-title" in quanto è lo standard per lo sviluppo di WordPress.
Per fare questo, andare al editore sotto il Aspetto menu. e cerca "un po 'stile". Come ho già detto, quello stile è solitamente "entry-title". Quindi vedi quali linee hai bisogno di sovrascrivere. A volte, esiste uno stile specifico per il titolo collegato, quindi potrebbe essere necessario cambiarlo. Questo si presenta come "h1 a " o "some-style a ".
Per modificare il colore e le dimensioni del mio titolo, dovrei aggiungere queste righe:
.entry-title color: #WANTEDCOLOR; font-size: WANTEDSIZEpx; .entry-title a color: #WANTEDCOLOR;
Ho scelto un blu chiaro (# 5CBDBD).
Tieni presente che sto usando colori abbaglianti per rendere evidente quali modifiche ho apportato al tema. Probabilmente vuoi essere un po 'più sottile e trovare una combinazione di colori migliore.
Se vuoi modificare lo stile dei titoli che utilizzi nel tuo contenuto, allora invece di .un po 'in stile, tu apri con h1 o h2 o h3 .
Se ci sono degli angoli fastidiosi che ritieni debbano essere arrotondati, o alcuni che sono stati arrotondati troppo, ecco una soluzione rapida.
Individua il contenitore nello stile della domanda nel foglio di stile originale. (Apri il foglio di stile originale all'interno del dashboard di WordPress o in un file di testo, quindi cerca del testo che è univoco per il contenitore che vuoi modificare oppure puoi usare un plugin.) I widget sono di solito sotto .widget di, e il contenitore dei post è di solito in contenuto.
Il codice da usare qui è:
-moz-border-radius: SIZEpx; border-radius: SIZEpx;
Se vuoi scavalcare un angolo curvo corrente e renderlo piatto, imposta semplicemente la dimensione a 0. Se vuoi vedere come le curve cercano un contenitore particolare, inizia con 5 e guarda come appare.
In genere, puoi cercare la pagina se desideri modificare gli angoli dell'intera pagina. In genere puoi trovare il contenitore del contenuto cercando .hentry se vuoi modificare gli angoli del contenuto. Potrebbe essere necessario modificare l'intestazione e il piè di pagina separatamente. Oppure trova il widget cercando il widget.
Uno dei modi più semplici per impostare una combinazione di colori per i tuoi widget è di avere un colore di sfondo diverso per il widget stesso che il titolo del widget. Lo fai identificando la classe di stile del titolo del widget. (Se non ricordi come, copia il titolo di un widget e cercalo nell'origine della pagina h1 didascalia attorno al titolo, la classe viene rivelata).
Tende ad essere semplicemente widget di-titolo. E se vuoi cambiare il colore di sfondo del widget stesso, trova lo stile per il widget, che di solito è sotto .widget di. Quindi scegli un colore e aggiungi questo codice al tuo css o tema figlio personalizzato:
.widget background: #COLOR; .widget-title background-color: #COLOR;
Ho scelto arancione e verde acqua senza alcun motivo particolare. Come puoi vedere, se non c'è un titolo, non include la parte del titolo della combinazione di colori, quindi se vuoi uniformità devi aggiungere titoli a tutti i tuoi widget.
Mentre all'inizio potrebbe sembrare incredibilmente scoraggiante iniziare a giocare con il codice del tuo sito web, la maggior parte dei fogli di stile sono abbastanza intuitivi che se hai una conoscenza di base delle funzionalità di Wordpress, sarai in grado di stare al passo con le cose.
Ovviamente, con questo abbiamo appena raschiato la superficie, ma ne sai abbastanza per fare alcune scelte in meglio.
