Articles

MarkoSaric

Questo articolo è uno sportello unico per i tuoi codici HTML WordPress. Ecco l’elenco dei tag e dei codici HTML di WordPress più comunemente utilizzati per creare contenuti. Salva l’elenco e usalo come riferimento quando componi i post e le pagine del tuo blog WordPress.

WordPress HTML nell’editor Gutenberg

WordPress è una delle migliori piattaforme di blogging. Milioni di persone e marchi lo usano per creare siti di grande ricerca.

Questa guida è valida sia per la versione self-hosted che per la versione hosted di WordPress. Vedere la differenza tra WordPress.com oppure WordPress.org.

WordPress 5.0 con il nuovo editor Gutenberg rilasciato a dicembre 2018 ha notevolmente migliorato e facilitato il modo in cui lavori con i tag HTML all’interno dei post e delle pagine del tuo blog.

Come si visualizza il codice HTML nei post modificati da Gutenberg? È sufficiente aggiungere il blocco “Codice” e digitare il codice. Mostrerà il codice ai tuoi visitatori.

Come si modificano i post di Gutenberg usando HTML? È sufficiente fare clic su “Modifica come HTML” nel menu delle opzioni del blocco particolare che si desidera modificare.

Puoi anche aggiungere il blocco “Classic” o il plugin “Classic Editor” per avere l’ex editor WYSIWYG che descrivo più in basso in questo post.

Editor classico: qual è la differenza tra Visual e Text?

Hai due opzioni di modifica quando componi un post sul blog o una pagina nel classico editor di WordPress. È possibile utilizzare la visualizzazione “Visiva” predefinita o la modalità” Testo”.

Nella modalità visiva, puoi vedere il tuo contenuto così com’è. La modalità visiva si chiama WYSIWYG che sta per esattamente ciò che la modalità visiva fa: quello che vedi è quello che ottieni.

Vedi il tuo contenuto nel modo in cui i tuoi visitatori lo vedranno nei loro browser e hai semplici pulsanti per aiutarti a modificare. La maggior parte delle persone usa questo editor di post “visivo” in WordPress quando crea i propri contenuti.

Nella modalità testo, vengono visualizzati il codice e i tag HTML. Questa modalità di testo ti consente di aggiungere qualsiasi codice HTML a qualsiasi post o pagina del tuo blog. L’editor di testo basato su HTML sembra più spaventoso e non è così popolare tra i principianti.

Ma cosa succede se sai come codificare o vuoi un po ‘ più di controllo sul layout e sulla struttura durante la creazione dei tuoi post o pagine? Dovresti usare l’editor “Testo”.

Come modificare HTML in WordPress Classic Editor?

Quindi, come si arriva all’editor di testo HTML? Nel tuo post di amministrazione di WordPress o nella sezione di scrittura della pagina, fai clic sulla scheda “Testo”. È nell’editor di testo che aggiungi e modifichi tutti i tuoi tag HTML.

Come aggiungere codice HTML a un post o una pagina di WordPress?

Puoi semplicemente scrivere o incollare qualsiasi codice HTML direttamente nel tuo editor di “Testo” di WordPress. Provalo con uno dei tag più comunemente usati dalla mia lista qui sotto.

Copialo qui sul sito, incollalo nell’editor di testo e “visualizza in anteprima” il tuo post o pagina per vedere come lo vedranno i tuoi visitatori.

A volte capita che il codice venga rimosso quando si passa da modalità di testo a modalità visive.

Fai attenzione e controlla che questo non ti sia successo. Oppure prova ad attenersi all’editor di testo solo se prevedi di scrivere codice per non incontrare questo problema.

Per chi è a proprio agio con la codifica, puoi persino disabilitare l’editor “visivo”. Vai in ” Utenti “nel menu di navigazione di WordPress, fai clic su” Il tuo profilo “e seleziona”Disabilita l’editor visivo durante la scrittura”.

Copia e incolla tra Google Docs, Microsoft Word e WordPress

WordPress 5.0 release ha reso semplice e facile copiare qualsiasi contenuto da Google Docs o Microsoft Word e incollarlo nei tuoi post e pagine di WordPress.

Questo non è stato sempre facile. Quando si lavora con HTML nell’editor classico si possono notare alcuni caratteri senza senso a volte.

Questo può accadere se si copia/incolla da Microsoft Word in WordPress. Una fonte utile quando si incolla il codice HTML da Word nell’editor di WordPress è postabile.

Copia / incolla il tuo HTML da Word (o un’altra fonte) nello strumento per ottenere una versione amichevole e pulita di WordPress del codice che puoi quindi inserire nel tuo contenuto.

Come faccio a visualizzare i codici HTML sui miei post del blog come testo normale?

Che ne dici se volessi inserire e visualizzare tag HTML e altri codici all’interno del tuo post per consentire ai tuoi visitatori di visualizzarli come un testo normale?

Un po ‘ come sto facendo qui nel mio articolo? Usi ancora l’editor di testo ma avvolgi il tuo codice in questo modo:

<code><div class="header"></code> 

Plugin di sintassi HTML di WordPress per una visualizzazione più bella del codice

Ci sono alcuni plugin WordPress che possono aiutarti con questo processo e ti permettono anche di modificare il layout e il modo in cui il codice viene presentato sul tuo blog per i tuoi visitatori.

Raccomando i seguenti due. SyntaxHighlighter Evolved è l’opzione più popolare, mentre Pastacode è quello che funziona meglio per coloro che utilizzano Page Builder quando si progetta un blog.

Più comunemente utilizzato WordPress codici HTML e tag

Inserire un’immagine

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

Rendere l’immagine cliccabile per una nuova destinazione

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Inserire un link

Notare che il testo di ancoraggio è la parte visibile del link. È la parola o la frase su cui i visitatori faranno clic per accedere alla pagina a cui si sta collegando.

<a href="Destination-URL">Anchor text</a>

Crea il link nofollow

Per scopi SEO potrebbe essere necessario creare alcuni dei tuoi link nofollow. Ecco come:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

Fai aprire il collegamento in una nuova finestra del browser

<a href="Destination-URL" target="_blank">Anchor text</a>

Collega a una sezione specifica su una pagina lunga

Questi sono chiamati salti di pagina. I visitatori possono fare clic su un link e ottenere spostato da qualche parte più in basso o in alto l’articolo.

Ciò è particolarmente utile per quelle guide più lunghe che si desidera dividere in diversi capitoli utilizzando il sommario.

La prima parte della creazione di un salto di pagina consiste nell’assegnare una sezione (o una destinazione) a cui si desidera collegarsi.

Inserisci questo codice in qualsiasi sezione della tua pagina a cui vuoi collegarti. La seconda parte è quella di collegare effettivamente a quella sezione assegnata dalla tua introduzione o dal tuo sommario.

<a></a><a href="#Specific-section">Anchor text</a>

Funziona anche se vuoi collegarti a una sezione specifica della tua pagina da un altro articolo sul tuo blog. È possibile inserire un collegamento a questa destinazione: https://yourblog.com/yourpost/#Specific-section.

Questo è anche il modo in cui funzionano i collegamenti “torna all’inizio”. Assegna un nome di sezione alla parte superiore del tuo post e includi un pulsante “vai in alto” nella parte inferiore del tuo post che collega alla sezione superiore.

Creare prominente titoli e sottotitoli

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

Inserire un’interruzione di riga

<p>This is<br>a paragraph</br> with a line break</p>

Creare un nuovo paragrafo

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

Fare un punto della lista

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

Fare un elenco numerato

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

Evidenziare il testo in un post con il giallo (o di qualsiasi altro colore) sfondo

<span style="background-color:yellow;">Your text</span>

Assegnare il numero di una voce dell’elenco numerato

<ol start="7"><li>List item number 7</li></ol>

Fare una lettere list

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

Fare un Romano elenco dei numeri di

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

Centro il tuo testo

<center>to be centered</center>

Rendere il testo in grassetto

<strong>to be bold</strong>

Rendere il vostro testo in corsivo

<em>to be italic</em>

Cambia il colore del testo

<span style="color: #000000;">Your text</span>

Inserisci un blockquote

<blockquote>Your quote</blockquote>

Crea una tabella

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.