Formattazione dei post del blog e HTML di base

Formattazione dei post del blog non richiede che tu conosca molto HTML ma aiuta sicuramente!

Questo significa anche imparare alcuni trucchi HTML di base per rendere i tuoi articoli interessanti e con uno stile coerente.

Ora non preoccuparti, non sto dicendo che devi diventare un programmatore o qualcosa del genere per creare post di blog attraenti e disinformati, ma prendere alcune competenze essenziali aiuterà molto.

WordPress è un CMS (Content Management System) e come tale non richiede di codificare tutto da solo.

Ci sono strumenti per questo.

La maggior parte del codice è nascosto per evitare che qualcosa si rompa e hai un editor WYSIWYG (What You See is What You Get) per scrivere e formattare i post e le pagine del blog.

Se hai usato WordPress per un po’ allora saprai che c’è sia una scheda Visual che Text in alto a destra dell’editor di contenuti che ti permette di passare dalla versione stilizzata del tuo post e l’HTML grezzo.

Per i principianti.

Visual = WordPress Visual Editor

Text = WordPress HTML Editor / Raw Text

La maggior parte dei principianti sono sopraffatti e spaventati quando vedono per la prima volta il raw HTML nella scheda text e tornano rapidamente indietro.

Ma questo non deve essere il caso e diventerai un blogger molto migliore prendendoti il tempo per lavorare e modificare comodamente in questa modalità.

Con un po’ di pratica, puoi facilmente padroneggiare alcune delle basi, la sintassi è in realtà abbastanza logica.

Sintassi (definizione di computer): La struttura delle dichiarazioni in un linguaggio informatico.

Cos’è l’HTML?

HTML sta per Hypertext Markup Language ed è il linguaggio di programmazione usato per creare pagine web e applicazioni.

HTML ti permette di creare funzionalità di base che puoi poi personalizzare con i CSS (Cascading Style Sheets).

È stato creato nel 1990 da Tim Berners-Lee, un mio eroe personale a cui si attribuisce anche l’invenzione di internet, ma non ho intenzione di insegnarvi tutto sull’HTML e la sua storia ma se siete dei tipi curiosi, potete continuare a leggere su Wikipedia.

Siamo qui solo per vedere come l’HTML riguarda la scrittura e la modifica dei post e delle pagine di WordPress.

Quando vedete del codice non familiare nella scheda Testo dell’editor di WordPress state guardando l’HTML e in alcuni casi, può includere alcuni stili CSS in linea.

Esempio HTML

<h2>This is a title</h2>

Le parti evidenziate in rosso sono HTML e in questo esempio, vedi un tag di apertura h2 title all’inizio e il tag di chiusura h2 title alla fine.

Nota l’unica differenza è che il tag di chiusura ha un backslash prima del nome del tag? Questo è il modo in cui puoi vedere rapidamente quando il tuo HTML si è aperto e chiuso.

Questo è un grande suggerimento per individuare errori o HTML rotto.

HTML con esempio di CSS in linea

<h2 style="color:red;">This is a title</h2>

Nell’esempio precedente, abbiamo usato lo stesso h2, tuttavia, questa volta abbiamo usato l’HTML per chiamare un pezzo di CSS per cambiare il colore in rosso. Notate che l’unica parte che è effettivamente CSS è evidenziata in rosso.

In realtà, non vedrete molto CSS in linea perché il modo migliore è quello di stilizzare i vostri elementi HTML con file CSS esterni, questo è il modo tipico in cui i temi di WordPress applicano automaticamente gli stili alla pagina del vostro blog.

Personalmente non consiglio di stilizzare il tuo HTML in linea nell’editor di WordPress, ma è importante esserne consapevoli nel caso in cui tu abbia bisogno di modificare o pulire il codice che ha trovato la sua strada da altre fonti come un plugin o dal copia e incolla da un’altra fonte.

Inevitabilmente trarrete beneficio dall’essere in grado di pulire le cose quando i gremlins (non è un termine tecnico) trovano la loro strada nel vostro contenuto.

Quindi vediamo come aggiungere HTML a post e post e pagine di WordPress e cosa dovete sapere.

WordPress Basic HTML Essentials

Quando stai aggiungendo HTML per dare stile al tuo contenuto devi ricordarti di avvolgere il tuo contenuto con i relativi tag di apertura e chiusura.

Esempio:

<p>Paragraphs should be wrapped with p tags</p>

Ci sono esempi di elementi HTML utili che non richiedono un tag di chiusura perché sono auto-chiudenti.

Un esempio è l’interruzione di linea <br> che funziona senza un tag di chiusura, questo perché le interruzioni di linea non contengono e non possono contenere contenuto all’interno.

Tag di intestazione & Sub Headings

Ci sono vari tipi di intestazione su un post di WordPress, prima, avete l’intestazione del titolo del post, questo è un <h1> e poi avete la possibilità di aggiungere titoli al vostro contenuto per aiutarvi a raggruppare i vostri pensieri.

Queste vanno da h1 (Heading 1) fino a h6 (Heading 6) e il tuo tema in genere li stilizza per essere di dimensioni appropriate.

Siccome il titolo della tua pagina o del tuo post è automaticamente un h1, vuoi evitare di usarlo nel tuo contenuto in quanto qualsiasi altra istanza competerà con il titolo principale che è il nome del tuo post.

Invece, seguite il processo di ordinamento semanticamente corretto e la prima volta che avete bisogno di usare un titolo di sezione scendete al titolo h2.

Sebbene tu possa facilmente impostarli usando il menu a tendina in alto a sinistra dell’editor WYSIWYG del post, è utile sapere come funzionano in formato HTML in modo da poter correggere eventuali errori.

Ecco alcuni esempi

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Spero tu stia iniziando a vedere un modello con la sintassi HTML.

Tutti gli elementi HTML iniziano con un’apertura <

Chiudono anche con una chiusura >

Gli elementi di apertura possono semplicemente contenere il nome dell’elemento.

I tag di chiusura contengono una barra in avanti dopo l’apertura < e prima del nome dell’elemento HTML che stanno chiudendo.

Avere un po’ più di familiarità con quanto sopra ti farà fare passi da gigante rispetto alla maggior parte dei blogger che usano WordPress.

Gold o Italico

Quando vuoi enfatizzare un punto e portare l’attenzione su certe parole potresti voler usare il grassetto o il corsivo per farle risaltare.

Sicuramente preferisco questo approccio a TUTTO CAPS, che per me risulta come urlare.

L’HTML per il grassetto è <strong> e per il corsivo è <em>.

Fatto divertente: Strong è facile da ricordare per rendere qualcosa in grassetto, ma perché l’elemento italics usa em? Em è un’abbreviazione di enfasi. Questo potrebbe aiutare ad attaccarlo.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

Inoltre, è possibile utilizzare il WYSIWYG di WordPress o la scorciatoia da tastiera CTRL + B per il grassetto e CTRL + I per il corsivo dopo aver evidenziato il testo che si desidera modificare.

Per un elenco completo di scorciatoie da tastiera WordPress e altri metodi di formattazione, vai qui.

Ci sono alcune regole su come dovreste e non dovreste usarli, tra cui tenerli reciprocamente esclusivi, riservarli per frasi brevi e usarli con parsimonia.

Practical Typography ha un grande articolo che spiega l’importanza di queste regole.

Se stai scrivendo un testo per coinvolgere veramente le persone, come il testo di vendita, allora queste regole possono essere piegate, ma non infrante.

Enfasi

Ricorda, se tutto è enfatizzato, allora niente è enfatizzato!

Liste – Ordinate & Non ordinate

Ci sono due tipi di liste che puoi aggiungere usando l’HTML che sono anche supportate dal WYSIWYG di WordPress.

Queste sono:

Liste ordinate – <ol>

Le liste ordinate vengono visualizzate come una serie di elementi numerati. Questo è utile quando si scrive una lista dove l’ordine è importante.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Il codice precedente si trasforma in:

1. Item 1
2. Item 2
3. Item 3

Liste non ordinate – <ul>

Le liste non ordinate sono essenzialmente liste puntate.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

E questo si trasforma nell’elenco puntato sottostante.

• Voce 1
• Voce 2
• Voce 3

Sappiamo tutti quanto sono utili le liste e aiutano anche a spezzare il contenuto e renderlo più interessante.

Una differenza chiave che noterai qui è che ci sono singoli elementi della lista <li> e sono avvolti nella loro interezza con un <ol> o <ul> wrapper.

Questo è importante da sapere, perché se mancano i <ol> o <ul> wrapping gli elementi della lista non saranno resi.

Immagini

Un altro aspetto importante della formattazione di un post di blog o di qualsiasi pagina con WordPress è l’uso delle immagini e non dovreste avere problemi a trovare alcune foto interessanti che potete ottenere da Yahoo images e altri siti web di immagini senza copyright. Alcune di queste opzioni sono a pagamento, ma molte di esse sono gratuite a condizione di dare credito con una menzione della fonte e un link.

Un piccolo prezzo da pagare per avere immagini professionali sul tuo sito web o blog.

Un’immagine vale più di mille parole, come si dice, e forniscono anche ai tuoi lettori stimoli visivi e pause per aiutare a rompere il tuo contenuto in pezzi digeribili.

Questo aiuta a mantenere i tuoi lettori impegnati e mentre non hai bisogno di codificare le immagini da solo capire la sintassi è utile.

Qui c’è un esempio di codice immagine e come apparirà quando guardi la scheda Testo del tuo editor.

<img src="https://mazepress.com/image.png">

Un’immagine non richiede un tag di chiusura perché tutte le informazioni necessarie sono contenute nelle parentesi di apertura e di chiusura dell’elemento HTML. Il src chiama semplicemente la posizione dell’URL.

WordPress permette di far fluttuare le immagini a sinistra, a destra o di centrarle. Se lo fai e controlli il codice nella scheda Text vedrai che sono state aggiunte delle classi che vengono usate per dare uno stile alle immagini di conseguenza.

Questo è un esempio di dove il CSS esterno viene usato per applicare stili diversi alle diverse immagini. Utile da sapere!

Importante: Prima di aggiungere immagini ai tuoi post e pagine assicurati che siano ottimizzate per la velocità e i motori di ricerca.

Embed

Inevitabilmente vorrai usare codici embed da siti esterni.

Un esempio è quando vuoi aggiungere un video da YouTube o Vimeo, vai su share e ti dà un lungo codice che puoi copiare.

La cosa principale da ricordare è che non puoi incollare HTML o qualsiasi altro codice sulla scheda visuale dell’editor di contenuti. In questo modo il codice verrà stravolto e reso inutile quando si preme save.

Assicuratevi di andare nella scheda di testo e poi incollatelo dove volete che appaia.

Di seguito un esempio di codice embed da YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Mentre WordPress vi permette di incollare semplicemente un URL di YouTube nel vostro post per visualizzarlo come un video, questo potrebbe non darvi il pieno controllo sulle dimensioni del video e sulle altre impostazioni di embed.

Per questo motivo, e perché sono della vecchia scuola, uso ancora il codice iframe embed.

La maggior parte dei siti web che offrono codici embed non sono supportati nativamente da WordPress e quindi avrete ancora bisogno di essere a conoscenza dei codici embed, iframes e come funzionano per essere in grado di aggiungere multimedia ai vostri post.

Shortcodes

Shortcodes non sono HTML. In effetti, non sono nemmeno un linguaggio di programmazione, sono una funzione nativa di WordPress che permette agli sviluppatori di plugin e temi di creare modi semplici per voi e me di aggiungere elementi alle nostre pagine web e post.

L’esempio più semplice che si trova praticamente su ogni blog è un modulo di contatto, ma ci sono centinaia se non migliaia di potenziali usi per gli shortcode che includono la possibilità di aggiungere:

• Tabelle
• Gallerie
• Pacchetti di prezzi
• Video
• Lead Magnets / Email Opt-in forms
• Podcast Episodes

Ecco uno shortcode per un modulo di contatto generato dal plugin Contact Form 7, uno dei nostri plugin raccomandati che installiamo sul 90% dei nostri siti e blog.

Nota: ho dovuto aggiungere degli spazi dopo le parentesi di apertura e prima di quelle di chiusura per impedire che il modulo di contatto venisse effettivamente visualizzato, quindi immaginatelo senza gli spazi.

Nota che la sintassi per un codice breve è diversa. Iniziano con una parentesi di apertura invece di < e >.

Sono poi formattati dallo sviluppatore di shortcode per renderti facile regolare e cambiare le impostazioni essenziali.

Quando la pagina web viene caricata, questo modulo di contatto in realtà carica circa 20 righe di HTML disordinato, quindi è molto più facile per te quando puoi accedere a uno shortcode.

L’unico avvertimento è che non vuoi usare troppo gli shortcode perché rallentano le tue pagine web.

Sono utili da conoscere e possono rendere il processo di modifica del tuo post molto meno macchinoso quando non devi usare grandi quantità di HTML che non capisci e devi lavorare con cautela.

Consigli vari per la formattazione

Ci sono diversi altri consigli che consiglio ai nuovi studenti di WordPress di tenere a mente e che coprirò brevemente.

Questi includono:

• Non aggiungere interruzioni di riga non necessarie. Questo significa cercare di non usare il tag HTML <br> ed evitare di premere due volte invio tra paragrafi e sezioni a meno che non sia assolutamente necessario. Rende i tuoi articoli disordinati e sei destinato a creare incongruenze.
• Non aggiungere famiglie di caratteri, dimensioni e colori specifici per la pagina – Anche questo rende i tuoi post orrendi e come se fossero stati creati nel 1995. Potreste pensare che un titolo verde di dimensioni personalizzate con un font unico attiri l’attenzione, quando in realtà si nota come incoerente e non professionale. Il tuo tema dovrebbe dettare questi stili.
• Non aggiungere mai codice HTML o embed alla scheda visiva – Questo può portare a risultati inaspettati, comportare un sacco di pulizia o rompere la tua pagina interamente.
• Non caricare mai video su WordPress – Il tuo sito web di hosting non è costruito per fornire contenuti video. Fortunatamente, YouTube e Vimeo forniscono comunque un hosting video super veloce e gratuito al 100%. Questo è il motivo per cui è meglio incorporare i video da YouTube anche quando sono tuoi.

Niente di troppo complicato ma vedo spesso persone che fanno questi errori e si complicano la vita.

Ma presto, le cose potrebbero essere diverse, molto diverse in effetti!

Gutenberg, Il futuro del blogging?

Gutenberg è un nuovo editor di contenuti costruito da zero da WordPress e arriverà molto presto in un’installazione vicino a te.

È il futuro del blogging? Chi lo sa? Ma è sicuramente il futuro di WordPress, quindi è il momento di seguirlo.

Gutenberg è una bestia diversa.

Se avete mai usato Medium.com per il blogging, quando proverete per la prima volta Gutenberg vi sembrerà stranamente simile.

A mio parere, questa è una buona cosa, l’editor di contenuti senza distrazioni di Medium è meravigliosamente facile da usare e vedere WP prendere nota di questo è positivo per tutte le persone coinvolte nella gestione di blog e siti web che girano su WP.

L’editor Gutenberg è anche modulare e vi permette di trascinare e rilasciare blocchi nel vostro contenuto che hanno ciascuno uno scopo diverso.

Questo è simile a come i plugin page builder e alcuni temi attualmente forniscono questo tipo di soluzione drag and drop, ma ora queste caratteristiche stanno arrivando su WordPress di default.

Se c’è un aspetto di WordPress che non si è evoluto molto nel corso degli anni è stato l’editor TinyMCE quindi accolgo questa innovazione a braccia aperte.

Se stai lottando con la formattazione dei post del blog con l’attuale editor, puoi già provare Gutenberg scaricandolo e installandolo andando su plugin nella tua dashboard e cercando “Gutenberg”.

Formattazione dei post del blog &Libro finale HTML di base

Se passi un po’ di tempo a fare pratica con quanto sopra, otterrai un controllo molto maggiore sul tuo contenuto e su come viene presentato.

Spero che ora ti senta un po’ più a tuo agio con la formattazione dei post del blog e l’uso dell’HTML di base.

Questa abilità può farti risparmiare un sacco di tempo, denaro e grattacapi quando la formattazione del contenuto va male o non rende correttamente.

Mentre le basi di cui sopra sono sufficienti per la maggior parte dei blogger e dei proprietari di siti web WordPress, se siete curiosi di saperne di più ci sono alcuni ottimi siti web gratuiti dove è possibile imparare l’HTML tra cui CodeAcademy e w3Schools.

Ora, andate a rendere il vostro contenuto carino! 🙂

Se avete trovato questo articolo utile, considerate di controllare alcune delle nostre altre utili guide di blogging come la nostra Blog Post Checklist: Essentials Guide o How to Repurpose Content e se sei un fan di questo tipo di guide, iscriviti alla mia newsletter e condividerò i miei migliori contenuti e scoperte con te via email.