Gli autori di WordPress hanno la possibilità di creare pagine e post in un editor visivo o un editor di testo. Mentre l’editor visivo fa un lavoro ragionevolmente buono con le sue opzioni della barra degli strumenti e l’ambiente di editing facile, l’uso dell’editor di testo consente la massima flessibilità su come organizzare i contenuti.

Lascia che ti spieghi non solo perché vorresti usare l’editor di testo (al posto dell’editor visivo), ma quanto può essere facile da usare.

Perché si potrebbe preferire l’editor di testo?

• I tuoi contenuti avranno più senso per i tuoi lettori e motori di ricerca.
• Hai solo bisogno di conoscere alcuni tag HTML per rendere l’editor di testo molto utile.
• È possibile applicare le proprietà di stile CSS direttamente al codice HTML.

Cosa succede quando si utilizza l’editor visivo?

Quando aggiungi copia, media o link al tuo editor visivo, aggiungi davvero HTML alla tua pagina o al tuo post. Tutto si svolge sotto il cofano.

Non sei sicuro di cosa intendo? Prova questo.

Aggiungi qualche copia nell’editor visivo. Quindi selezionare la scheda Testo. Quello che guarderai è HTML. Proprio come con l’editor visivo, è possibile modificare il codice HTML direttamente con l’editor di testo.

In effetti, puoi fare molto di più con l’editor di testo che con l’editor visivo. Ciò rende il lavoro in modalità testo non solo più produttivo ma anche più soddisfacente. Sarai in grado di contrassegnare in modo più accurato i tuoi contenuti a beneficio dei tuoi lettori e aumentare i tuoi sforzi SEO.

HTML è quanto di più semplice come si arriva. Ogni pagina web, compresi quelli generati da WordPress, usarlo.

Imparare l’HTML avrà benefici ben oltre l’utilizzo con WordPress!

Che cos’è l’HTML?

Conosciuto come la lingua franca del web, HyperText Markup Language (HTML) è un sistema che permette agli autori di assegnare significato al contenuto. Utilizzando gli elementi HTML (meglio noti come tag) è possibile definire il contenuto come paragrafi, intestazioni, elenchi, collegamenti e altre strutture.

HTML è molto simile alla grammatica.

Non ha nulla a che fare con l’aspetto di una pagina web o con lo stile. La questione della progettazione di pagine web – layout, tipografia e colore-è ripresa con CSS (Cascading Style Sheets), il linguaggio dello stile di web design.

HTML è stato sviluppato dal World Wide Web Consortium (W3C). La versione più recente è HTML5.

I tag che è più probabile utilizzare

HTML è un sistema di markup containerizzato. Per ogni tag aperto c’è un tag di chiusura corrispondente.

Ad esempio, per il contenuto più importante di una pagina o di una sezione di una pagina, utilizzare un tag di Intestazione 1 come questo.

<h1>Tutto Su HTML</h1>
Il tag di apertura è<h1>e il contenitore è chiuso con</h1>

allo stesso modo, come per il paragrafo è segnato:

<p>Diversi anni fa, un client e un buon amico mi ha suggerito di imparare WordPress. Al momento ero contro qualsiasi tipo di CMS. Non sapevo che sarei venuto ad amarlo e insegnarlo a molte persone nelle aule di New York City e via webinar.< / p>

Tutto ciò che devi fare è scrivere il tuo contenuto nell’editor di testo, aggiungendo i tuoi tag mentre vai o dopo aver digitato la copia.

Ecco una spiegazione dei tag più comuni che utilizzerai quando scrivi HTML. Sono l’intestazione, l’elenco, il collegamento, il raggruppamento e alcuni tag vari.

TAG INTESTAZIONE

<h1></h1>

<h2></h2>

<h3></h3>

• Ci sono anche tag di intestazione h4, h5 e h6 che in pratica sono usati raramente.
• Non utilizzare mai un tag di intestazione allo scopo di modificare la dimensione del carattere.

ELENCO TAG

È possibile creare 3 tipi di elenchi con HTML. I 2 più popolari sono elenchi ordinati e non ordinati.

Un elenco non ordinato viene utilizzato quando l’ordine degli articoli non è importante.

<ul>

<li>fiori</li>

<li>verdure</li>

<li>alberi</li>

</ul>

• fiori
• verdure
• alberi

Un elenco ordinato viene utilizzato quando l’ordine degli elementi è rilevante.

<ol>

<li>California</li>

<li>Texas</li>

<li>Florida</li>

</ol>

1. California
2. Texas
3. Florida

(In questo esempio, l’ordine è rilevante e determinato da la più grande popolazione in stati uniti.)

NOTA: gli elenchi possono anche essere nidificati per creare una gerarchia di elementi dell’elenco. Questo è difficile da fare quando si utilizza l’editor visivo.

LINK TAG

È possibile trasformare il testo o un’immagine in un link avvolgendo il testo o l’immagine all’interno di qualsiasi tag di ancoraggio (link). Mentre la sintassi per la creazione di un collegamento è sempre la stessa (<a href=”url”>link text</a>), ci sono 2 modi molto comuni per farlo.

Per un link a una pagina di WordPress, utilizzare:

<a href=”http://domain.com/this-is-the-page-title”>link di una pagina di WordPress</a>

Per un link a qualsiasi pagina o risorsa, non solo una pagina di WordPress, utilizzare:

<a href=”http://domain.com/about.html”>link di una pagina HTML</a>

NOTA: in realtà C’è una terza via. È possibile utilizzare il modo speciale WordPress crea collegamenti con la seguente sintassi:

<a href = ” indice.php?page_id=356″>link a una pagina del tuo sito< / a

In questo caso, dovrai conoscere la pagina o l’id post della pagina a cui stai collegando sul tuo sito. (Ogni pagina o post ha un numero ID univoco).

RAGGRUPPAMENTO DI TAG

Tecnicamente, non esiste un “raggruppamento di tag”, ma è il modo migliore per descrivere un insieme di tag HTML che contengono altri elementi. Lo scopo di questi tag è descrivere più accuratamente il significato dei tuoi contenuti.

Per esempio, il <intestazione> tag può essere utilizzato per definire la parte della pagina che contiene le principali informazioni di questo tipo:

<intestazione>

<h1>Leader nella Riga di Intestazione</h1>

<img src=”url del file di immagine”>

<p>Un paragrafo di informazioni che seguono il titolo e l’immagine che logicamente tiene insieme come un gruppo di informazioni.< / p>

</header>

Ecco alcuni tag di raggruppamento molto comuni

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

ALTRI TAG
Oltre al tag, troverai questi tag molto utili quando lavori con l’editor di testo.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

Mentre quei tag si arriva un lungo cammino, qui ci sono alcune risorse per aiutarvi.

● Hai solo bisogno di 10 tag HTML(tutorial)
● Riferimento elemento HTML in ordine alfa
● Riferimento elemento HTML

Le regole

La bellezza di HTML è che ci sono solo alcune regole da seguire e sono facili da ricordare.

* HTML è Case Insensitive

maiuscolo, minuscolo o misto case – scrivi HTML come preferisci. La pratica comune è minuscola.

* Per ogni tag aperto deve esserci un tag chiuso

Ci sono delle eccezioni a questo, ma per renderlo davvero facile, prendi l’abitudine di chiudere tutti i tag aperti.

* I tag sono chiusi nell’ordine inverso in cui vengono aperti all’interno di un blocco

Questo può essere un po ‘ difficile da capire, quindi ecco un esempio.

<p>Ecco un paragrafo <strong>con <a href=”url here”>un link</a></strong> all’interno e parte del testo è enfatizzato.< / p>

Avviso l’ordine: < p > < strong > < a >….</a>< / strong > < / p>

* Alcuni elementi non hanno un tag di chiusura

Tag come < br > e < img > non hanno tag di chiusura in quanto non vi è alcun motivo per uno.

* Usa HTML correttamente e NON per modellare la tua pagina

Ad esempio, non usare i tag < br> quando hai una lista. Oppure non utilizzare <tabella> tag per creare una griglia per il layout.

La barra degli strumenti dell’editor di testo

Poiché trovo efficiente scrivere codice nell’editor di testo, generalmente non uso la barra degli strumenti. Tuttavia, se stai iniziando con HTML, potresti trovare alcuni degli strumenti utili come un modo per insegnare a te stesso un po ‘ di HTML. In definitiva, vi renderete conto che ci sono più tag che è possibile utilizzare per contrassegnare correttamente il contenuto di quello che permette la barra degli strumenti.

Plugin HTML

Prima o poi noterai che se crei un paragrafo nell’Editor visivo, non vedrai un tag < p > che avvolge la tua copia quando la vedi nell’Editor di testo. Non lasciare che ti infastidisca. WordPress genererà comunque un tag< p > quando la copia viene visualizzata sulla tua pagina.

Se hai questo o altri problemi con il tuo codice, potresti voler usare questi plugin.

Modifica sempre in HTML

Ciò garantisce che quando si va a creare o modificare la pagina o pubblicare contenuti, l’editor si aprirà sempre come editor di testo e non come editor visivo. Questo può essere molto utile dal momento che WordPress può rimuovere i tag in alcune circostanze in cui viene utilizzato l’editor visivo.

Conserva il markup dell’editor HTML Plus

Se hai problemi con l’eliminazione dei tag, questa potrebbe essere la tua soluzione.

HTML Editor Syntax Highlighter

Questo è un meraviglioso plugin che trasforma l’editor di testo blando in un colore codificato cornucopia. Può anche passare a uno sfondo nero e caratteri più grandi. È meglio usare questo plugin con l’opzione a schermo intero.

NOTA: non ho testato due o più di questi plugin allo stesso tempo, quindi potrebbero esistere incompatibilità.

Come i codici brevi si inseriscono nell’immagine

I codici brevi sono ciò che molti plugin usano per aggiungere un modulo, impostare colonne o aggiungere altre funzionalità a una pagina o post. È un modo semplice per aggiungere codice come HTML, javascript, CSS e PHP senza dover sapere nulla di quelle lingue.

Usa i codici brevi nell’editor di testo proprio come faresti nell’editor visivo.

Per chi non lo sapesse, i codici brevi possono sembrare HTML, ma non lo sono.

puoi incollare in un shortcode in questo modo, se si sta aggiungendo un modulo di contatto, per esempio, con il popolare plugin Contact Form 7,

oppure è possibile utilizzare questo per un plugin,

Contenuti per il lato sinistro della colonna

Contenuti per il lato destro della colonna

Che crea due colonne in una pagina.

Questo shortcode assomiglia a HTML con un tag apri e chiudi, ma non è

Aggiunta di stile CSS Utilizzando l’editor di testo

È possibile fornire proprietà di stile CSS al contenuto aggiunto nell’editor di testo. Questo non può essere fatto con l’editor visivo predefinito.

Con l’editor di testo può essere fatto in 2 modi.

Un modo è aggiungere un id o un attributo di classe a un elemento HTML come in questo esempio:

<p id = “lead” > Questo è il paragrafo principale nel mio post.< / p>

Quindi, nel tuo stile.file css si aggiungerebbero le proprietà di stile per # lead. Forse qualcosa del genere:

#lead

{font-weight:bold;

text-align: center;

color:#f00;}

Il secondo modo è aggiungere uno stile in linea. (Tuttavia, l’approccio migliore è mantenere separati HTML e CSS come nello scenario precedente.) Puoi aggiungere uno stile in linea come questo:

<p style= “font-family: arial, helvetica, sans-serif” > Il font per questo paragrafo è Arial.< / p>

NOTA: questo sovrascriverebbe qualsiasi regola di stile font-family per questo paragrafo che potrebbe essere presente in un file esterno o all’interno del contenitore< head > della pagina.

Conclusione

L’editor di testo ti darà il controllo totale su come vuoi formattare la tua pagina o pubblicare contenuti. È possibile utilizzare qualsiasi tag HTML, non solo quelli nella barra degli strumenti dell’editor di testo. Il risultato sarà contenuto che è più facile da leggere e capire da persone e spider dei motori di ricerca. Si può prendere un po ‘ di tempo per abituarsi a scrivere HTML, ma alla fine, lo troverete molto soddisfacente.

Autore Bio

Bud Kraus [email protected] è un istruttore veterano WordPress a New York City e insegna WordPress per individui e gruppi tramite webinar. Lavora anche su siti per piccole imprese. http://joyofwp.com