Come inserire il codice CSS in un WordPress Widget

October 5

Non tutti i widget in forma l'aspetto del tuo blog. A meno che non ha sviluppato il widget di te stesso, è stato creato per un vasto pubblico da qualcuno che non poteva prevedere come la sua uscita apparirebbe su ogni tipo di blog. A volte è possibile aggiungere Cascading Style Sheet (CSS) il codice per i widget utilizzando i loro campi Opzioni nella schermata "Widget" del cruscotto di WordPress, ma spesso sarà necessario fare riferimento al codice HTML generato e scrivere i CSS per esso nel "stile css "file.

istruzione

1 Accedere al dashboard di WordPress dalla directory "wp-admin" del tuo sito web. Passare a "Aspetto" e cliccare sul link "Widget" per caricare la schermata "Widget". Vedrete le vostre barre laterali e un elenco di widget in questa pagina.

2 Fare clic sul nome di una barra laterale per espanderla e visualizzarne i widget. Espandere le opzioni del widget facendo clic sulla sua freccia rivolta verso il basso.

3 Aggiungere i tag HTML contenenti codice CSS in linea in un campo opzioni del widget. Non tutti i campi opzioni possono prendere HTML o CSS cod. Per verificare ciò, ingresso alcuni HTML e fare clic su "Salva" per vedere se il codice HTML rimane o viene eliminato. È sempre possibile aggiungere HTML e CSS al widget "Testo" che viene fornito con ogni installazione di WordPress. Fare clic sul pulsante blu "Save" nella finestra delle opzioni del widget per salvare le modifiche.

4 Passare a "Aspetto" e cliccare sul link "Editor", se si couldn aggiungere codice CSS direttamente al widget attraverso i suoi campi di opzione. Individuare il file "functions.php" e fare clic sul collegamento. Individuare il codice "register_sidebar" e rendere la linea contenente "before_widget" simile a questa:

'Before_widget' => '<div id = "% 1 $ s" class = "Widget% 2 $ s">',

Modificare il "after_widget" in modo che si chiude il "<div>" tag è stato aperto:

'After_widget' => '</ div>',

5 Caricare il blog in un'altra scheda o finestra del browser Web. Fare clic con il schermata del browser e selezionare per visualizzare il codice sorgente. Trovare il "<div>" tag che circondano il widget che si desidera modificare e prendere nota del suo attributo ID. Il codice sarà simile a questo:

<Div id = "archivio-3" class = "Widget widget_archive">

6 Torna al cruscotto di WordPress e passare alla schermata "modificare i temi" di nuovo. Individuare il file "style.css" nella parte inferiore dello schermo e fare clic sul relativo collegamento. Aggiungi il tuo CSS per il widget alla fine del file in questo modo:

archivi-3 {

costo dell'immobile;

}

Sostituire "proprietà: valore;" con un paio CSS struttura a valore come "color: red;". Aggiornare il file al termine della modifica.

Consigli e avvertenze

  • Eseguire il backup dei file del tema prima di modificarli. Se si causa un errore di PHP "schermo bianco", caricare nuovamente i file originali utilizzando un client FTP per tornare a WordPress.