Approfondimenti e Strategie di Web Marketing

Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug

Firebug - Web Development EvolvedFirebug è 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:
[js]

[/js]

70 Commenti

Sia i commenti che i trackback sono disabilitati.


70 Risposte a “Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug”

  1. 1

    Geekissimo dice:

    Via | Danielesalamina.it

  2. 2

    Enzo tumblelog dice:

    Screencast: come modificare il proprio tema WordPress in 5 minuti con FireBug

  3. 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

  4. 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 […]

  5. 5

    Federiko Aka The Killer dice:

    Interessante come guida 🙂

    Che ne dici di dare un occhiata al mio di template, realizzato conoscendo i CSS? 😀

  6. 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 😉

  7. 7

    Federiko Aka The Killer dice:

    Se vuoi ci posso dare un occhiata, ma non prometto nulla 🙂

  8. 8

    CyBBLoG » Blog Archive » Modificare il proprio tema Wordpress in 5 Minuti… dice:

    […] Daniele Salamina’s Blog […]

  9. 9

    Leo dice:

    Molto utile. Grazie mille… spero solo di non fare danni sul mio blog appena nato 🙂

  10. 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 […]

  11. 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 🙂

  12. 12

    Federiko Aka The Killer dice:

    Oppure aspetta lunedì che rilascerò il mio prossimo tema 😉

    (scusa il doppio commento)

  13. 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

  14. 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ì?

  15. 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/

  16. 16

    Federiko Aka The Killer dice:

    Whops mi rispondo da solo: ho saltato un pezzo del video

  17. 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 😉

  18. 18

    zandre dice:

    graz ora ci provo! graz per il video!

  19. 19

    Come modificare il layout di WorldPress « Pedro Blog dice:

    […] modificare il layout di WorldPress ho trovato questo link…Speriamo che […]

  20. 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 […]

  21. 21

    Overlord dice:

    Molto interessante. Lo provo

  22. 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… […]

  23. 23

    Modificare facilmente il tema di Wordpress usando solo Firefox | Michele BOLOGNA dice:

    […] L’articolo di Daniele Salamina è disponibile qui. […]

  24. 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 […]

  25. 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 […]

  26. 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 […]

  27. 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!

  28. 28

    Antony dice:

    phr

    Flexible Renaming Kit

  29. 29

    mki dice:

    Bellissimo tutorial, posso sapere con cosa hai fatto lo screencast?Grazie

  30. 30

    Daniele dice:

    mki con camstudio.

  31. 31

    mki dice:

    Grazie 😉

  32. 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 […]

  33. 33

    giorgio dice:

    Interessante, direi. Un bel tool. 🙂

  34. 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. […]

  35. 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.

  36. 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

  37. 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!

  38. 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 […]

  39. 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

  40. 40

    Zapco84 dice:

    ciao a tutti!!!! aulcuno mi sa dire come si cambia il tema su fire fox?! Grazie zapco84

  41. 41

    eugenio dice:

    Grazie! non dirlo in giro ma ho fatto qualche clikkettino di ringraziamento 🙂

  42. 42

    Daniele dice:

    @eugenio: hey! Non si fà! 😉

  43. 43

    Gigi dice:

    Dire che è stato utile è riduttivo.

    Grazie mille

  44. 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 […]

  45. 45

    Daniele dice:

    @Gigi: sono contento che ti sia servita 😉

  46. 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. […]

  47. 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

  48. 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 […]

  49. 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 […]

  50. 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 […]

  51. 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

  52. 52

    Screencast: come modificare il proprio tema wordpress in 5 minuti con FireBug dice:

    […]  Originale di Daniele Salamina […]

  53. 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…. ?????

  54. 54

    ghostdog dice:

    bel cast… grazie è stato molto utile 🙂

  55. 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…

  56. 56

    francesca dice:

    grazie mille, molto utile

  57. 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)

  58. 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. […]

  59. 59

    gabriele dice:

    Bravissimo, grazie: te l’avranno detto in tanti ma te lo dico anche io, grazie davvero, facile e efficace.

  60. 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?

  61. 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!

  62. 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!

  63. 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 […]

  64. 64

    Carlo dice:

    Ciao ragazzi,
    ma andando a modificare quei files, non si va incontro a nessuna sanzione? Se free perch criptano il codice?

  65. 65

    iobit dice:

    ciao, esiste una versione di firebug o simile, che ti fa modificare il css direttamente da browser senza editare manualmente il css? grazie

  66. 66

    Traslochi Anzio dice:

    Sono dei suggerimenti buoni per personalizzare il proprio sito.

  67. 67

    ale dice:

    Scusa ma per modificare il layout con wordpress occorre l’account premium?
    O si pu fare gratis???
    A me pare di aver capito che le modifiche tramite css siano a pagamento

  68. 68

    prestiti inpdap dice:

    Ciao,
    grazie di questo post mi stai salvando la vita 🙂 ora davvero facile poter cambiare cose che prima sembrava un dramma ogni volta..

    A presto

  69. 69

    Enea dice:

    buongiorno io vorei sapere come riushire a cambiare lo sfondo di un templeit di wordpless e meterne uno di anime manga

  70. 70

    Dalila dice:

    non riesco a salvare… seleziono il colore e il carattere, lo modifico in entrambe le bacheche e poi non mi fa salvare 🙁 help me! il mio font è orribile!

Spiacente, i commenti sono chiusi.