Los autores de WordPress tienen la opción de crear páginas y publicaciones en un Editor Visual o un Editor de texto. Mientras que el Editor Visual hace un trabajo razonablemente bueno con sus opciones de barra de herramientas y un entorno de edición fácil, el uso del Editor de texto permite la máxima flexibilidad sobre cómo organizar el contenido.

Permítanme explicar no solo por qué querría usar el Editor de texto (en lugar del Editor Visual), sino también lo fácil que puede ser de usar.

¿Por qué preferirías el Editor de texto?

• Tu contenido tendrá más sentido para tus lectores y motores de búsqueda.
• Solo necesita conocer algunas etiquetas HTML para que el Editor de texto sea muy útil.
• Puede aplicar propiedades de estilo CSS directamente a su código HTML.

¿Qué Sucede Cuando Se Utiliza El Editor Visual?

Cuando agregas texto, contenido multimedia o enlaces a tu Editor visual, realmente estás agregando HTML a tu página o publicación. Todo tiene lugar bajo el capó.

¿No está seguro de lo que quiero decir? Prueba esto.

Añada alguna copia en el Editor visual. A continuación, seleccione la pestaña Texto. Lo que verás es HTML. Al igual que con el Editor Visual, puede editar su código HTML directamente con el Editor de texto.

De hecho, puede hacer mucho más con el Editor de texto que con el Editor Visual. Esto hace que trabajar en modo texto no solo sea más productivo, sino también más satisfactorio. Podrás marcar tu contenido con mayor precisión, lo que beneficiará a tus lectores y aumentará tus esfuerzos de SEO.

HTML es casi lo más sencillo posible. Todas las páginas web, incluidas las generadas por WordPress, las usan.

¡Aprender HTML tendrá beneficios mucho más allá de usarlo con WordPress!

¿Qué es HTML?

Conocido como la lingua franca de la web, el Lenguaje de marcado de hipertexto (HTML) es un sistema que permite a los autores asignar significado al contenido. Utilizando elementos HTML (más conocidos como etiquetas), puede definir el contenido como párrafos, encabezados, listas, enlaces y otras estructuras.

HTML es muy parecido a la gramática.

NO tiene NADA que ver con el aspecto o el estilo de una página web. La cuestión del diseño de páginas web – diseño, tipografía y color – se aborda con CSS (Hojas de estilo en cascada), el lenguaje del estilo de diseño web.

HTML está siendo desarrollado por el World Wide Web Consortium (W3C). La versión más actual es HTML5.

Las Etiquetas Que Es Más probable Que Use

HTML es un sistema de marcado en contenedores. Para cada etiqueta abierta hay una etiqueta de cierre coincidente.

Por ejemplo, para el contenido más importante de una página o una sección de una página, usarías una etiqueta de encabezado 1 como esta.

<h1>Todo Sobre HTML</h1>
Al abrir la etiqueta<h1>y el contenedor se cierra con</h1>

del mismo modo, aquí es cómo un párrafo marcado:

<p>hace Varios años, un cliente y un buen amigo me sugirió que aprender WordPress. En ese momento estaba en contra de cualquier tipo de CMS. Poco sabía que llegaría a amarlo y enseñarlo a muchas personas en las aulas de la ciudad de Nueva York y a través de un seminario web.< / p>

Todo lo que necesita hacer es escribir su contenido en el Editor de texto, agregando sus etiquetas a medida que avanza o después de haber escrito la copia.

Aquí hay una explicación de las etiquetas más comunes que usará al escribir HTML. Son el encabezado, la lista, el enlace, la agrupación y algunas etiquetas diversas.

ETIQUETAS DE ENCABEZADO

<h1></h1>

<h2></h2>

<h3></h3>

• También hay etiquetas de encabezado h4, h5 y h6 que en la práctica rara vez se usan.
• Nunca use una etiqueta de encabezado con el propósito de alterar el tamaño de la fuente.

ETIQUETAS DE LISTA

Puede crear 3 tipos de listas con HTML. Las 2 listas más populares están ordenadas y desordenadas.

Se utiliza una lista desordenada cuando el orden de los elementos no es importante.

<ul>

<li>flores</li>

<li>verduras</li>

<li>árboles</li>

</ul>

• flores
• verduras
• árboles

Una lista ordenada se utiliza cuando el orden de los elementos es relevante.

<ol>

<li>California</li>

<li>Texas</li>

<li>Florida</li>

</ol>

1. California
2. Texas
3. Florida

(En este ejemplo, el orden es relevante y está determinado por las poblaciones más grandes en los estados unidos.)

NOTA: Las listas también se pueden anidar para crear una jerarquía de elementos de lista. Esto es difícil de hacer cuando se utiliza el Editor visual.

ETIQUETA DE ENLACE

Puede convertir texto o una imagen en un enlace envolviendo el texto o la imagen dentro de cualquier etiqueta de anclaje (enlace). Si bien la sintaxis para crear un enlace es siempre la misma (<a href=»url»>texto del enlace</a>), hay 2 formas muy comunes de hacerlo.

Para un enlace a una página WordPress, uso:

<a href=»http://domain.com/this-is-the-page-title»>link a una página WordPress</a>

Para un enlace a cualquier página o de recursos, no sólo de una página WordPress, uso:

<a href=»http://domain.com/about.html»>link a una página HTML</a>

NOTA: en realidad Hay una tercera vía. Puedes usar la forma especial en que WordPress crea enlaces con la siguiente sintaxis:

<a índice href=».php?page_id = 356 » > enlace a una página de su sitio< / a

En este caso, deberá conocer el id de página o publicación de la página a la que está enlazando en su sitio. (Cada página o publicación tiene un número de identificación único).

AGRUPAR ETIQUETAS

Técnicamente, no existen las «etiquetas de agrupación», pero es la mejor manera de describir un conjunto de etiquetas HTML que contienen otros elementos. El propósito de estas etiquetas es describir con mayor precisión el significado de su contenido.

Por ejemplo, la etiqueta < header> se puede usar para definir la parte de la página que contiene información inicial como esta:

<encabezado>

<h1> Una Línea de Encabezamiento< / h1>

<img src = «url del archivo de imagen»>

<p> Un párrafo de información que sigue al encabezado y a la imagen y que lógicamente se mantiene unido como un grupo de información.< / p>

</encabezado>

Aquí hay algunas etiquetas de agrupación muy comunes

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

OTRAS ETIQUETAS
Además de la etiqueta, encontrarás que estas etiquetas son muy útiles cuando trabajas con el Editor de texto.

<img src="url of image file">

<br>

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

<blockquote> or <q>

Si bien esas etiquetas te ayudarán mucho, aquí hay algunos recursos para ayudarte.

● Solo necesita 10 Etiquetas HTML (tutorial)
● Referencia de elemento HTML en Orden alfa
● Referencia de elemento HTML

Las Reglas

La belleza de HTML es que solo hay unas pocas reglas a seguir y son fáciles de recordar.

* HTML No distingue entre mayúsculas y minúsculas

Escribe HTML de la forma que quieras. La práctica común es en minúsculas.

* Para Cada Etiqueta Abierta Debe Haber Una Etiqueta De Cierre

Hay excepciones a esto, pero para que sea realmente fácil, adquiera el hábito de cerrar todas las etiquetas abiertas.

* Las etiquetas Se Cierran En El Orden Inverso En El Que Se Abren Dentro De Un Bloque

Esto puede ser un poco difícil de entender, así que aquí hay un ejemplo.

< p> Aquí hay un párrafo < strong> con <a href=»url aquí»>un enlace</a></strong> dentro y parte del texto está enfatizado.< / p>

Observe el pedido: < p> < strong> <a>….</a></strong></p>

* Algunos Elementos no Tienen Una Etiqueta de Cierre

Etiquetas como <br> y <img> no tiene etiqueta de cierre, ya que no hay razón para uno.

* Usa HTML Correctamente Y NO para Crear Estilo A Tu Página

Por ejemplo, no uses etiquetas <br> cuando tengas una lista. O no utilice etiquetas < table> para crear una cuadrícula para el diseño.

La barra de herramientas del Editor de texto

Debido a que me resulta eficiente escribir código en el Editor de texto, generalmente no uso la barra de herramientas. Sin embargo, si está comenzando con HTML, puede encontrar algunas de las herramientas útiles como una forma de aprender algo de HTML. En última instancia, te darás cuenta de que hay más etiquetas que puedes usar para marcar correctamente tu contenido de las que permite la barra de herramientas.

Complementos HTML

Tarde o temprano, notará que si crea un párrafo en el Editor Visual, no verá una etiqueta <p> que envuelve su copia cuando la vea en el Editor de texto. No dejes que eso te moleste. WordPress seguirá generando una etiqueta < p> cuando la copia aparezca en tu página.

Si tiene este u otros problemas con su código, es posible que desee usar estos complementos.

Editar siempre en HTML

Esto garantiza que cuando vaya a crear o editar contenido de página o publicación, su editor siempre se abrirá como Editor de Texto y no como Editor Visual. Esto puede ser muy útil, ya que WordPress puede eliminar tus etiquetas en algunas circunstancias en las que se utiliza el Editor Visual.

Preservar el marcado del editor HTML Más

Si tiene problemas para eliminar las etiquetas, esta podría ser su solución.

Resaltador de sintaxis del Editor HTML

Este es un complemento maravilloso que convierte el Editor de texto anodino en una cornucopia codificada por colores. También puede cambiar a un fondo negro y fuentes más grandes. Lo mejor es usar este plugin con la opción de Pantalla completa.

NOTA: No he probado dos o más de estos complementos al mismo tiempo, por lo que podrían existir incompatibilidades.

Cómo encajan los códigos cortos En la Imagen

Los códigos cortos son lo que muchos complementos usan para agregar un formulario, configurar columnas o agregar alguna otra característica a una página o publicación. Es una manera fácil de agregar código como HTML, javascript, CSS y PHP sin tener que saber nada sobre esos idiomas.

Utilice códigos cortos en el Editor de texto tal como lo haría en el Editor Visual.

Para los no iniciados, los códigos cortos pueden parecerse a HTML, pero no lo son.

Puede pegar un código corto de esta manera si está agregando un formulario de contacto, por ejemplo, con el popular complemento Formulario de contacto 7,

o puede usarlo de esta manera para un complemento,

Contenido para el lado izquierdo de la columna

Contenido para el lado derecho de la columna

Que crea dos columnas en una página.

Ese código corto se parece a HTML con una etiqueta de apertura y cierre, pero no es

Agregar estilo CSS Con el Editor de texto

Puede proporcionar propiedades de estilo CSS al contenido que agrega en el Editor de texto. Esto no se puede hacer con el Editor Visual predeterminado.

Con el Editor de texto se puede hacer de 2 maneras.

Una forma es agregar un id o un atributo de clase a un elemento HTML como en este ejemplo:

<p id= «lead» > Este es el párrafo principal de mi publicación.< / p>

Entonces, a tu estilo.archivo css añadirías las propiedades de estilo para # lead. Tal vez algo como esto:

#lead

{font-weight:bold;

text-align:center;

color:#f00;}

La segunda forma es agregar estilo en línea. (Sin embargo, el mejor enfoque es mantener su HTML y CSS separados como en el escenario anterior.) Puedes agregar estilos en línea como este:

<p style= «familia de fuentes: arial, helvetica, sans-serif»> La fuente de este párrafo es Arial.< / p>

NOTA: Esto anularía cualquier regla de estilo de familia de fuentes para este párrafo que pueda estar presente en un archivo externo o dentro del contenedor <head> de la página.

Conclusión

El Editor de texto le dará control total sobre cómo desea formatear el contenido de su página o publicación. Puede usar cualquier etiqueta HTML, no solo las de la barra de herramientas del Editor de texto. El resultado será un contenido que sea más fácil de leer y entender para las personas y las arañas de los motores de búsqueda. Puede llevar un poco de tiempo acostumbrarse a escribir HTML, pero al final, lo encontrará muy satisfactorio.

Biografía del autor

Bud Kraus [email protected] es un instructor veterano de WordPress en la ciudad de Nueva York y enseña WordPress para individuos y grupos a través de un seminario web. También trabaja en sitios para pequeñas empresas. http://joyofwp.com