Hai mai desiderato modificare temporaneamente una pagina web per vedere come apparirebbe con colori, caratteri, stile specifici? Questo è possibile con uno strumento già esistente nel tuo browser chiamato " Ispeziona l'elemento ". Questo è un sogno diventato realtà per tutti gli utenti che amano manipolare i CSS.
In questo tutorial, ti guideremo attraverso le basi dell'ispezione degli articoli e come usarlo con il tuo sito WordPress.
Cos'è uno strumento di ispezione degli articoli?
I browser moderni come Google Chrome e Mozilla Firefox hanno creato strumenti che consentono agli sviluppatori Web di eseguire il debug degli errori. Questi strumenti visualizzano HTML, CSS e JavaScript per una pagina e mostrano come viene eseguito il codice.
L'uso dello strumento " Inspect Element Puoi modificare il codice HTML, CSS o JavaScript per qualsiasi pagina web e vedere le tue modifiche in tempo reale (esclusivamente sul computer).
Per un proprietario di a sito web, questi strumenti possono aiutarti a visualizzare in anteprima l'aspetto di un determinato stile senza applicare effettivamente le modifiche per tutti.
Per gli scrittori, questi strumenti sono fantastici perché puoi facilmente modificare le informazioni di identificazione personale mentre fai gli screenshot eliminando la necessità di sfocare effettivamente gli elementi.
Per gli agenti dell'assistenza, questo è un ottimo modo per identificare l'errore che potrebbe causare il mancato caricamento delle gallerie o impedire loro di funzionare correttamente.
Stiamo solo scalfendo la superficie dei casi d'uso perché lo strumento " Ispeziona l'elemento È davvero potente.
In questo articolo, ci concentreremo sullo strumento " Ispeziona l'elemento Da Google Chrome, perché è il nostro browser preferito. Firefox ha i suoi strumenti di sviluppo che possono essere richiamati anche selezionando il menu " ispezionare l'elemento '.
Lancio del tool "Ispeziona l'elemento" e localizzazione del codice
È possibile eseguire questo strumento premendo Ctrl + Maiusc + I sulla tastiera. In alternativa, è possibile fare clic in un punto qualsiasi di una pagina Web e quindi selezionare Ispeziona la voce di menu del browser.
La finestra del browser si dividerà in due e la finestra in basso mostrerà il codice sorgente della pagina web.
La finestra degli strumenti per sviluppatori è ulteriormente suddivisa in due finestre. Alla tua sinistra, vedrai il codice HTML della pagina. Nel riquadro di destra, vedrai le regole CSS.
Spostando il mouse sulla fonte del codice HTML, vedrai l'area evidenziata evidenziata sulla pagina web. Noterai anche le regole CSS per questo elemento in questione.
Puoi anche spostare il puntatore del mouse su un elemento della pagina Web, fare clic con il pulsante destro del mouse e selezionare " ispezionare l'elemento ". L'elemento su cui hai fatto clic verrà evidenziato nel codice sorgente.
Sviluppatore di codice e debugger per sviluppatori
HTML e CSS nella finestra di ispezione degli elementi sono modificabili. Puoi fare doppio clic sul codice sorgente HTML e modificarlo come preferisci.
Puoi anche fare doppio clic e modificare gli attributi degli stili nel riquadro CSS. Per aggiungere una regola, fai clic sull'icona più nel riquadro di stile in alto.
Quando si apportano modifiche al codice CSS o HTML, queste modifiche si rifletteranno istantaneamente nel browser.
Si noti che non tutte le modifiche apportate qui vengono salvate ovunque. Lo strumento Ispeziona l'elemento È uno strumento di debug e non salva le modifiche in un file sul server. Ciò significa che se si aggiorna la pagina, tutte le modifiche andranno perse.
Per apportare effettivamente le modifiche, dovrai modificare lo stile del tuo tema WordPress o un modello per aggiungere le modifiche che desideri salvare.
Prima di iniziare a modificare il tuo tema WordPress esistente utilizzando lo strumento " Ispeziona l'elemento Assicurati di salvare tutte le modifiche creando un tema figlio.
Come trovare gli errori su WordPress
Lo strumento Ispeziona l'elemento Ha un'area chiamata " consolle Che mostra tutti gli errori che esistono sul tuo sito. Prima di provare a eseguire il debug di un errore o chiedere aiuto agli autori di un tema o plug-in, vale sempre la pena guardare qui per vedere cosa c'è che non va.
Ad esempio, se tu fossi un cliente OptinMonster Chi si chiede perché il suo optin non si carica, allora puoi facilmente trovare il problema che indica che il " lumaca della pagina non corrisponde '.
Se la tua barra di condivisione non funzionava correttamente, puoi vedere che c'è un errore JavaScript che lo causa.
Questo è tutto per questo tutorial, spero che tu possa personalizzare meglio il tuo blog WordPress. Sentiti libero di condividere questo tutorial con i tuoi amici.
