Come utilizzare l’Editor aspetto in WordPress

wordpress-aspetto-editor.png


Fino ad ora, hai avuto la possibilità di personalizzare WordPress CMS tramite vari editor intuitivi. Il personalizzatore ti ha permesso di sfogliare diverse opzioni di aspetto supportate dal tuo tema. Ma quando decidi di personalizzare il tuo sito oltre le opzioni fornite, dovresti conoscere l’editor di aspetto di WordPress.

Tra i molti file di WordPress che possono essere modificati, ce ne sono due particolarmente interessanti. Stiamo parlando del modello del tema e dei file del foglio di stile che puoi modificare direttamente da WordPress.

Prima ancora di iniziare a considerare di cambiare il codice da soli, dovremmo avvisarti che WordPress non crea backup dei file interessati. Pertanto, eventuali modifiche sono permanenti.

Come modificare i temi con l’Editor aspetto

Quando sei pronto per saperne di più su WordPress e sporcarti le mani digitando un codice personalizzato, vai a Aspetto -> Editor. Questo editor integrato ti consente di modificare il codice contenuto nei file del modello e del foglio di stile del tema. Una volta aperto, il file style.css utilizzato dal tema corrente verrà automaticamente visualizzato di fronte a te.

Editor di aspetto WordPress

A seconda della configurazione del tuo sito, potresti non essere in grado di accedere ad alcuni file. In tal caso, WordPress visualizzerà un messaggio di avviso per dirti che è necessario modificare le autorizzazioni per quel determinato file. Per saperne di più, vedi come modificare i permessi dei file in WordPress.

Come selezionare i file per la modifica

Non appena apri l’Editor, WordPress ti mostrerà tutti i modelli disponibili e i file dei fogli di stile del tema attivo. Se si desidera modificare un tema inattivo, andare in cima all’elenco, scegliere un elemento dal menu a discesa e fare clic sul pulsante “Seleziona”. WordPress caricherà quindi tutti i file associati al tema scelto.

Modelli

Per selezionare un file, scorrere l’elenco sul lato destro della finestra. Ognuno ha un nome e un nome file indicati tra parentesi. Per modificare uno qualsiasi dei file, basta fare clic su di esso e il codice apparirà nell’editor di sinistra.

Stai attento

Mentre la modifica dei file del foglio di stile è relativamente sicura, la modifica dei file PHP può causare errori che possono rendere il tuo sito inutilizzabile. Fai molta attenzione se decidi di modificare i file PHP dall’Editor aspetto.

Esempio: come modificare la dimensione del carattere tramite l’Editor aspetto

Per mostrarti come funziona l’editor, stiamo per cambiare la dimensione del carattere del testo nei post nel tema Venti diciassette.

Prima di continuare, vorremmo far deragliare la tua attenzione per un breve momento. Nella versione 4.7, è stato introdotto WordPress una nuova funzionalità che ti consente di aggiungere CSS personalizzati più velocemente. Invece di modificare il codice tramite l’Editor aspetto, ti consigliamo di aprire Aspetto -> Personalizza -> CSS aggiuntivo dove puoi scrivere qualsiasi codice CSS personalizzato che desideri senza influire direttamente sul foglio di stile.

Ispeziona gli elementi

Ispeziona gli elementi in Google Chrome

Se desideri comunque modificare il foglio di stile direttamente tramite l’Editor aspetto, ecco cosa fare:

  1. Apri qualsiasi post dal tuo blog
  2. Seleziona il testo di un post
  3. Fai clic con il tasto destro del mouse sulla selezione e scegli “Ispeziona” o “Ispeziona elemento” (a seconda del browser che utilizzi)
  4. Nella nuova sezione o finestra aperta, trova evidenziato

    elemento

Ispeziona il paragrafo degli elementi

La classe dovrebbe anche essere visibile nella scheda “Stili”. Se fai clic sullo stile, il browser dovrebbe aprire il foglio di stile e consentire di modificare il CSS direttamente dal browser. Puoi utilizzare questa funzione per testare il codice CSS personalizzato prima di applicare effettivamente le modifiche al tuo sito. Poiché volevamo modificare la dimensione del carattere del testo nei post, il seguente codice CSS è nel nostro interesse:

p {
dimensione carattere: 50px;
}

Applica i cambiamenti

Dopo aver testato alcune dimensioni dei caratteri dal browser, ricorda quello che ti è piaciuto di più. Quindi puoi procedere con l’Editor e modificare il carattere:

  1. Navigare verso Aspetto -> Editor
  2. Se non è già selezionato, selezionare Foglio di stile (style.css) file dall’elenco sul lato destro
  3. Trova la classe “p”
  4. Aggiungi “font-size: 50px;” (l’intero codice dovrebbe assomigliare a quello che abbiamo scritto sopra)
  5. Fai clic sul pulsante “Aggiorna file”

Modifica la dimensione del carattere del paragrafo

Il nuovo stile viene salvato e sei pronto per ricaricare il sito. Apri un post per vedere la modifica delle dimensioni del testo. Se non riesci a vedere la differenza e sei sicuro di aver modificato correttamente il codice, assicurati di farlo svuotare la cache del browser o premere CTRL + F5 per aggiornare la pagina.

Prestare attenzione quando si lavora con l’Editor aspetto

Appearance Editor è uno strumento straordinario per apportare rapide modifiche ai file di modello e foglio di stile. Ma per trarne il meglio, è importante che tu sia completamente sicuro delle modifiche che stai apportando. Qualsiasi modifica ai file PHP può bloccare il tuo sito fino a quando non li risolvi tramite FTP. Pertanto, quando lavori con file PHP, ti suggeriamo di lavorare su un file locale che puoi trasferire via FTP mantenendo sempre il backup originale. Se stai apportando modifiche ai fogli di stile, non dimenticare le funzionalità CSS aggiuntive introdotte pochi mesi fa.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map