WordPress è Drag & Drop, MA... Ecco perché mi preoccupo ancora dell'HTML

Ti sei mai chiesto come funzionano effettivamente i siti web?

Potrebbe sembrare magia, ma c'è una lingua dietro ogni pagina web che vedi. Quella lingua si chiama HTML.

Pensa all'HTML come ai mattoni fondamentali di Internet.

Anche solo un po' di conoscenza dell'HTML può davvero migliorare il tuo gioco con WordPress. Ho visto in prima persona come aiuta le persone a rendere i loro siti web WordPress ancora migliori.

In questo post, spiegherò cos'è l'HTML, perché è importante e come puoi aggiungere codice HTML personalizzato al tuo sito WordPress.

Potresti essere sorpreso da quanto possa essere facile e utile per un web design efficace!

Indice

Cos'è l'HTML?

HTML sta per HyperText Markup Language. Fondamentalmente, l'HTML è il linguaggio che struttura il contenuto web. Pensalo come lo scheletro di una pagina web.

L'HTML utilizza qualcosa chiamato "tag". I tag dicono al browser web che cos'è ogni parte del tuo contenuto.

Ad esempio, i tag possono dire al browser che qualcosa è un'intestazione, un paragrafo o un'immagine. I browser leggono questi tag per visualizzare le pagine web nel modo in cui dovrebbero apparire.

L'HTML non è un linguaggio di programmazione. È più un modo per organizzare le informazioni in modo che i browser possano capirle.

Perché dovresti interessarti all'HTML in WordPress?

WordPress è super facile da usare. Puoi costruire un intero sito web senza conoscere alcun codice. Allora, perché preoccuparsi dell'HTML?

Beh, l'HTML ti dà più controllo sul tuo contenuto. A volte l'editor normale di WordPress non è sufficiente.

Diciamo che vuoi aggiungere un attributo specifico a un'immagine. O forse vuoi creare uno stile di elenco davvero unico. L'HTML ti permette di fare cose del genere.

L'HTML è anche un salvavita per la risoluzione dei problemi.

Hai mai avuto uno strano problema di formattazione in WordPress? Guardare l'HTML può aiutarti a trovare e risolvere rapidamente il problema. È molto più veloce che indovinare con l'editor visivo.

Inoltre, l'HTML ti offre flessibilità. Vuoi aggiungere personalizzazioni avanzate? Come classi personalizzate per lo styling o layout più complessi? L'HTML sblocca queste possibilità.

Ed ecco una cosa importante: la preparazione per il futuro.

WordPress è in continua evoluzione. Ma l'HTML? È un'abilità fondamentale del web che sarà sempre utile.

L'ho visto più e più volte: capire l'HTML ti rende molto più adattabile nel mondo del web.

HTML 101: Le basi

Parliamo dei mattoni fondamentali dell'HTML. Si chiamano tag.

I tag sono istruzioni che dicono al browser cosa fare con il tuo contenuto. La maggior parte dei tag viene in coppia: un tag di apertura e un tag di chiusura.

Ad esempio, se vuoi creare un paragrafo, usi il tag <p> per iniziarlo e </p> per terminarlo.

Vedi la barra nel tag di chiusura? È così che sai che è la fine.

Vediamo alcuni tag HTML comuni che userai molto:

I titoli servono per titoli e sottotitoli. Ci sono <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.

<h1> è il titolo più importante (di solito il titolo principale), e <h6> è il meno importante.

I link sono ciò che rende il web, beh, un web! Il tag <a> crea i link. <a> sta per anchor (ancora).

Vuoi mostrare immagini? Il tag <img> è il tuo amico. <img> è l'abbreviazione di image (immagine).

Hai bisogno di fare un elenco di cose? L'HTML ti copre. Ci sono due tipi principali:

• <ul> per elenchi non ordinati (elenchi puntati). "ul" sta per "unordered list" (elenco non ordinato).
• <ol> per elenchi ordinati (elenchi numerati). "ol" sta per "ordered list" (elenco ordinato).

E sia all'interno di <ul> che di <ol>, usi i tag <li> per ogni elemento dell'elenco. "li" sta per "list item" (elemento dell'elenco).

I tag possono anche avere attributi. Gli attributi forniscono informazioni aggiuntive su un tag.

Ad esempio, il tag <a> necessita di un attributo href per indicare dove collegarsi. Come questo: <a href="https://example.com">Testo del link</a>. L'attributo href contiene l'indirizzo del sito web.

E il tag <img> necessita di un attributo src per indicare dove trovare il file dell'immagine. Dovrebbe anche avere un attributo alt per "testo alternativo", che è importante se l'immagine non può essere caricata o per l'accessibilità.

Come questo: <img src="immagine.jpg" alt="Testo descrittivo">.

Ecco un esempio super semplice di HTML in azione:

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

Quel codice creerebbe un titolo principale, un paragrafo e un link su una pagina web.

Quando ho iniziato a imparare l'HTML, questi tag di base erano il mio punto di partenza. E onestamente? Sono ancora il fondamento di quasi tutto ciò che faccio online. Questi semplici tag sono potenti!

Mettere l'HTML al lavoro: esempi pratici

Quindi, come puoi effettivamente usare l'HTML in WordPress? Vediamo alcuni esempi.

Vuoi rendere del testo in grassetto o in corsivo? L'HTML può farlo.

Usa i tag <strong> e </strong> per rendere il testo in grassetto. Oppure usa i tag <b> e </b>, anche questi rendono il testo in grassetto.

Così: <strong>Questo testo è in grassetto</strong>.

Per il corsivo, usa <em> o <i>. Così: <em>Questo testo è in corsivo</em>.

Questi tag ti aiutano a enfatizzare parole e frasi nel tuo contenuto.

Abbiamo parlato del tag <a>. Puoi usarlo per collegarti ad altre pagine del tuo sito o ad altri siti web.

Puoi collegare testo, immagini o anche pulsanti. Si tratta solo di usare quel tag <a> con l'attributo href corretto.

Vuoi aggiungere un video di YouTube o Vimeo al tuo sito WordPress? La maggior parte delle piattaforme video ti fornisce codici di incorporamento. Questi codici sono solitamente HTML, spesso utilizzando tag <iframe>.

Copia semplicemente il codice di incorporamento da YouTube (o da dove è ospitato il tuo video) e incollalo in WordPress. WordPress sa cosa farne.

Hai bisogno di un elenco puntato? Usa i tag <ul>. Per un elenco numerato, usa i tag <ol> e <li>.

Vuoi aggiungere una linea per separare le sezioni del tuo contenuto? Il tag <hr> crea una linea orizzontale. È un modo semplice per interrompere visivamente il tuo testo.

Questi sono solo alcuni esempi, ma puoi vedere quanto l'HTML possa essere davvero utile in WordPress. Si tratta di aggiungere un po' di struttura e funzionalità extra al contenuto del tuo sito web.

Come imparare l'HTML di WordPress

Quindi, stai pensando: "Ok, l'HTML sembra utile, ma come lo imparo?" Buona domanda! Fortunatamente, ci sono tantissime ottime risorse disponibili.

Ecco alcuni posti dove puoi iniziare subito a imparare l'HTML.

MDN Web Docs è come l'enciclopedia dello sviluppo web. È realizzato da Mozilla (le persone dietro Firefox) ed è super completo e affidabile.

Se ti piace l'apprendimento interattivo, Codecademy è fantastico. Hanno corsi in cui scrivi effettivamente codice direttamente nel tuo browser.

W3schools è un sito web popolare per tutorial di sviluppo web. Hanno tantissimi esempi e riferimenti HTML.

Vuoi vedere come l'HTML viene utilizzato specificamente in WordPress? Dai un'occhiata alla documentazione ufficiale per sviluppatori di WordPress. È un po' più tecnica, ma è un'ottima risorsa man mano che ti senti più a tuo agio.

Indipendentemente dalla risorsa che scegli, la cosa più importante è la pratica. Seriamente. Non imparerai l'HTML solo leggendolo. Devi scrivere codice e vedere cosa succede.

Sperimenta! Non aver paura di rompere le cose. È così che si impara.

Come Usare l'HTML in WordPress

Ci sono diversi modi per usare l'HTML in WordPress. Vediamoli uno per uno.

1. Aggiungi un blocco HTML personalizzato nell'editor a blocchi

Se stai usando l'Editor a Blocchi (Gutenberg) in WordPress, puoi usare un blocco speciale solo per l'HTML. Si chiama blocco HTML personalizzato.

Per usarlo, aggiungi semplicemente un nuovo blocco alla tua pagina o al tuo post di WordPress. Cerca "HTML" nella barra di ricerca dei blocchi. Vedrai apparire il blocco HTML personalizzato.

Fai clic su di esso per aggiungerlo al tuo contenuto. È proprio come aggiungere qualsiasi altro blocco. Puoi persino trascinarlo e rilasciarlo ovunque tu voglia.

Una volta aggiunto il blocco, vedrai una casella in cui puoi digitare o incollare il tuo codice HTML di WordPress. Inserisci semplicemente il tuo HTML lì.

Fai clic su Anteprima per vedere come appare il tuo codice HTML nella pagina senza pubblicarla effettivamente.

Questo è molto utile per controllare il tuo codice.

2. Modifica un blocco in HTML

Sapevi che puoi modificare qualsiasi blocco di WordPress come HTML? Sì, anche quei normali blocchi di paragrafo.

Questo è utile se vuoi apportare piccole modifiche HTML a un blocco già presente.

Per prima cosa, fai clic sul blocco che desideri modificare. Quindi, cerca i tre puntini nella barra degli strumenti del blocco. Fai clic su quelli.

Si aprirà un menu. In quel menu, premi il pulsante Modifica come HTML.

Improvvisamente, il blocco si trasformerà! Invece del normale editor visivo, vedrai il codice HTML personalizzato per quel blocco. Ora puoi modificare direttamente l'HTML.

Questo è ottimo per piccole modifiche. Forse vuoi aggiungere una classe specifica a un paragrafo per lo styling in seguito. O forse devi correggere un piccolo problema di formattazione che è più facile da gestire in HTML.

Una volta terminata la modifica dell'HTML, puoi fare clic su Modifica visivamente nella barra degli strumenti del blocco per tornare alla normale visualizzazione dell'editor visivo.

3. Usa l'editor di codice in Gutenberg

Per coloro che hanno familiarità con il codice, l'editor a blocchi di WordPress ha una visualizzazione completa dell'Editor di codice. Questa ti mostra il codice HTML per l'intero post o pagina.

Per passare all'Editor di codice, guarda in alto a destra nella schermata dell'editor di Gutenberg. Vedrai anche tre puntini lì: il menu delle opzioni principali per l'intero editor. Fai clic su quei puntini.

In quel menu, vedrai un'opzione chiamata Editor di codice. Fai clic su di essa.

Vedrai i tag e la struttura dell'intera pagina disposti in codice.

Questo editor HTML di WordPress è davvero per utenti esperti che preferiscono lavorare direttamente nel codice. Se ti piace programmare e vuoi vedere la struttura HTML generale della tua pagina, l'Editor di codice è quello che fa per te.

Ma fai attenzione! Se commetti errori nell'HTML, potresti compromettere il layout della tua pagina. È importante capire l'HTML se hai intenzione di utilizzare l'Editor di codice in modo estensivo.

Se vuoi tornare al normale editor visivo, torna semplicemente al menu in alto a destra e fai clic su Editor visivo.

4. Aggiungi HTML con l'editor classico

L'Editor Classico di WordPress ha due schede: Visualizza e Testo. La scheda Testo è dove puoi accedere al codice.

Quando fai clic su Testo, vedrai tutto il codice HTML del tuo post. Questo è dove puoi scrivere o incollare direttamente codice HTML.

Dopo aver aggiunto o modificato il tuo HTML, puoi fare clic di nuovo sulla scheda Visualizza per vedere come appare. Ti mostrerà la versione renderizzata del tuo HTML.

5. Usa un plugin per snippet di codice WordPress

A volte vuoi aggiungere piccoli pezzi di HTML, CSS o JavaScript al tuo sito WordPress. Forse vuoi aggiungere del codice di tracciamento personalizzato o uno stile speciale per una determinata parte del tuo sito.

Potresti modificare i file del tuo tema per fare questo, ma può essere rischioso. E se il tuo tema si aggiorna, le tue modifiche potrebbero essere sovrascritte.

È qui che entrano in gioco i plugin per snippet di codice. Questi plugin ti consentono di aggiungere snippet di codice direttamente dalla tua dashboard di WordPress.

Mantengono il tuo codice organizzato e separato dai file del tuo tema. Questo è molto più sicuro e facile da gestire, specialmente se non sei un esperto di codice.

Prima di aggiungere qualsiasi snippet di codice, è sempre una buona idea eseguire il backup del tuo sito web! Se qualcosa va storto con il tuo codice, vorrai essere in grado di ripristinare facilmente il tuo sito.

Duplicator è un plugin che rende semplicissimo creare backup completi del tuo sito WordPress. Consiglio sempre di eseguire un backup prima di apportare modifiche al codice.

Il mio plugin preferito per gli snippet di codice è WPCode (precedentemente "Insert Headers and Footers"). Questo strumento ti consente di aggiungere HTML, CSS e JavaScript al tuo sito web.

Inoltre, ci sono tantissimi snippet predefiniti che puoi usare se non sei abituato a programmare.

Usare un plugin per snippet di codice è molto più sicuro che modificare direttamente i file del tema. È anche più facile tenere traccia del tuo codice personalizzato.

6. Aggiungi HTML nei widget di WordPress

WordPress viene fornito con un widget integrato chiamato per HTML personalizzato. Per trovarlo, vai alla tua bacheca di WordPress e fai clic su Aspetto e poi su Widget.

Vedrai diverse aree widget, come Barra laterale o Piè di pagina. Queste dipendono dal tuo tema WordPress.

Aggiungi il widget HTML personalizzato nell'area widget in cui desideri aggiungere il tuo HTML.

Digita o incolla il tuo HTML direttamente in quella casella.

Puoi aggiungere tutti i tipi di cose con l'HTML nei widget. Testo personalizzato, immagini, collegamenti, persino codici di incorporamento: funziona tutto!

Dopo aver aggiunto il tuo HTML, fai clic sul pulsante Aggiorna nelle impostazioni del widget.

Fatto! Il tuo HTML sarà ora visibile in quell'area widget sul tuo sito web.

7. Modifica HTML nei temi WordPress

Puoi effettivamente andare direttamente nei file del tuo tema WordPress e modificare l'HTML lì. Questo ti dà molto controllo sulla struttura del tuo sito, ma comporta anche grandi rischi.

Modificare direttamente i file del tema può rompere il tuo sito web se non stai attento. Un piccolo errore nel codice può causare problemi importanti.

Se hai intenzione di modificare i file del tema, ti consiglio di utilizzare sempre un tema figlio. Un tema figlio è come una copia sicura del tuo tema principale in cui puoi apportare modifiche in sicurezza. In questo modo, se il tuo tema principale viene aggiornato, le tue modifiche non verranno sovrascritte.

Ok, avvertimenti a parte, ecco come puoi modificare i file del tema. Nella tua bacheca di WordPress, vai su Aspetto e poi su Editor file tema (a volte chiamato semplicemente Editor tema).

Sul lato destro, vedrai un elenco dei file del tuo tema. Questi file controllano la struttura e il layout del tuo sito web.

Alcuni file comuni che contengono HTML sono:

• header.php: Questo file di solito controlla la parte superiore del tuo sito web: l'area dell'intestazione.
• footer.php: Questo file controlla la parte inferiore: l'area del piè di pagina.
• sidebar.php: Se il tuo tema ha una barra laterale, questo file la controlla.
• index.php: Questa è spesso la pagina principale del tuo sito web, che mostra i tuoi post del blog.
• single.php: Questo controlla come vengono visualizzati i singoli post del blog.
• page.php: Questo controlla come vengono visualizzate le pagine normali (come "Chi siamo" o "Contatti").
• File modello: il tuo tema potrebbe avere altri file modello per diversi tipi di pagine.

Puoi modificare l'HTML direttamente nell'Editor file tema. Fai clic su un file per aprirlo, trova l'HTML che desideri modificare ed effettua le modifiche. Quindi fai clic su Aggiorna file per salvare le modifiche.

Ricorda: modifica i file del tema solo se sai veramente cosa stai facendo, usa sempre un tema figlio e tieni un backup.

Nella mia esperienza, modifico i file del tema solo per personalizzazioni molto specifiche che non possono essere realizzate in altri modi. E anche allora, sono super cauto. I temi figli e i backup di Duplicator fanno sempre parte del mio flusso di lavoro quando tocco i file del tema.

8. Usa FTP per modificare l'HTML di WordPress

FTP sta per File Transfer Protocol. Ti offre l'accesso più diretto per modificare i file del tuo tema WordPress (e anche altri file).

Per usare l'FTP, avrai bisogno di alcune cose:

• Un Client FTP: è un software che ti permette di connetterti al tuo server. Client FTP popolari sono FileZilla, Cyberduck e Transmit.
• Credenziali FTP: le otterrai dal tuo provider di web hosting. Di solito includono il tuo host FTP, nome utente, password e numero di porta.

Se non riesci a trovare le tue credenziali FTP, controlla le impostazioni del tuo account di hosting o contatta il supporto.

Una volta che li hai, apri il tuo client FTP e inserisci le tue credenziali FTP per connetterti al tuo server.

Dopo esserti connesso, vedrai una vista divisa in due parti. Una parte mostra i file sul tuo computer e l'altra parte mostra i file sul tuo server web.

Naviga fino ai file del tuo tema WordPress sul lato server. Il percorso è solitamente simile a /wp-content/themes/nome-del-tuo-tema/.

Una volta che hai eseguito il backup e sei nella tua cartella tema tramite FTP, puoi scaricare i file HTML del tema sul tuo computer o modificarli direttamente.

Fai semplicemente clic destro sul file nel tuo client FTP e scegli Scarica o Visualizza/Modifica.

Ora, modifica il file scaricato sul tuo computer usando un editor di codice. Buoni editor di codice per questo sono VS Code, Sublime Text, Atom o Notepad++.

Apri il file nel tuo editor di codice ed effettua le tue modifiche HTML.

Una volta terminate le aggiunte HTML, salva il file. Fai clic destro sul file nel tuo client FTP e scegli Carica. Questo sovrascriverà il file originale sul tuo server con la tua versione modificata.

FTP è uno strumento potente, ma richiede una certa conoscenza tecnica. Ed è importante essere responsabili quando lo si utilizza. Controlla sempre attentamente le tue modifiche prima di caricarle e tieni sempre pronto un backup.

Domande frequenti (FAQ)

Considerazioni finali

Imparare anche solo un po' di HTML può davvero aprire un nuovo mondo di possibilità con WordPress. Ti dà più controllo, più flessibilità e una comprensione più profonda di come funzionano effettivamente i siti web.

Non aver paura di continuare a imparare e sperimentare. Più giochi con il codice, più ti sentirai a tuo agio.

Esplora le risorse che ho menzionato, prova i diversi modi per aggiungere HTML in WordPress e vedi cosa riesci a creare!

E ricorda, esegui sempre il backup del tuo sito prima di apportare modifiche importanti! Strumenti come Duplicator rendono i backup un gioco da ragazzi e possono salvarti molti grattacapi in futuro.

Mentre sei qui, penso che ti piaceranno queste altre guide di WordPress:

• Dimentica quello che sai sugli editor di codice di WordPress – Prova questo invece
• I 15 migliori strumenti No Code per WordPress
• Scrivi codice in modo più intelligente, non più difficile: strumenti per sviluppatori WordPress per ogni professionista
• Come Usare WordPress CLI: Padroneggia la Riga di Comando
• Quanto tempo ci vuole per imparare WordPress?