Articles

MarkoSaric

Este artículo es una ventanilla única para sus códigos HTML de WordPress. Aquí está la lista de etiquetas y códigos HTML de WordPress más utilizados para crear contenido. Guarda la lista y úsala como referencia al componer tus publicaciones y páginas de blog de WordPress.

WordPress HTML en el editor de Gutenberg

WordPress es una de las mejores plataformas de blogs. Millones de personas y marcas lo utilizan para crear sitios de gran apariencia.

Esta guía es válida tanto para la versión alojada como para la alojada de WordPress. Ver la diferencia entre WordPress.com o WordPress.org.

WordPress 5.0 con el nuevo editor de Gutenberg lanzado en diciembre de 2018 ha mejorado y facilitado drásticamente la forma en que trabajas con etiquetas HTML dentro de tus publicaciones de blog y páginas.

¿Cómo se muestra el código HTML en las publicaciones editadas por Gutenberg? Simplemente agrega el bloque “Código” y escribe tu código. Mostrará el código a sus visitantes.

¿Cómo editas tus publicaciones de Gutenberg usando HTML? Simplemente haga clic en “Editar como HTML” en el menú de opciones del bloque en particular que desea editar.

También puedes agregar el bloque” Clásico “o el complemento” Editor Clásico ” para tener el antiguo editor WYSIWYG que describo más abajo en este post.

Editor clásico: ¿Cuál es la diferencia entre Texto y Visual?

Tiene dos opciones de edición al componer una publicación de blog o una página en el editor clásico de WordPress. Puede utilizar la vista “Visual” predeterminada o el modo” Texto”.

En el modo visual, puedes ver el contenido tal como está. El modo visual se llama WYSIWYG, que significa exactamente lo que hace el modo visual: Lo que Ves Es Lo Que Obtienes.

Usted ve su contenido de la manera en que sus visitantes lo verán en sus navegadores y tiene botones simples para ayudarlo a editar. La mayoría de las personas usan este editor de publicaciones “Visual” en WordPress al crear su contenido.

En el modo texto, verá el código y las etiquetas HTML. Este modo de texto te permite agregar cualquier código HTML a cualquiera de tus publicaciones de blog o páginas. El editor de texto basado en HTML se ve más aterrador y no es tan popular entre los principiantes.

Pero, ¿qué pasa si sabes codificar o quieres un poco más de control sobre el diseño y la estructura al crear tus publicaciones o páginas? Deberías usar el editor de “Texto”.

¿Cómo editar HTML en el Editor Clásico de WordPress?

Entonces, ¿cómo se llega al editor de texto HTML? En tu publicación de administrador de WordPress o sección de escritura de páginas, haz clic en la pestaña” Texto”. Es en el editor de texto donde agregas y editas todas tus etiquetas HTML.

Cómo agregar código HTML a una publicación o página de WordPress?

Simplemente puede escribir o pegar cualquier código HTML directamente en su editor de “Texto” de WordPress. Pruébelo con cualquiera de las etiquetas más utilizadas de mi lista a continuación.

Cópielo aquí en el sitio, péguelo en el editor de texto y “previsualice” su publicación o página para ver cómo lo verán sus visitantes.

A veces sucede que el código se elimina al cambiar de modo de texto a modo visual.

Tenga cuidado y verifique que esto no le haya sucedido. O intente atenerse al editor de texto solo si planea escribir código para no encontrar este problema.

Para aquellos que se sienten cómodos con la codificación, incluso puede desactivar el editor “visual”. Entra en ” Usuarios “en el menú de navegación de WordPress, haz clic en” Tu perfil “y selecciona”Desactivar el editor visual al escribir”.

Copiar y pegar entre Google Docs, Microsoft Word y WordPress

La versión de WordPress 5.0 ha hecho que sea fácil y sencillo copiar cualquier contenido de Google Docs o Microsoft Word y pegarlo en tus publicaciones y páginas de WordPress.

Esto no siempre fue fácil. Cuando trabaja con HTML en el Editor Clásico, puede notar algunos caracteres de galimatías a veces.

Esto puede suceder si copia / pega desde Microsoft Word en WordPress. Una fuente útil al pegar código HTML de Word en el editor de WordPress es Postable.

Copie / pegue su HTML de Word (u otra fuente) en la herramienta para obtener una versión amigable y limpia de WordPress del código que luego puede insertar en su contenido.

¿Cómo muestro los códigos HTML en las publicaciones de mi blog como texto normal?

¿Qué tal si deseas insertar y mostrar etiquetas HTML y otros códigos dentro de tu publicación para que tus visitantes los vean como texto normal?

¿Algo así como lo estoy haciendo aquí en mi artículo? Todavía usas el editor de texto, pero envuelves tu código de esta manera:

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

Complementos de sintaxis HTML de WordPress para una mejor visualización del código

Hay algunos complementos de WordPress que pueden ayudarlo con este proceso y también le permiten editar el diseño y la forma en que se presenta el código en su blog para sus visitantes.

Recomiendo los dos siguientes. SyntaxHighlighter Evolved es la opción más popular, mientras que Pastacode es la que funciona mejor para aquellos que usan Creadores de páginas al diseñar un blog.

Códigos y etiquetas HTML de WordPress más utilizados

Insertar una imagen

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

Haga que la imagen se pueda hacer clic en un nuevo destino

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

Insertar un enlace

Tenga en cuenta que el texto de anclaje es la parte visible de su enlace. Es la palabra o frase en la que tus visitantes harán clic para llegar a la página a la que estás enlazando.

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

Hacer el enlace nofollow

Para fines de SEO, es posible que necesite hacer parte de su enlace nofollow. He aquí cómo:

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

Haga que el enlace se abra en una nueva ventana del navegador

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

Enlace a una sección específica en una página larga

Estos se llaman saltos de página. Sus visitantes pueden hacer clic en un enlace y moverse a algún lugar más abajo o arriba del artículo.

Esto es especialmente útil para aquellas guías más largas que desee dividir en diferentes capítulos utilizando la tabla de contenido.

La primera parte de crear un salto de página es asignar una sección (o destino) a la que desea vincular.

Coloque este código en la sección de su página a la que desee vincular. La segunda parte es enlazar a esa sección asignada desde tu introducción o tu tabla de contenidos.

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

Esto también funciona si quieres enlazar a una sección específica de tu página desde otro artículo de tu blog. Puede insertar un enlace a este destino: https://yourblog.com/yourpost/#Specific-section.

Así es también como funcionan los enlaces “volver al principio”. Asigne un nombre de sección a la parte superior de su publicación e incluya un botón “ir a la parte superior” en la parte inferior de su publicación que enlace a la sección superior.

Crear títulos y subtítulos prominentes

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

Insertar un salto de línea

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

Crear un nuevo párrafo

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

Crear una lista con viñetas

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

Crear una lista numerada

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

Resaltar texto en una publicación con fondo amarillo (o de cualquier otro color)

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

Asigne el número de un elemento de su lista numerada

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

Haga una lista de letras

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

Haga una lista de números romanos

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

Centre su texto

<center>to be centered</center>

su texto en negrita

<strong>to be bold</strong>

Haga su texto en cursiva

<em>to be italic</em>

Cambiar el color del texto

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

Insertar una blockquote

<blockquote>Your quote</blockquote>

Crear una tabla

Deja una respuesta

Tu dirección de correo electrónico no será publicada.