Vai al contenuto principale

Nozioni di base di personalizzazione di un sito WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

Ispezione dell'elemento 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 siti Web, questi strumenti possono aiutarti a visualizzare in anteprima l'aspetto di un determinato stile senza implementare 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 '.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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.

ISPEZIONE di codice blogpascher

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.

ispezione del codice HTML-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.

Regole CSS dell'elemento HTML

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.

modificando sorgente HTML

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.

aggiungi una nuova regola css

Quando si apportano modifiche al codice CSS o HTML, queste modifiche si rifletteranno istantaneamente nel browser.

modifiche al codice vivono

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 cambiare lo stile del tema o del modello di WordPress per aggiungere le modifiche che desideri salvare.

Prima di iniziare a modificare il 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.

console JavaScript

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota
Tweet
Enregistrer2