Le basi di Inspect Element: personalizzare WordPress per utenti fai-da-te

Molti di noi sono curiosi di capire il design di un sito web senza il rischio di apportare modifiche permanenti. Lo strumento Ispeziona elemento serve a questo scopo come strumento inestimabile, permettendoti di apportare modifiche temporanee direttamente nel tuo browser.

Molti dei nostri utenti principianti ci hanno detto che trovano difficile modificare HTML/CSS. Raccomandiamo sempre a tali utenti di sperimentare con lo strumento Ispeziona.

È semplice e facile da usare, e puoi vedere i risultati delle tue modifiche all'istante. Lo usiamo continuamente per visualizzare in anteprima modifiche che vanno da piccole modifiche di testo a rifacimenti completi del layout.

Questa guida ti illustrerà i passaggi per utilizzare efficacemente lo strumento Ispeziona elemento sul tuo sito WordPress, aiutandoti a dare vita alle tue idee di design in modo sicuro ed efficiente.

Cos'è lo strumento Ispeziona?

Ci siamo affidati agli strumenti per sviluppatori del browser innumerevoli volte per risolvere problemi e sperimentare modifiche ai siti web. I browser web moderni come Google Chrome, Firefox, Safari e Microsoft Edge sono dotati di strumenti integrati progettati per aiutare gli sviluppatori web a correggere gli errori senza sforzo.

Questi strumenti visualizzano il codice HTML, CSS e JavaScript di una pagina mostrando come il browser li elabora. Per noi, è come provare i nostri codici cheat senza influenzare il sito web effettivo.

Puoi accedere a questi strumenti per sviluppatori su qualsiasi pagina facendo clic con il pulsante destro del mouse e selezionando 'Ispeziona' dal menu. È una delle nostre azioni preferite quando testiamo modifiche di design o risolviamo un problema.

Con lo strumento Ispeziona, puoi modificare temporaneamente codice HTML, CSS o JavaScript e vedere le modifiche in tempo reale sul tuo schermo. L'abbiamo usato per visualizzare in anteprima tutto, da piccole modifiche di stile a idee complete di layout. (Ti mostreremo come più avanti in questo articolo.)

La parte migliore? Queste modifiche non influiscono sulla pagina web effettiva. Una volta ricaricata la pagina o chiusa il browser, tutto torna alla normalità. Questo lo rende uno strumento sicuro e affidabile per testare idee.

L'abbiamo trovato particolarmente utile per proprietari di siti web fai-da-te e sviluppatori che necessitano di un modo rapido per testare o eseguire il debug. Ecco solo alcuni casi d'uso:

• Applica nuovi stili CSS e vedi immediatamente come appaiono sul tuo sito.
• Gli scrittori tecnici possono modificare l'HTML per gli screenshot, nascondere informazioni sensibili o personalizzare il testo visibile.
• Gli sviluppatori lo usano spesso per identificare errori comuni di WordPress, eseguire il debug di problemi JavaScript o risolvere errori 404.

E questo è solo un assaggio. Questi strumenti sono incredibilmente versatili, il che li rende un preferito per chiunque lavori con i siti web.

In questa guida, ci concentreremo sullo strumento Ispeziona in Google Chrome, poiché è il browser più popolare tra i nostri lettori. Tuttavia, Firefox, Safari e Microsoft Edge hanno strumenti simili a cui si può accedere tramite le loro opzioni Ispeziona.

Pronto per iniziare? Usa i link qui sotto per saltare a qualsiasi sezione dell'articolo e seguire:

• Avvio dello strumento Ispeziona e individuazione del codice
• Modifica ed esecuzione del debug del codice in Elemento Ispeziona
• Trova facilmente errori sul tuo sito
• Come usare lo strumento Ispeziona su dispositivi mobili (iOS o Android)?
• Come applicare modifiche permanenti all'Elemento Ispeziona in WordPress
• Migliori pratiche quando si usa l'Elemento Ispeziona
• Domande frequenti sull'Elemento Ispeziona
• Tutorial video
• Scopri di più sulla personalizzazione di WordPress

Avvio dello strumento Ispeziona e individuazione del codice

Puoi avviare lo strumento di ispezione premendo CTRL + Shift + I (Comando + Opzioni + I per MacOS) sulla tastiera.

Puoi anche fare clic in qualsiasi punto di una pagina web e selezionare 'Ispeziona' dal menu del browser.

Puoi anche accedere allo strumento dal menu principale del browser.

In Google Chrome, fai clic sul menu con i tre puntini nell'angolo in alto a destra e quindi scorri fino a Altri strumenti » Strumenti per sviluppatori.

La finestra del tuo browser si dividerà in due.

Da un lato, vedrai la pagina che stavi visualizzando. Dall'altro lato, vedrai il codice HTML e le regole CSS.

La posizione del pannello Ispeziona varia, ma puoi cambiarla facendo clic sul menu con tre puntini e selezionando la posizione ‘Dock side’. Puoi vedere l'icona su cui fare clic nell'immagine sopra.

Muovendo il mouse sul sorgente HTML, verrà evidenziata l'area interessata sulla pagina web.

Noterai anche che le regole CSS cambiano mentre fai clic su un elemento all'interno del codice HTML.

Puoi anche portare il puntatore del mouse su un elemento nella pagina web, fare clic destro e selezionare lo strumento ‘Ispeziona’.

L'elemento verrà evidenziato nel codice sorgente.

Modifica ed esecuzione del debug del codice in Elemento Ispeziona

Sia l'HTML che il CSS nella finestra di ispezione dell'elemento sono modificabili. Puoi fare doppio clic ovunque nel codice sorgente HTML e modificare il codice come preferisci.

Puoi anche fare doppio clic e modificare qualsiasi attributo e stile nel pannello CSS.

Per aggiungere una regola di stile personalizzata, fai semplicemente clic sull'icona + nella parte superiore del pannello CSS.

Man mano che apporti modifiche al CSS o all'HTML, tali modifiche verranno riflesse nel browser istantaneamente.

Queste modifiche verranno salvate nella memoria temporanea del tuo browser e non influenzeranno il tuo sito web.

Per apportare le modifiche, dovrai aggiungere CSS personalizzato al tuo tema o modificare il modello pertinente per aggiungere le modifiche che desideri salvare.

Prima di iniziare a modificare il tuo tema WordPress esistente utilizzando lo strumento Ispeziona elemento, assicurati di creare un backup di WordPress.

Trova facilmente errori sul tuo sito

Lo strumento Ispeziona ha un'area chiamata Console, che mostra gli errori che si sono verificati durante il caricamento della pagina.

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

Utilizzando la scheda Console, puoi risolvere diversi problemi comuni. Ad esempio, queste sono solo alcune delle cose che puoi fare con la console di Ispeziona:

• Scopri perché un'immagine che hai aggiunto non viene visualizzata
• Perché un plugin o un tema non si comporta correttamente
• Quale plugin o estensione del browser potrebbe causare il conflitto

Anche gli utenti non tecnici possono esaminarla per trovare indizi sull'origine di un problema.

Ad esempio, se sei un cliente OptinMonster e ti chiedi perché il tuo optin non viene caricato, puoi facilmente trovare il problema "Il tuo slug di pagina non corrisponde".

L'utilizzo di strumenti come la Console di Ispeziona elemento può aiutarti a raccogliere utili dettagli tecnici quando qualcosa non funziona correttamente sul tuo sito. La condivisione di queste informazioni, come messaggi di errore o risorse mancanti, può rendere più facile per i team di supporto di plugin o temi comprendere e risolvere il problema più rapidamente.

Come usare lo strumento Ispeziona su dispositivi mobili (iOS o Android)?

Le opzioni per sviluppatori non sono attivate per impostazione predefinita nei browser mobili, poiché i produttori presumono che la maggior parte degli utenti mobili non le utilizzerebbe.

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

Puoi quindi scegliere un dispositivo dall'alto o le dimensioni dello schermo. Chrome emulerà quindi quella dimensione dello schermo per te.

Come applicare modifiche permanenti all'Elemento Ispeziona in WordPress

Quando lavori con Ispeziona elemento, potresti chiederti come rendere permanenti le modifiche che hai testato. In questa sezione, spiegheremo come farlo sul tuo sito WordPress.

Per prima cosa, identifica le modifiche che desideri conservare e copiale in un file di testo utilizzando un'app come Blocco note o TextEdit. Quindi, puoi provare uno dei metodi seguenti.

1. Aggiungi modifiche CSS al tuo sito WordPress utilizzando l'editor del sito

Una volta copiato, vai alla dashboard di WordPress e seleziona Aspetto » Editor per avviare l'editor del sito.

Fai clic sulla finestra di anteprima per iniziare a modificare il tuo sito.

All'interno dell'editor, fai clic sul pulsante Stile in alto, quindi fai clic sul menu a tre punti e seleziona ‘CSS aggiuntivo’.

Questo aprirà il pannello CSS aggiuntivo, dove puoi semplicemente incollare il CSS che desideri salvare.

Potresti vedere le tue modifiche applicarsi istantaneamente nella finestra di anteprima. Non dimenticare di fare clic su ‘Salva’ per pubblicare le tue modifiche.

2. Aggiungi CSS personalizzato al tuo sito utilizzando WPCode

Se hai bisogno di un modo più semplice per aggiungere CSS personalizzato al tuo sito, questo metodo fa per te.

Per questo metodo, utilizzeremo WPCode. È il miglior gestore di snippet di codice WordPress e ti consente di aggiungere codice personalizzato, HTML e CSS al tuo sito senza modificare il tuo tema.

Nota: Esiste anche una versione gratuita di WPCode che puoi utilizzare. Tuttavia, consigliamo di passare a un piano a pagamento per sbloccare il suo pieno potenziale.

Utilizziamo WPCode sui nostri siti perché rende più facile la gestione del codice. Ancora più importante, ha un sistema di sicurezza integrato che disabilita il tuo codice se restituisce un errore. Per i dettagli, consulta la nostra recensione completa di WPCode.

Innanzitutto, devi installare e attivare il plugin WPCode. Se hai bisogno di aiuto, consulta il nostro tutorial su come installare un plugin WordPress per le istruzioni.

Dopo l'attivazione, vai semplicemente su Snippet di codice » + Aggiungi nuovo dalla dashboard di amministrazione di WordPress.

Quindi, puoi passare il mouse sull'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ nella libreria degli snippet di codice e fare clic su ‘+ Aggiungi snippet personalizzato’.

Dopo di che, devi selezionare ‘Snippet CSS’ come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Successivamente, in cima alla pagina, puoi aggiungere un titolo per il tuo snippet CSS personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare il codice.

Una volta inserito un titolo, puoi scrivere o incollare il tuo CSS personalizzato nella casella ‘Anteprima codice’.

Dopo aver aggiunto il tuo codice CSS personalizzato, fai clic sul pulsante ‘Salva snippet’ e fai clic sull'interruttore di stato su ‘Attivo’.

3. Aggiungi uno snippet HTML al tuo sito WordPress

Per aggiungere modifiche HTML al tuo sito, devi incollarle nel file del modello corretto nel tuo tema.

Per capire quale file del tema modificare, consulta la nostra guida su come trovare quali file modificare nel tema di WordPress.

Dovrai utilizzare un client FTP o l'app file manager sotto il tuo account di hosting per modificare i file del tuo tema.

In alternativa, puoi anche utilizzare WPCode per aggiungere snippet HTML personalizzati. Basta aggiungere un nuovo snippet di codice e selezionare HTML come tipo di snippet.

Dopo di che, fornisci un titolo per il tuo snippet HTML che ti aiuti a identificarlo.

Sotto, aggiungi il tuo codice HTML personalizzato nella casella di anteprima.

WPCode ti consente di scegliere dove vuoi inserire qualsiasi snippet di codice.

Scorri verso il basso fino all'area ‘Inserimento’ e fai clic su ‘Posizione’ per visualizzare le opzioni disponibili.

Dopo aver selezionato una posizione, non dimenticare di fare clic su ‘Salva’ e impostare lo stato dello snippet su Attivo.

Ora puoi visitare il tuo sito per vederlo in azione.

Migliori pratiche quando si usa l'Elemento Ispeziona

L'utilizzo dello strumento Ispeziona può sembrare l'apertura di una finestra segreta sul web design. Ma per sfruttarlo al meglio, ecco alcune best practice, particolarmente utili se sei appena agli inizi:

• Inizia esplorando in sicurezza: Qualsiasi modifica apportata in Ispeziona elemento è temporanea. Quindi sentiti libero di sperimentare senza timore: nulla si romperà in modo permanente.
• Prova diversi stili e layout: Testa colori, font, spaziatura o posizionamento per vedere cosa funziona bene prima di applicare le modifiche al tuo tema o foglio di stile effettivo.
• Prendi nota di ciò che funziona: Se ti piace una modifica, copia il CSS e incollalo in un file di testo o in un'app per prendere appunti in modo da non perderlo.
• Testa tra i browser: Una modifica al design che sembra ottima in Chrome potrebbe apparire strana in Firefox o Safari, quindi controlla sempre.
• Mantieni l'organizzazione: Tieni traccia di tutte le modifiche apportate e del perché. Questo ti aiuterà se dovessi mai annullare qualcosa o risolvere problemi in seguito.
• Non modificare i siti live con leggerezza: Se stai imparando, è meglio fare pratica su un sito di staging o su un ambiente di test per evitare problemi accidentali sul tuo sito live.

Domande frequenti sull'Elemento Ispeziona

Di seguito sono riportate alcune delle domande più frequenti poste dai nostri utenti sull'utilizzo dello strumento Ispeziona.

1. Posso usare lo strumento Ispeziona su qualsiasi sito web o solo sul mio?

Sì, puoi usare lo strumento ispeziona su qualsiasi sito web. Fai semplicemente clic destro e seleziona lo strumento Ispeziona dal menu del browser per vedere il codice dietro qualsiasi sito web. Studiare il codice su altri siti web è un modo rapido per imparare e migliorare le tue abilità CSS/HTML.

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

Google Chrome potrebbe nascondere l'opzione Ispeziona nel menu del clic destro, in particolare quando più estensioni aggiungono le proprie opzioni al menu del clic destro.

Inoltre, la funzione di clic destro potrebbe essere disabilitata tramite JavaScript, il che può nascondere l'opzione 'Ispeziona'. In tali casi, puoi comunque aprire gli Strumenti per sviluppatori utilizzando la scorciatoia da tastiera Ctrl + Maiusc + I (o Cmd + Opzione + I su Mac) o navigando su Menu » Altri strumenti » Strumenti per sviluppatori.

3. Posso vedere le modifiche su browser diversi?

Sì, Ispeziona Elemento è disponibile nei principali browser, permettendoti di testare e osservare le modifiche in Chrome, Firefox, Safari e Edge.

4. Come può Ispeziona Elemento aiutare nel debug di JavaScript?

Ispeziona Elemento include una scheda Console dove puoi vedere errori e avvisi JavaScript. Questo strumento è incredibilmente utile quando devi capire cosa non funziona negli script del tuo sito. È come avere una linea diretta con il processo di pensiero del browser, permettendoti di individuare rapidamente i problemi.

5. Ispeziona Elemento può influire sulla sicurezza del mio sito web?

No, l'uso di Ispeziona elemento non influirà sulla sicurezza del tuo sito web. È uno strumento del browser che modifica temporaneamente l'aspetto o il comportamento del sito sulla tua macchina locale senza alterare i dati di backend o la loro integrità.

Tutorial video

Iscriviti a WPBeginner

Scopri di più sulla personalizzazione di WordPress

Se desideri esplorare ulteriormente come puoi utilizzare lo strumento Ispeziona per fare altre cose sul tuo sito WordPress, le seguenti risorse saranno un buon punto di partenza:

• Come personalizzare il tuo tema WordPress – Questa guida per principianti mostra come personalizzare il tuo tema WordPress passo dopo passo.
• Come aggiungere correttamente CSS personalizzato in WordPress – Questo tutorial mostra diversi modi per aggiungere facilmente il tuo CSS personalizzato in WordPress.
• Come ottimizzare la consegna CSS in WordPress – Troppi file CSS individuali possono degradare le prestazioni. Questo tutorial mostra come ottimizzare la consegna CSS per aumentare la velocità di WordPress.
• Foglio di riferimento CSS generato da WordPress per principianti – Questa utile guida ti mostrerà molte classi CSS che WordPress aggiunge a diversi elementi per impostazione predefinita. Puoi quindi utilizzare quelle classi CSS nel tuo codice CSS personalizzato per modificare l'aspetto di tali elementi.

Speriamo che questo articolo ti abbia aiutato a imparare le basi di Inspect Element e come usarlo con il tuo sito WordPress. Potresti anche voler consultare il nostro foglio di riferimento CSS generato da WordPress per principianti per velocizzare le tue abilità di sviluppo del tema o il nostro toolkit WordPress definitivo per professionisti.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.