Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug
Firebug è un plugin per Firefox che, tra le molte funzionalità offerte, permette di modificare in real-time molti aspetti relativi ad una pagina web e vedere subito i risultati ottenuti. Utilizzando questa tecnica (Firebug + un paio di neuroni sani), sarà possibile modificare ogni dettaglio del proprio sito web (in questo caso un blog wordpress) e vedere immediatamente i risultati ottenuti.
In questo mio primo screencast(spero che non sia l'ultimo 
), voglio mostrarti come utilizzare Firebug per modificare il layout del tuo blog wordpress in maniera molto semplice, e soprattutto senza conoscere i numerosi dettagli che compongono i fogli di stile CSS.
Con un pò di intuito potrai raggiungere facilmente il layout che desideri. Questa tecnica, che per alcuni può risultare poco elegante, permetterà di fare delle piccole modifiche al layout del tema in pochissimo tempo.
Per vedere il video nelle dimensioni originali clicca quì
Link su Mozilla.org per l' installazione di Firebug.
Non farti problemi ad includere lo screencast nel tuo blog. Ecco quì il codice:
-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="433" id="viddler"><param name="movie" value="http://www.viddler.com/player/46e6323/" /><param name="allowScriptAccess" value="always" /><embed src="http://www.viddler.com/player/46e6323/" width="500" height="433" type="application/x-shockwave-flash" allowScriptAccess="always" name="viddler"></embed></object>
Articoli sullo stesso argomento
64 Commenti »
Puoi lasciare una risposta, oppure fare un trackback dal tuo sito.
1
Geekissimo dice:
Via | Danielesalamina.it
Pubblicato il 02 09 2010 alle 20:05
2
Enzo tumblelog dice:
Screencast: come modificare il proprio tema WordPress in 5 minuti con FireBug
Pubblicato il 02 09 2010 alle 20:05
3
WebMasterPoint.org - Software: Programmare e modificare pagine web in tempo reale con Firebug estensione di Firefox. Video di spiegazione dice:
. Inoltre, è possibile analizzare molto velocemente la struttura di un altro sito di cui magari se ne vuole carpire qualche trucchetto html o css. Un esempio pratico delle potenzialità dell’INSPECT di Firebug lo trovate nel Video Tutorial su come modificare il proprio tema Wordpress in 5 minuti con FireBug di Daniele Salamina Altri Toolkit simili è possibile trovarli installando a Web Developer Toolbar oppure Venkman, anche se, a mio parere, non sono così completi performanti come Firebug. Per chi, invece, non usa Firefox, è possibile testare la console di Firebug con
Pubblicato il 02 09 2010 alle 20:05
4
Il Blog di Enrico » Modifica di Wordpress "al volo"! dice:
[...] pausa pranzo osservo attentamente lo screencast di Daniele Salamina su come modificare al volo Wordpress con il FireBug, un plugin di [...]
Pubblicato il 25 06 2007 alle 14:42
5
Federiko Aka The Killer dice:
Interessante come guida
Che ne dici di dare un occhiata al mio di template, realizzato conoscendo i CSS?
Pubblicato il 25 06 2007 alle 16:26
6
Daniele dice:
@Federiko, se hai un po di tempo (visto che conosci i CSS) dai un’occhiata al mio foglio CSS e puliscilo da tutte le porcherie che ci ho scritto
Pubblicato il 25 06 2007 alle 16:51
7
Federiko Aka The Killer dice:
Se vuoi ci posso dare un occhiata, ma non prometto nulla
Pubblicato il 25 06 2007 alle 19:21
8
CyBBLoG » Blog Archive » Modificare il proprio tema Wordpress in 5 Minuti… dice:
[...] Daniele Salamina’s Blog [...]
Pubblicato il 26 06 2007 alle 08:20
9
Leo dice:
Molto utile. Grazie mille… spero solo di non fare danni sul mio blog appena nato
Pubblicato il 26 06 2007 alle 10:55
10
Il blog di Guido Arata: diffusione-del-sapere-informatico: news-exploit-bug-sicurezza-informatica-programmazione dice:
[...] buon Daniele Salamina ci segnala sul suo blog un ottima estensione per Firefox, che risulterà utile a tutti coloro che si trovano a [...]
Pubblicato il 26 06 2007 alle 11:25
11
Federiko Aka The Killer dice:
Se mi dai i tuoi dati di qualche messenger (MSN, gTalk..) magari ci mettiamo daccordo per la pulizia dei CSS
Pubblicato il 26 06 2007 alle 14:54
12
Federiko Aka The Killer dice:
Oppure aspetta lunedì che rilascerò il mio prossimo tema
(scusa il doppio commento)
Pubblicato il 26 06 2007 alle 14:54
13
zandre dice:
mi manca un pezzo!!
che programma per editare il codice HTML che mi dica anche il numero di linee. Ho sempre usato il caro e vecchio blocco note ma se mi dite quale avete usato… cambio!
graz
Pubblicato il 26 06 2007 alle 18:11
14
Federiko Aka The Killer dice:
Scusa una domanda, Daniele.
Dopo aver modificato con Firebug, non dovresti andare in Bacheca/Presentazione/Modifica Temi/ e cambiare i dati lì?
Pubblicato il 26 06 2007 alle 18:24
15
Daniele dice:
@Federiko scheravo riguardo alla modifica del css del tema. In effetti andrebbe alleggerito… ma per ora va bene così. Comunque trovi i miei contatti nella pagina “Contattami”
@Zandre, l’editor che vedi nell screencast si chiama Crimson editor. E’ free e puoi scaricarlo da quì:
http://www.crimsoneditor.com/
Pubblicato il 26 06 2007 alle 18:26
16
Federiko Aka The Killer dice:
Whops mi rispondo da solo: ho saltato un pezzo del video
Pubblicato il 26 06 2007 alle 18:30
17
Daniele dice:
Si Federiko, è uguale. Puoi andare anche da dove dici tu. In questo modo non hai bisogno di fare la modifica del file in locale e poi fare l’upload, ma modifichi direttamente sul server.
Anche se l’editor integrato di WP… diciamolo… non è il massimo
Pubblicato il 26 06 2007 alle 18:31
18
zandre dice:
graz ora ci provo! graz per il video!
Pubblicato il 28 06 2007 alle 17:09
19
Come modificare il layout di WorldPress « Pedro Blog dice:
[...] modificare il layout di WorldPress ho trovato questo link…Speriamo che [...]
Pubblicato il 29 06 2007 alle 19:08
20
The developers » Modificare i temi WordPress avendone l’anteprima istantanea dice:
[...] istantanea GREY_FOX 1 Lug 2007 >> Varie Il buon Daniele Salamina ci segnala sul suo blog un ottima estensione per Firefox, che risulterà utile a tutti coloro che si trovano a [...]
Pubblicato il 01 07 2007 alle 01:58
21
Overlord dice:
Molto interessante. Lo provo
Pubblicato il 06 07 2007 alle 22:43
22
Levysoft » Firebug e la funziona di INSPECT per modificare al volo le pagine html e come fare Hacking di applicazioni web con Firefox dice:
[...] Un esempio pratico delle potenzialità dell’INSPECT di Firebug lo trovate nel Video Tutorial su come modificare il proprio tema Wordpress in 5 minuti con FireBug di Daniele Salam… [...]
Pubblicato il 13 07 2007 alle 09:51
23
Modificare facilmente il tema di Wordpress usando solo Firefox | Michele BOLOGNA dice:
[...] L’articolo di Daniele Salamina è disponibile qui. [...]
Pubblicato il 15 07 2007 alle 11:52
24
Just another blog… » Blog Archive » Alcune modifiche al tema del blogSome modifications to blog's theme dice:
[...] del font dei post, e ingrandito l’area utile per questi ultimi. Per chiudere, ecco uno screencast interessante [...]
Pubblicato il 20 07 2007 alle 08:56
25
I 5 Post Preferiti Fino ad Oggi #1 | Daniele Salamina’s Blog dice:
[...] Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug [...]
Pubblicato il 10 09 2007 alle 08:00
26
I 5 Post Preferiti Fino ad Oggi #3 | Daniele Salamina’s Blog dice:
[...] Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug [...]
Pubblicato il 01 10 2007 alle 08:01
27
Chris dice:
io ho sempre usato Web Developer per Firefox per queste cose,non so però se c’è la componente interattiva mostrata qui da FireBug,che è anche la cosa più interessante
Ciao!
Pubblicato il 01 10 2007 alle 15:58
28
Antony dice:
phr
Flexible Renaming Kit
Pubblicato il 03 10 2007 alle 21:30
29
mki dice:
Bellissimo tutorial, posso sapere con cosa hai fatto lo screencast?Grazie
Pubblicato il 22 10 2007 alle 10:56
30
Daniele dice:
mki con camstudio.
Pubblicato il 22 10 2007 alle 13:54
31
mki dice:
Grazie
Pubblicato il 23 10 2007 alle 16:34
32
» Come sei diventato Blogger ? » Daniele Salamina’s Blog dice:
[...] la connessione wireless su Ubuntu Feisty 7.04” mi ha portato via una notte. “Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug” mi è piaciuto più che altro per l’idea che c’è alla [...]
Pubblicato il 18 11 2007 alle 20:35
33
giorgio dice:
Interessante, direi. Un bel tool.
Pubblicato il 06 12 2007 alle 22:31
34
» I 5+1 Migliori Post del 2007 » Daniele Salamina’s Blog dice:
[...] Screencast: Modificare un Tema Wordpress in 5 Minuti con FireBug – Prima prova di Video tutorial su un’idea che mi sembrava carina. [...]
Pubblicato il 04 01 2008 alle 10:59
35
smart dice:
sto pensando di migrare a wordpress ma avevo alcuni dubbi sulla “gestione” del blog. Quello che fai in questo tutorial richiede l’acquisto del CSS upgrade di WP? In pratica mi interessa avere la libertà di modificare il mio blog nei CSS e in HTML ma senza pagare un plus a wordpress.
Pubblicato il 04 01 2008 alle 20:06
36
Daniele dice:
@smart i temi per wordpress sono tutti gratis e puoi liberamente modificarli!
Vedi per esempio Nerino, il tema che utilizza questo blog!
http://www.danielesalamina.it/rilasciato-nerino-20-il-tema-per-wordpress-di-questo-blog
Pubblicato il 05 01 2008 alle 12:56
37
smart dice:
grazie mille daniele.
ma allora mi chiedo chi faccia le modifiche con il CSS upgrade che non permette le modifiche HTML…?
ultima domanda e poi non approfitto più del tuo blog (anche se continuerò a leggerlo!) ma i temi extra devo essere caricati su un server a parte da quello di WP, giusto?
continua così, quello che scrivi è molto interessante!
Pubblicato il 05 01 2008 alle 17:55
38
» Ottimizza le Prestazioni del tuo Blog con YSlow » Daniele Salamina’s Blog dice:
[...] post fa vi avevo mostrato come utilizzare Firebug per fare delle semplici e veloci modifiche ad un tema Wordpress. Un’altro ottimo tool da [...]
Pubblicato il 17 01 2008 alle 11:45
39
davide dice:
Ciao Daniele, ho usato il tuo tema nerino che è molto semplice e pulito davvero e complimenti.Purtroppo sono alle prime armi:-(( anzi diciamo negato.Però il coraggio non mi manca( o imprudenza?).Allora non ridere per gli errori che magari trovi nel mio sito.Ti chiedevo un aiutone riguardo la mia intestazione ed in particolare come fare per creare meno confusione nel titolo e nelle pagine descritte nella testata del mio blog????Inoltre ho seguito attentamente il tuo screencast e malgrado la tua chiarezza disarmante, mi fermo al momento della individuazione di quello che dovrei modificare.Una volta operato le modifiche come fare per salvarle???’Ho provato a cliccare su edita vicino a inspect ma non succede nulla perchè caricando la pagina del blog ritorna come prima:-))
Insomma sono una frana se non ti comporterà grossa fatica ti sarei grato se mi dessi una mano.
Davide
Pubblicato il 19 01 2008 alle 14:11
40
Zapco84 dice:
ciao a tutti!!!! aulcuno mi sa dire come si cambia il tema su fire fox?! Grazie zapco84
Pubblicato il 05 03 2008 alle 18:25
41
eugenio dice:
Grazie! non dirlo in giro ma ho fatto qualche clikkettino di ringraziamento
Pubblicato il 16 03 2008 alle 18:35
42
Daniele dice:
@eugenio: hey! Non si fà !
Pubblicato il 16 03 2008 alle 22:07
43
Gigi dice:
Dire che è stato utile è riduttivo.
Grazie mille
Pubblicato il 30 03 2008 alle 00:14
44
Nonsense | Restyling dice:
[...] ho dovuto sbroccare per un po’ contro i file .css, ma alla fine grazie a questa breve guida (guida) ci sono [...]
Pubblicato il 30 03 2008 alle 00:23
45
Daniele dice:
@Gigi: sono contento che ti sia servita
Pubblicato il 30 03 2008 alle 01:15
46
Fogli di stile (”CSS”): guide in italiano e in inglese « Trucioli dice:
[...] Video “Come modificare il proprio tema WordPress in cinque minuti”, di Daniele Salamina. [...]
Pubblicato il 22 05 2008 alle 17:52
47
mariano dice:
Ciao, a quante pare sei il massimo esperto di firebug che sia in italia! tutti i link riportano a te!
dal tutorial non ho capito il passaggio dell’upload per salvare effettivamente le modifiche apportate. mi puoi dare qualche dritta?
grazie
m
Pubblicato il 02 07 2008 alle 10:55
48
Ripubblicare i Vecchi Post - Pro e Contro dice:
[...] provato una sola volta a ripubblicare un vecchio post ed ho ottenuto dei buoni risultati. Diversi nuovi commenti e qualche trackback. Cosa ne pensi di [...]
Pubblicato il 07 07 2008 alle 08:00
49
Firebug: Addon per Firefox, per Modificare in modo facile e veloce dei Fogli di Stile CSS | Non Solo Software Blog dice:
[...] lascio con uno screencast molto utile, fatto dal bravissimo Daniele Salamina, che spiega in modo dettagliato l’installazione e l’uso di [...]
Pubblicato il 18 02 2009 alle 19:10
50
Internet Explorer 8 finalmente uno strumento completo per webmaster | Floyd's Blog dice:
[...] inoltre un comodo plugin per Firefox (Firebug), di recente recensito da Daniele Salamina che fa esattamente quanto detto [...]
Pubblicato il 19 04 2009 alle 13:19
51
Annamaria dice:
Ciao Daniele,
ti ringrazio per il suggerimento di firebug, è molto chiaro, e mi ha fatto finalmente capire a cosa serve questo addon.
Vorrei farti una domanda:
ho un blog wordpress, e vorrei eliminare un link dal footer (credo che sia il footer…) del tema.
Grazie a te ho imparato a modificare il foglio di stile (font, grandezza…), ma se voglio agire sull’html per togliere questo link, dove devo andare a guardare e dove devo intervenire?
Non credo che sia sul foglio di stile (parlo delle “themeinfo”, per intenderci, le vorrei togliere).
Grazie in ogni caso,
Annamaria
Pubblicato il 05 05 2009 alle 23:34
52
Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug dice:
[...] Â Originale di Daniele Salamina [...]
Pubblicato il 26 07 2009 alle 08:21
53
najaru dice:
Molto interessante il tuo video. Grazie mille.
Per i css tutto ok
Non capisco una però: se io apporto delle modifiche al codice html che vedo, poi non riesco a trovare il file relativo nel server….. con joomla e vbulletin non esiste nessun file html….sono tutti php…. ?????
Pubblicato il 16 09 2009 alle 19:10
54
ghostdog dice:
bel cast… grazie è stato molto utile
Pubblicato il 15 12 2009 alle 18:07
55
Lorenzo dice:
Perché alla fine del video dici che non è il miglior modo di lavorare?
Io sono un programmatore (non un grafico) ma quando lavoro sul web lavoro sempre con firebug. Innegabilmente è il modo più rapido per provare modifiche e ritocchi, in modo da non dover continuamente modificare html e css e poi ricaricare la pagina. Inoltre aiuta tantissimo con lo sviluppo in javascript (parentesi: è l’unico debugger che funziona) e con php.
Credo che firebug sia il primo tool ESSENZIALE che ogni sviluppatore web DEVE avere a portata di mano…
Pubblicato il 05 01 2010 alle 01:20
56
francesca dice:
grazie mille, molto utile
Pubblicato il 16 01 2010 alle 01:46
57
antonella dice:
Scusa, sono poco pratica di Wordpress, ma ciò vale anche per chi ha un blog wordpress sul web? Ho visto che nella propria bacheca c’è una sezione modifica CSS. con la possibilità (credo se non ho capito male) di incollare il CSS modificato. Grazie in anticipo per la risposta, ne avrei davvero bisogno
(PS. scusa avevo sbagliato la email)
Pubblicato il 04 02 2010 alle 12:35
58
Wordpress.org – appunti personali… « CurioSito dice:
[...] Per la modifica del tema individuavo i punti da cambiare con Firebug per Firefox e poi facevo le modifiche sui file css o html come indicato qui. [...]
Pubblicato il 10 04 2010 alle 13:01
59
gabriele dice:
Bravissimo, grazie: te l’avranno detto in tanti ma te lo dico anche io, grazie davvero, facile e efficace.
Pubblicato il 28 04 2010 alle 10:58
60
massimo dice:
Ho scaricato un tema per wordpress sotto licenza creative commons ( free ) lo sto modificando adesso nel pe di pagina ci sono questi collegamenti ( Designed by Online casino. Code by Live dealer casinos | Mobile casino | Casino en ligne. ) Con firebag ho trovato il file da modificare che è footer.php ma se cambio i collegamenti con un altro mio sito per esempio e lo pubblico il file nel mio sito esce questo messaggio This theme is released under creative commons licence, all links in the footer should remain intact……. dove devo modificare?
Pubblicato il 12 05 2010 alle 20:03
61
Annamaria dice:
@ massimo:
Caro Massimo,
forse ti posso rispondere io, che ho avuto a che fare con questi problemi di footer criptato.
Ti segnalo questi 2 link:
http://www.wordpress-it.it/forum/topic/7493
http://www.no-privacy.it/decriptare-il-footer-criptato-di-un-tema-wordpress-61.html
Dovrebbero risolvere il tuo problema!
Pubblicato il 13 05 2010 alle 17:11
62
Massimo dice:
sembra interessante… forse finalmente riuscirò a modificare il tema del mio weblog come pare a me pur non avendo alcuna nozione di codice php e css. Ho subito installato il plugin però ho notato che l’interfaccia è diversa.. probabilmente lo screencast è un pò outdated. In ogni caso vale la pena di smanettarci un pò! Grazie mille per la guida!
Pubblicato il 21 06 2010 alle 12:43
63
Revisione del WebLog in standby | soundspaces dice:
[...] sempre incollato al margine destro. Ieri notte però ho trovato nel blog di Daniele Salamina un vecchio screencast, una guida video, che illustra come trovare i punti chiave del codice su cui agire pur non [...]
Pubblicato il 21 06 2010 alle 12:49
64
Carlo dice:
Ciao ragazzi,
ma andando a modificare quei files, non si va incontro a nessuna sanzione? Se è free perchè criptano il codice?
Pubblicato il 28 06 2010 alle 12:36