Utilizziamo lo strumento Firebug di Firefox per modificare il file style.css del tema grafico installato come predefinito.Firebug è una delle tante estensioni del browser Firefox che utilizziamo per analizzare il codice delle nostre pagine web al fine di apportare modifiche a file css contenuti nel tema di WordPress (naturalmente l’applicazione vale per tutti i cms e non è limitata solo a WordPress).
Firebug è molto potente perchè ci permette di individuare precisamente il codice del tema che desideriamo modificare, provare le modifiche in virtuale senza compromettere l’aspetto della pagina web, e quindi renderle effettive mediante l’editor interno di WordPress oppure con l’ausilio di programmi già installati all’interno del nostro computer.
Proviamo a descrivere alcune fasi del funzionamento di Firebug. L’estensione deve essere installata mediante l’opzione “Componenti Aggiuntivi” di Firefox. Dopo la sua installazione in alto a destra del browser troveremo l’icona di un insetto, come quello mostrato nella figura di questa pagina.
Per analizzare il codice css di una pagina web realizzata con WordPress bisogna cliccare sull’icona di Firebug. Nella parte inferiore si aprirà l’editor dell’estensione che ci aiuterà a individuare il codice da modificare.
Importanza di primo piano riveste l’opzione di Firebug “Strumento di selezione” (indicato nella precedente immagine) per mezzo del quale riusciamo ad individuare precisamente l’area del tema che desideriamo modificare. Ad esempio se il nostro obiettivo è modificare lo sfondo dell’area dell’HEADER (parte superiore) del nostro tema grafico (per il nostro esempio abbiamo utilizzato il tema “Twenty Fourteen” contenuto nell’archivio dei temi gratuiti di wordpress), cliccare lo strumento di selezione e selezionare la parte superiore del tema. Firebug individuerà a sinistra il codice html della pagina e a destra il codice css e dunque l’area di sfondo da modificare: immagine successiva:
La caratteristica importate di Firebug è quella di permettere di eseguire modifiche virtuali al codice css consentendo all’utente di provare diverse modifiche prima di applicarle definitamente. Infatti se a destra proviamo a cancellare il codice esadecimale del colore nero #000000 con un’altro a piacere, la modifica verrà applicata all’header. Se aggiorniamo la pagina tutto tornerà alla situazione normale.
Dopo aver stabilito la modifica da applicare al codice CSS possiamo rendere definitive le nostre azioni andando ad agire effettivamente sul codice CSS del file style.css del nostro tema. Per fare questo abbiamo de possibilità:
- L’Editor di Wodpress all’interno del pannello di controllo
- Utilizzare un software in locale per le modifiche del file style.css
Nel primo caso clicchiamo su “Aspetto”, “Editor”, selezioniamo il file style.css (in genere di default si presente già automaticamente), cerchiamo il codice corrispondente al colore di sfondo dell’header con lo strumento trova di Firefox e modifichiamo il codice esadecimale. Apportata la modifica salviamo l’editor del file style.css e il colore di sfondo della parte superiore del tema verrà cambiato in modo definitivo.
Nel secondo caso possiamo utilizzare un editor testi già installato all’interno del nostro computer. Si può partire con blocco note di Windows o il suo analogo per sistemi operativi diversi, utilizzare editor gratuiti come ad esempio Notepad++ (software consigliato) o Dreamweaver di Adobe. L’azione da compiere è quella di prelevare il file all’interno della cartella dei temi di WordPress del nostro server, modificare il file style.css con l’editor preferito e riportare con un software FTP (Filezilla ad esempio) lo stesso file nella directory originale.
Analogamente a Firebug possiamo utilizzare opzioni simili per altri browser come ad esempio “ispeziona” di Google Chrome.
VUOI APPROFONDIRE L’ARGOMENTO? IMPARA A MODIFICARE IL FILE CSS DI UN TEMA WORDPRESS CON LA VIDEO GUIDA: WORDPRESS, CSS CON FIREBUG
Tre video lezioni per una durata di 40 min. in cui verrai guidato passo passo alla modifica di un Tema di WordPress utilizzando Firebug. Le lezioni sono in modalità streaming, fruibili all’interno della nostra piattaforma online, ma possono essere scaricate in Mp4 e visualizzate offline tramite il proprio computer. Durante tutte le lezioni potrai rivolgere domande al docente. Di seguito argomento e durata delle lezioni con un video di presentazione della Guida online. Le lezioni sono a qualità più elevata (HD) rispetto alla demo di Youtube sotto riportata e possono essere seguite con diversi device (Computer, Smartphone, Tablet) essendo in formato Mp4.
VIDEO 1 (La struttura di un tema WordPress e l’estensione Firebug per Firefox) – 13,10 min
VIDEO 2 (Come e dove modificare il tema di WordPress con l’Editor di WordPress e Firebug) – 17,48 min
VIDEO 3 (Come e dove modificare il tema di WordPress con Notepad++) – 7,52 min
VIDEO LEZIONI SEMPLICI ED EFFICACI, CON ASSISTENZA, ESERCITAZIONE FINALE E ATTESTATO DI FREQUENZA.
VIDEO GUIDA FIREBUG con PDF e EBOOK WordPress
€ 14,00
Questa video guida è Gratuita con l’acquisto del video corso Gantry per WordPress fino a Domenica 12/03/2017
Pagamenti sicuri tramite la piattaforma PayPal
SOLO EBOOK PDF FIREBUG € 2,99
Inviando il modulo ed effettuando il pagamento si autorizza al trattamento dei dati personali in base alla normativa sulla Privacy vigente. I dati possono essere utilizzati solo dallo Studio Progettimultimediali.com