Nozioni di base sull’elemento Inspect: Personalizzazione di WordPress per gli utenti fai-da-te

Avete mai voluto modificare temporaneamente una pagina web per vedere come apparirebbe con uno stile specifico?

È possibile modificare testo, colori e altro ancora con uno strumento per sviluppatori già presente nel browser, chiamato Inspect o Inspect Element.

Consente di modificare lo stile HTML e CSS di una pagina con conoscenze minime di codifica. Non salva le modifiche, quindi la pagina originale rimane inalterata.

In questo articolo vi mostreremo le basi dello strumento Inspect e come utilizzarlo sul vostro sito WordPress.

Che cos’è lo strumento Inspect?

I moderni browser web come Google Chrome, Firefox, Safari e Microsoft Edge dispongono di strumenti integrati che consentono agli sviluppatori web di eseguire il debug degli errori.

Questi strumenti mostrano il codice HTML, CSS e JavaScript di una pagina e come il browser esegue il codice.

È possibile aprire questi strumenti per gli sviluppatori visitando qualsiasi pagina e selezionando “Ispeziona” dal menu del tasto destro del mouse.

Utilizzando lo strumento Inspect, potete modificare il codice HTML, CSS o JavaSCript di qualsiasi pagina web e vedere le vostre modifiche sullo schermo (vi mostreremo come più avanti in questo articolo).

Queste modifiche non influiscono sulla pagina web originale e scompaiono quando si chiude la finestra o si ricarica la pagina.

Consente ai proprietari e agli sviluppatori di siti web fai-da-te di eseguire test e debug.

• È possibile applicare gli stili in CSS e vedere come appariranno.
• I redattori tecnici che hanno bisogno di fare screenshot possono modificare l’HTML per cambiare il testo sullo schermo e nascondere le informazioni di identificazione personale.
• Gli sviluppatori possono usarlo per cercare gli errori comuni di WordPress, gli errori 404, il debug di problemi JavaScript e altro ancora.

Stiamo solo grattando la superficie dei casi d’uso. Questi strumenti per sviluppatori sono incredibilmente potenti e molto utili per gli utenti avanzati.

In questo articolo ci concentreremo sullo strumento Inspect di Google Chrome, perché è il browser più utilizzato.

Altri browser, come Firefox, Safari e Microsoft Edge, hanno i propri strumenti per gli sviluppatori, che possono essere richiamati anche selezionando l’elemento Inspect dal menu del browser.

Pronti? Entriamo nel vivo. Potete utilizzare i link sottostanti per passare a qualsiasi sezione del post.

Video tutorial

Se il video non vi piace o avete bisogno di ulteriori istruzioni, continuate a leggere.

Avvio dello strumento di ispezione e individuazione del codice

È possibile avviare lo strumento di ispezione premendo CTRL + Maiusc + I (Command + Options + I per MacOS) sulla tastiera.

È anche possibile fare clic su un punto qualsiasi di una pagina web e selezionare “Ispezione” dal menu del browser.

È possibile accedere allo strumento anche dal menu principale del browser.

In Google Chrome, fare clic sul menu a tre punti nell’angolo in alto a destra, quindi scorrere verso il basso fino a Più strumenti ” Strumenti per gli sviluppatori.

La finestra del browser si divide in due.

Da un lato, si vedrà la pagina che si stava visualizzando. Dall’altro lato, si vedranno il codice HTML e le regole CSS.

La posizione del dock Inspect varia, ma è possibile cambiarla facendo clic sul menu a tre punti e selezionando la posizione ‘Dock side’. L’icona da cliccare è visibile nell’immagine qui sopra.

Spostando il mouse sull’origine HTML si evidenzia l’area interessata della pagina web.

Si noterà anche che le regole CSS cambiano quando si fa clic su un elemento all’interno del codice HTML.

È anche possibile portare il puntatore del mouse su un elemento della pagina web, fare clic con il tasto destro del mouse e selezionare lo strumento “Ispezione”.

L’elemento verrà evidenziato nel codice sorgente.

Modifica e debug del codice nell’elemento Inspect

Sia l’HTML che il CSS nella finestra Ispeziona elemento sono modificabili. È possibile fare doppio clic in qualsiasi punto del codice sorgente HTML e modificare il codice come si desidera.

È anche possibile fare doppio clic e modificare gli attributi e gli stili nel riquadro CSS.

Per aggiungere una regola di stile personalizzata, fare clic sull’icona + nella parte superiore del riquadro CSS.

Quando si apportano modifiche al CSS o all’HTML, queste si riflettono istantaneamente nel browser.

Queste modifiche verranno salvate nella memoria temporanea del browser e non avranno alcun effetto sul sito web.

Per apportare le modifiche, è necessario aggiungere un CSS personalizzato al tema o modificare il relativo modello per aggiungere le modifiche che si desidera salvare.

Prima di iniziare a modificare il tema WordPress esistente utilizzando lo strumento Inspect Element, assicuratevi di creare un backup di WordPress.

Trovare facilmente gli errori sul vostro sito

Lo strumento Inspect ha un’area chiamata Console, che mostra gli errori verificatisi durante il caricamento della pagina.

Quando si cerca di eseguire il debug di un errore o si chiede supporto agli autori dei plugin, è sempre utile guardare qui per vedere se ci sono errori o avvertimenti.

La scheda Console consente di risolvere diversi problemi comuni. Ad esempio, queste sono solo alcune delle operazioni che si possono fare con la console di ispezione:

• Scoprite perché un’immagine aggiunta non viene visualizzata.
• Perché un plugin o un tema non si comporta correttamente
• Quale plugin o estensione del browser può causare il conflitto?

Anche gli utenti non tecnici possono esaminarlo per trovare indizi sull’origine di un problema.

Ad esempio, se siete clienti di OptinMonster e vi chiedete perché il vostro optin non si carica, potete facilmente trovare il problema “Lo slug della vostra pagina non corrisponde”.

Strumenti come Inspect Element Console e SupportAlly aiutano a ottenere una migliore assistenza clienti. Il team di assistenza tecnica ama i clienti che prendono l’iniziativa di fornire un feedback dettagliato sui problemi.

Come utilizzare lo strumento Inspect su mobile (iOS o Android)?

I browser mobili non hanno le opzioni per gli sviluppatori attivate di default. I produttori presumono che la maggior parte degli utenti mobili non le userebbe.

Il modo più semplice per risolvere i problemi e utilizzare lo strumento di ispezione per i problemi dei dispositivi mobili. è quello di utilizzare la funzione di emulazione mobile nel browser desktop.

È quindi possibile scegliere un dispositivo dall’alto o le dimensioni dello schermo. Chrome emulerà quindi le dimensioni dello schermo.

Domande frequenti

Di seguito sono riportate alcune delle domande più frequenti poste dai nostri utenti sull’uso dello strumento Inspect.

1. Posso utilizzare lo strumento Inspect su qualsiasi sito web o solo sul mio?

Sì, è possibile utilizzare lo strumento di ispezione su qualsiasi sito web. È sufficiente fare clic con il tasto destro del mouse e selezionare lo strumento Ispeziona dal menu del browser per vedere il codice di qualsiasi sito web. Studiare il codice di altri siti web è un modo rapido per imparare e migliorare le proprie competenze CSS/HTML.

2. Perché non riesco a trovare lo strumento Inspect nel mio browser?

Google Chrome può nascondere l’opzione Ispeziona nel menu del clic destro, in particolare quando più estensioni aggiungono le proprie opzioni al menu del clic destro. Tuttavia, è sempre possibile aprire lo strumento Ispezione facendo clic sul menu a tre punti nell’angolo superiore destro della schermata del browser e selezionando Altri strumenti ” Strumenti per sviluppatori. È anche possibile utilizzare i tasti CTRL + Shift + I (Command + Options + I su Mac) sulla tastiera per aprirlo.

Risorse bonus:

È emozionante poter apportare modifiche al proprio sito web come principiante di WordPress fai da te.

Nel corso degli anni, abbiamo visto innumerevoli principianti con zero esperienza nella costruzione di siti web diventare professionisti del settore.

Se volete approfondire il tema dell’utilizzo dello strumento Inspect per fare più cose sul vostro sito WordPress, le seguenti risorse sono un buon punto di partenza.

• Come personalizzare il tema di WordPress – Questa guida per principianti mostra come personalizzare il tema di WordPress passo dopo passo.
• Come aggiungere correttamente i CSS personalizzati in WordPress – Questo tutorial mostra diversi modi per aggiungere facilmente i CSS personalizzati in WordPress.
• Come ottimizzare la distribuzione dei CSS in WordPress – Troppi singoli file CSS possono degradare le prestazioni. Questo tutorial mostra come ottimizzare la distribuzione dei CSS per aumentare la velocità di WordPress.
• Scheda informativa sui CSS generati da WordPress – Questa guida pratica vi mostrerà molte classi CSS che WordPress aggiunge a diversi elementi per impostazione predefinita. Potete quindi utilizzare queste classi CSS nel vostro codice CSS personalizzato per modificare l’aspetto di questi elementi.

Speriamo che questo articolo vi abbia aiutato a imparare le basi dell’elemento Inspect e a utilizzarlo con il vostro sito WordPress. Potreste anche dare un’occhiata al foglio informativo sui CSS generati di default da WordPress per accelerare le vostre capacità di sviluppo dei temi.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.