[I backup in cloud sono appena diventati più semplici: Duplicator Cloud elimina l'archiviazione di terze parti
Joella Dunn
Joella Dunn
John Turner
John Turner
Vi siete mai chiesti come funzionano i siti web?
Potrebbe sembrare una magia, ma c'è un linguaggio dietro ogni pagina web che vedete. Questo linguaggio si chiama HTML.
Considerate l'HTML come i mattoni di base di Internet.
Anche solo un po' di conoscenza dell'HTML può davvero migliorare il vostro 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 potete aggiungere codice HTML personalizzato al vostro sito WordPress.
Potreste rimanere sorpresi di quanto possa essere facile e utile per un web design efficace!
HTML è l'acronimo di HyperText Markup Language. In pratica, l'HTML è il linguaggio che struttura i contenuti del web. È lo scheletro di una pagina web.
L'HTML utilizza una cosa chiamata "tag". I tag indicano al browser web il significato di ciascuna parte del contenuto.
Ad esempio, i tag possono indicare al browser che un elemento è un titolo, 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. È piuttosto un modo per organizzare le informazioni in modo che i browser possano comprenderle.
WordPress è facilissimo da usare. È possibile creare un intero sito web senza conoscere alcun codice. Quindi, perché preoccuparsi dell'HTML?
L'HTML offre un maggiore controllo sui contenuti. A volte il normale editor di WordPress non è sufficiente.
Supponiamo di voler aggiungere un attributo specifico a un'immagine. O forse volete creare uno stile di elenco davvero unico. L'HTML consente di fare cose del genere.
L'HTML è anche un aiuto per la risoluzione dei problemi.
Avete mai avuto uno strano problema di formattazione in WordPress? Guardare l'HTML può aiutarvi a trovare e risolvere rapidamente il problema. È molto più veloce che indovinare con l'editor visuale.
Inoltre, l'HTML offre flessibilità. Volete aggiungere personalizzazioni avanzate? Come classi personalizzate per lo stile o layout più complessi? L'HTML apre queste possibilità.
Ed eccone uno importante: la sicurezza per il futuro.
WordPress è in continua evoluzione. Ma l'HTML? È un'abilità web fondamentale che sarà sempre utile.
L'ho visto più volte: capire l'HTML vi rende molto più adattabili al mondo del web.
Parliamo degli elementi costitutivi dell'HTML. Si chiamano tag.
I tag sono istruzioni che indicano al browser cosa fare con il contenuto. La maggior parte dei tag è composta da coppie: un tag di apertura e un tag di chiusura.
Per esempio, se si vuole creare un paragrafo, si usa il comando <p> per avviarlo e </p> per porre fine a questa storia.
Vedete la barra nel tag di chiusura? È così che si sa che è la fine.
Vediamo alcuni tag HTML comuni che userete spesso:
I titoli sono per i titoli e i sottotitoli. Avete <h1>, <h2>, <h3>, <h4>, <h5>, e <h6>.
<h1> è l'intestazione più importante (di solito il titolo principale) e <h6> è il meno importante.
I link sono ciò che rende il web, beh, un web! Il <a> crea collegamenti. <a> sta per ancora.
Volete mostrare delle immagini? Il <img> Il tag è vostro amico. <img> è l'abbreviazione di immagine.
Avete bisogno di fare un elenco di cose? L'HTML è la soluzione ideale. Esistono due tipi principali:
<ul> per gli elenchi non ordinati (punti elenco). "ul" sta per "elenco non ordinato".<ol> per gli elenchi ordinati (elenchi numerati). "ol" sta per "elenco ordinato".E all'interno di entrambi <ul> e <ol>, si utilizza <li> per ogni elemento dell'elenco. "li" sta per "elemento dell'elenco".
I tag possono avere anche degli attributi. Gli attributi forniscono informazioni aggiuntive su un tag.
Ad esempio, il <a> ha bisogno di un tag href per dirgli dove collegarsi. In questo modo: <a href="https://example.com">Link text</a>. Il href contiene l'indirizzo del sito web.
E il <img> ha bisogno di un tag src per indicare dove trovare il file dell'immagine. Dovrebbe anche avere un attributo alt per il "testo alternativo", che è importante se l'immagine non può essere caricata o per l'accessibilità.
Come questo: <img src="image.jpg" alt="Descriptive text">.
Ecco un esempio semplicissimo 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>Questo codice creerebbe un'intestazione principale, un paragrafo e un collegamento in una pagina web.
Quando ho iniziato a imparare l'HTML, questi tag di base sono stati il mio punto di partenza. E onestamente? Sono ancora alla base di quasi tutto ciò che faccio online. Questi semplici tag sono potenti!
Quindi, come si può effettivamente utilizzare l'HTML in WordPress? Vediamo alcuni esempi.
Volete rendere un testo in grassetto o in corsivo? L'HTML può farlo.
Utilizzo <strong> e </strong> per rendere il testo in grassetto. Oppure utilizzare <b> e </b> rendono anche il testo in grassetto.
Come questo: <strong>This text is bold</strong>.
Per il corsivo, utilizzare <em> o <i>. Come questo: <em>This text is italic</em>.
Questi tag aiutano a sottolineare parole e frasi nei contenuti.
Abbiamo parlato del <a> tag. È possibile utilizzarlo per collegarsi ad altre pagine del proprio sito o ad altri siti web.
È possibile collegare testo, immagini o persino pulsanti. Tutto sta nell'utilizzare quel <a> con il tag giusto href attributo.
Volete aggiungere un video di YouTube o Vimeo al vostro sito WordPress? La maggior parte delle piattaforme video fornisce codici di incorporamento. Questi codici sono solitamente HTML, spesso utilizzando <iframe> tag.
È sufficiente copiare il codice di incorporamento da YouTube (o dal luogo in cui è ospitato il video) e incollarlo in WordPress. WordPress sa cosa farne.
Avete bisogno di un elenco puntato? Utilizzate <ul> tag. Per un elenco numerato, utilizzare <ol> e <li> tag.
Volete aggiungere una riga per separare le sezioni del vostro contenuto? Il <hr> crea una regola orizzontale. È un modo semplice per spezzare visivamente il testo.
Questi sono solo alcuni esempi, ma si può capire come l'HTML possa essere davvero utile in WordPress. Si tratta di aggiungere un po' di struttura e di funzionalità extra ai contenuti del vostro sito web.
Quindi, state pensando: "Ok, l'HTML sembra utile, ma come faccio a impararlo?". Bella domanda! Per fortuna, ci sono tonnellate di ottime risorse in circolazione.
Ecco alcuni luoghi in cui potete iniziare a imparare l'HTML fin da subito.
MDN Web Docs è una sorta di enciclopedia dello sviluppo web. È realizzata da Mozilla (i responsabili di Firefox) ed è estremamente completa e affidabile.
Se vi piace l'apprendimento interattivo, Codecademy è fantastico. Offre corsi in cui è possibile scrivere codice direttamente nel browser.
W3schools è un sito web popolare per le esercitazioni sullo sviluppo web. Ha tonnellate di esempi e riferimenti all'HTML.
Volete vedere come viene utilizzato l'HTML in modo specifico in WordPress? Consultate la documentazione ufficiale di WordPress per gli sviluppatori. È un po' più tecnica, ma è un'ottima risorsa per acquisire maggiore dimestichezza.
Indipendentemente dalla risorsa scelta, la cosa più importante è la pratica. Davvero. Non si impara l'HTML solo leggendo. Dovete scrivere codice e vedere cosa succede.
Sperimentate! Non abbiate paura di rompere le cose. È così che si impara.
Esistono diversi modi per utilizzare l'HTML in WordPress. Esaminiamoli uno per uno.
Se si utilizza l'editor di blocchi (Gutenberg) in WordPress, è possibile utilizzare un blocco speciale solo per l'HTML. Si chiama blocco HTML personalizzato.
Per utilizzarlo, basta aggiungere un nuovo blocco alla pagina o al post di WordPress. Cercare "HTML" nella barra di ricerca dei blocchi. Verrà visualizzato il blocco HTML personalizzato.
Fare clic su di esso per aggiungerlo al contenuto. È come aggiungere qualsiasi altro blocco. È anche possibile trascinarlo e rilasciarlo dove si desidera.
Una volta aggiunto il blocco, verrà visualizzata una casella in cui è possibile digitare o incollare il codice HTML di WordPress. Inserite il vostro codice HTML proprio lì.
Fare clic su Anteprima per vedere come appare il codice HTML nella pagina senza pubblicarlo.
È molto utile per verificare il codice.
Sapevate che potete modificare qualsiasi blocco di WordPress come HTML? Sì, anche i normali blocchi di paragrafi.
È utile se si desidera apportare piccole modifiche HTML a un blocco già presente.
Per prima cosa, fare clic sul blocco che si desidera modificare. Quindi, cercare i tre puntini nella barra degli strumenti del blocco. Fare clic su di essi.
Si aprirà un menu. In questo menu, premere il pulsante Modifica come HTML.
Improvvisamente, il blocco si trasformerà! Invece del solito editor visuale, si vedrà il codice HTML personalizzato per quel blocco. Ora è possibile modificare direttamente l'HTML.
Questo è ottimo per piccole modifiche. Forse si vuole aggiungere una classe specifica a un paragrafo per poterlo stilizzare in seguito. O forse si deve risolvere un piccolo problema di formattazione che è più facile da gestire in HTML.
Una volta terminata la modifica dell'HTML, si può fare clic su Modifica visuale nella barra degli strumenti del blocco per tornare alla visualizzazione normale dell'editor visuale.
Per coloro che si trovano a proprio agio con il codice, l'editor di blocchi di WordPress ha una visualizzazione completa dell'editor di codice. Questa mostra il codice HTML dell'intero post o pagina.
Per passare all'editor del codice, guardate in alto a destra nella schermata dell'editor di Gutenberg. Anche lì vedrete tre puntini, il menu delle opzioni principali dell'intero editor. Cliccate su questi punti.
In questo menu è presente un'opzione denominata Editor di codice. Fare clic su di essa.
Vedrete i tag e la struttura di tutta la vostra pagina disposti in codice.
Questo editor HTML di WordPress è destinato agli utenti avanzati che preferiscono lavorare direttamente sul codice. Se vi piace la codifica e volete vedere la struttura HTML della vostra pagina, l'editor di codice fa per voi.
Ma attenzione! Se si commettono errori nell'HTML, si può rovinare il layout della pagina. È importante comprendere l'HTML se si intende utilizzare l'Editor del codice in modo intensivo.
Se si desidera tornare al normale editor visuale, basta tornare al menu in alto a destra e fare clic su Editor visuale.
L'editor classico di WordPress ha due schede: Visuale e Testo. La scheda Testo è quella in cui si può entrare nel codice.
Facendo clic su Testo, si vedrà tutto il codice HTML del post. Qui è possibile scrivere o incollare direttamente il codice HTML.
Dopo aver aggiunto o modificato l'HTML, è possibile fare clic sulla scheda Visual per vedere come appare. Verrà mostrata la versione renderizzata dell'HTML.
A volte si desidera aggiungere piccole parti di HTML, CSS o JavaScript al proprio sito WordPress. Forse volete aggiungere un codice di tracciamento personalizzato o uno stile speciale per una certa parte del vostro sito.
È possibile modificare i file del tema per farlo, ma può essere rischioso. Inoltre, se il tema viene aggiornato, le modifiche potrebbero essere sovrascritte.
È qui che entrano in gioco i plugin per gli snippet di codice. Questi plugin consentono di aggiungere snippet di codice direttamente dal cruscotto di WordPress.
Mantengono il codice organizzato e separato dai file del tema. Questo è molto più sicuro e facile da gestire, soprattutto se non si è esperti di codice.
Il mio plugin preferito per gli snippet di codice è WPCode (ex "Insert Headers and Footers"). Questo strumento consente di aggiungere HTML, CSS e JavaScript al vostro sito web.
Inoltre, ci sono tonnellate di snippet già pronti da utilizzare se non si è abituati a codificare.
L'uso di un plugin per gli snippet di codice è molto più sicuro della modifica diretta dei file del tema. È anche più facile tenere traccia del codice personalizzato.
WordPress è dotato di un widget integrato chiamato HTML personalizzato. Per trovarlo, accedete alla vostra dashboard di WordPress e fate clic su Aspetto e poi su Widget.
Vedrete diverse aree per i widget, come Sidebar o Footer. Queste dipendono dal tema di WordPress.
Aggiungere il widget HTML personalizzato nell'area del widget in cui si desidera aggiungere l'HTML.
Digitate o incollate il vostro HTML proprio in questa casella.
Nei widget è possibile aggiungere qualsiasi cosa con l'HTML. Testo personalizzato, immagini, link, persino codici embed: tutto funziona!
Dopo aver aggiunto l'HTML, fare clic sul pulsante Aggiorna nelle impostazioni del widget.
Ecco fatto! Il vostro HTML sarà ora attivo nell'area widget del vostro sito web.
È possibile entrare direttamente nei file del tema di WordPress e modificarne l'HTML. Questo vi dà un grande controllo sulla struttura del vostro sito, ma comporta anche grossi rischi.
Se non si fa attenzione, la modifica diretta dei file del tema può danneggiare il sito web. Un piccolo errore nel codice può causare gravi problemi.
Ok, a parte gli avvertimenti, ecco come modificare i file del tema. Nella dashboard di WordPress, andate su Aspetto e poi su Editor dei file del tema (a volte chiamato semplicemente Editor del tema).
Sul lato destro, viene visualizzato un elenco dei file del tema. Questi file controllano la struttura e il layout del sito web.
Alcuni file comuni che contengono HTML sono:
È possibile modificare l'HTML direttamente nell'Editor file del tema. Basta fare clic su un file per aprirlo, trovare l'HTML che si desidera modificare e apportare le modifiche. Quindi fare clic su Aggiorna file per salvare le modifiche.
Ricordate: Modificate i file dei temi solo se sapete davvero cosa state facendo e utilizzate sempre un tema figlio e un backup.
Nella mia esperienza, modifico i file dei temi solo per personalizzazioni molto specifiche che non possono essere fatte in altri modi. E anche in questo caso, sono molto cauto. I temi figlio e i backup di Duplicator fanno sempre parte del mio flusso di lavoro quando tocco i file dei temi.
FTP è l'acronimo di File Transfer Protocol. Vi offre l'accesso più diretto per modificare i file del vostro tema WordPress (e anche altri file).
Per utilizzare l'FTP, sono necessari alcuni elementi:
Una volta ottenute queste informazioni, aprite il vostro client FTP e inserite le credenziali FTP per connettervi al vostro server.
Dopo la connessione, verrà visualizzata una vista con due lati. Un lato mostra i file sul computer e l'altro i file sul server web.
Navigare fino ai file del tema di WordPress sul lato server. Il percorso è di solito qualcosa come /wp-content/themes/il vostro nome del tema/.
Una volta effettuato il backup e raggiunta la cartella del tema tramite FTP, è possibile scaricare i file HTML del tema sul computer o modificarli direttamente.
È sufficiente fare clic con il tasto destro del mouse sul file nel client FTP e scegliere Scarica o Visualizza/Modifica.
A questo punto, modificare il file scaricato sul computer utilizzando un editor di codice. I migliori editor di codice sono VS Code, Sublime Text, Atom o Notepad++.
Aprire il file nell'editor di codice e apportare le modifiche HTML.
Una volta terminata l'aggiunta dell'HTML, salvare il file. Fare clic con il pulsante destro del mouse sul file nel client FTP e scegliere Carica. In questo modo si sovrascriverà il file originale sul server con la versione modificata.
L'FTP è uno strumento potente, ma richiede un certo know-how tecnico. È importante essere responsabili quando lo si usa. Controllate sempre due volte le modifiche prima di caricarle e tenete sempre pronto un backup.
Aggiungere codice HTML in Elementor utilizzando il widget HTML. Trascinare il widget nel layout, quindi incollare il codice HTML nella casella del contenuto. Questo metodo consente di inserire codice HTML personalizzato in qualsiasi punto della pagina senza modificare i file del tema.
Add HTML code in WordPress headers by inserting it into the <head> section using a plugin like WPCode. Install the plugin and find the Header & Footer tab. Add HTML code into the header code box and save your changes. This avoids editing theme files directly.
Il miglior plugin per l'editor di codice di WordPress è WPCode (ex Insert Headers and Footers). WPCode consente di aggiungere in modo sicuro codice personalizzato al sito senza modificare i file del tema. Supporta l'aggiunta di CSS, HTML, JavaScript e PHP. Inoltre, include la protezione dagli errori e la logica condizionale per un posizionamento mirato del codice.
WordPress è costruito principalmente con PHP, che viene eseguito sul server per generare contenuti dinamici. Utilizza anche HTML, CSS e JavaScript per il rendering e lo stile delle pagine web nel browser. Il PHP gestisce la logica di backend, mentre l'HTML struttura il contenuto visualizzato dagli utenti.
Trovate i modelli HTML di WordPress su mercati come ThemeForest o TemplateMonster. Queste piattaforme offrono modelli HTML progettati professionalmente che possono essere adattati allo sviluppo di WordPress. Scaricateli, personalizzateli e convertiteli utilizzando un page builder o un framework per temi.
Imparare anche solo un po' di HTML può davvero aprire un nuovo mondo di possibilità con WordPress. Vi dà più controllo, più flessibilità e una comprensione più profonda di come funzionano i siti web.
Non abbiate paura di continuare a imparare e sperimentare. Più giocherete con il codice, più vi sentirete a vostro agio.
Esplorate le risorse che ho citato, provate i diversi modi per aggiungere HTML in WordPress e vedete cosa riuscite a creare!
E ricordate, fate sempre un backup del vostro sito prima di fare grandi cambiamenti! Strumenti come Duplicator rendono i backup un gioco da ragazzi e possono risparmiare molti grattacapi in futuro.
Mentre siete qui, penso che vi piaceranno anche queste altre guide su WordPress:
Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Raccomandiamo solo prodotti che riteniamo possano apportare un valore aggiunto ai nostri lettori.
