Vita Quotidiana

Personalizzare il tema di Wordpress, alcuni consigli…

Pubblicato in Programmazione, wordpress

Soprattutto per i principianti…

Cari amici, in questo post, voglio darvi alcuni consigli su come personalizzare il tema della vostra piattaforma di blog. Spesso per comodità e per semplificare le cose molti di noi scaricano quello che più si avvicina ai nostri gusti tra i tantissimi temi a disposizione sul web e lo caricano. Ma pensate a quante altre persone hanno fatto la stessa cosa? Volete far parte della massa?

…io credo che qualche dettaglio va cambiato, magari anche solo un cambio di colori potrebbe adattarsi meglio alla nostra situazione. Per iniziare (dopo aver effettuato il download del tema) abbiamo bisogno di un editor (personalmente consiglio SciTE, scaricabile gratuitamente dalla rete), di un po di pazienza e tanta volontà.

Apriamo il foglio di stile (.css) nella cartella del tema col nostro editor. La prima cosa da fare (ammesso che non l’abbia fatto l’autore) è capire e commentare ogni singola riga o pezzo di codice per poter effettuare anche modifiche in seguito. Dal menù in alto: Cerca–>Trova, inseriamo per prima "images", ed ogni volta che troviamo quella parola commentiamo la riga (inserendo /* all’inizio e */ alla fine del rigo), dopo aver salvato ed aggiornato il browser capiremo a cosa si riferiva quella riga di codice visto che sicuramente manca qualcosa nella pagina. Adesso eliminiamo i caratteri con cui abbiamo commentato e quindi dopo aver rimesso tutto come prima, inseriamo subito sopra una riga commentata dove descriveremo a cosa serve quel codice (es: /*la riga di sotto corrisponde all’immagine in alto che fa da sfondo al logo*/). Per tutte le volte successive sarà più facile individuare quale immagine del tema (le troviamo nella sottocartella /images del tema) dobbiamo cambiare per ottenere l’effetto che immaginiamo. Per continuare a trovare la stessa parola nel resto del testo basta premere F3, e ripetere le stesse operazioni fino alla fine.

Fatto questo cerchiamo "font-size". Ogni volta che lo troviamo, cambiamo il valore corrispondente con uno eccessivamente più alto, per far si che le modifiche che avvengono non passano inosservate e per capire velocemente a quale parte di testo si riferiscono. Poi salviamo ed aggiorniamo nuovamente il browser, consiglio di premere Ctrl+F5 per l’aggiornamento della pagina, visto che non prenderà in considerazione la cache memorizzata e quindi aggiornerà sicuramente la pagina con le modifiche apportate, questo solo in Explorer e Firefox. Quale testo è diventato grandissimo nella pagina? ….quindi a quello si riferisce il codice, come al solito rimettiamo tutto al posto e commentiamo nella riga precedente. Alla fine avremo il nostro foglio di stile facilmente personalizzabile perche per cambiare il testo del titolo, dell’articolo, l’immagine di sfondo o di qualsiasi altra cosa sapremo dove mettere le mani.

Capiamo anche alcune proprieta:

• backgound –> indica il colore di sfondo, si modifica assegnandogli valori esadecimali dei colori che vanno da 000000 (nero) a ffffff (bianco)
• width –> larghezza dell’elemento della riga in cui è scritto
• height –> altezza dell’elemento della riga in cui è scritto
• font-size –> grandezza del testo
• font-color (o semplicemente color nella riga riferita al testo) –> indica il colore del testo
• align –> può essere riferito a immagini o testo o interi blocchi di codice. I suoi valori possono essere left, center, right

Spero che ai principianti che non si intendano molto di codice siano utili questi consigli. Per qualsiasi problema inserite pure un commento, cercheremo di aiutarti a risolvere, sperando che passi qualcuno da queste parti…scherzi a parte, proverò io stesso a darti una mano.