Formato de entradas de blog y HTML básico

¡El formato de las entradas de blog no requiere que sepas mucho HTML pero definitivamente ayuda!

Si quieres que tu blog sea tomado en serio entonces necesitas dominar el formato de tus entradas de blog.

Esto también significa aprender algunos trucos básicos de HTML para ayudar a que tus artículos sean interesantes y tengan un estilo consistente.

Ahora no te preocupes, no estoy diciendo que necesites convertirte en un programador o algo así para crear entradas de blog atractivas y desinformadas, pero recoger algunas habilidades esenciales ayudará mucho.

WordPress es un CMS (Sistema de Gestión de Contenidos) y como tal no requiere que codifiques todo tú mismo.

Hay herramientas para eso.

La mayor parte del código está oculto para evitar que algo se rompa y tienes un editor WYSIWYG (What You See is What You Get) para escribir y dar formato a las entradas del blog y las páginas.

Si has estado usando WordPress por un tiempo, entonces sabrás que hay una pestaña Visual y de Texto en la parte superior derecha del editor de contenido que le permite cambiar de la versión con estilo de su puesto y el HTML crudo.

Para los novatos.

Visual = Editor Visual de WordPress

Texto = Editor HTML de WordPress / Texto sin procesar

La mayoría de los principiantes se sienten abrumados y asustados cuando ven el HTML sin procesar en la pestaña de texto por primera vez y rápidamente vuelven atrás.

Pero esto no tiene por qué ser así y te convertirás en un blogger mucho mejor si te tomas el tiempo necesario para sentirte cómodo trabajando y editando en este modo.

Con un poco de práctica, puedes dominar fácilmente algunos de los aspectos básicos, la sintaxis es en realidad bastante lógica.

Sintaxis (definición informática): La estructura de las declaraciones en un lenguaje informático.

¿Y qué es HTML?

HTML significa Hypertext Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje de programación utilizado para crear páginas y aplicaciones web.

HTML le permite crear una funcionalidad básica que luego puede estilizar con CSS (Cascading Style Sheets).

Fue creado en 1990 por Tim Berners-Lee, un héroe personal mío al que también se le atribuye la invención de internet, pero no voy a enseñarte todo sobre HTML y la historia pero si eres de los curiosos, puedes seguir leyendo en Wikipedia.

Sólo estamos aquí para ver cómo HTML pertenece a la escritura y edición de posts y páginas de WordPress.

Cuando veas código desconocido en la pestaña de Texto del editor de WordPress estás viendo HTML y en algunos casos, puede incluir algunos estilos CSS en línea.

Ejemplo de HTML

<h2>This is a title</h2>

Las partes que están resaltadas en rojo son HTML y en este ejemplo, ves una etiqueta de título h2 de apertura al principio y la etiqueta de título h2 de cierre al final.

¿Notas que la única diferencia es que la etiqueta de cierre tiene una barra invertida antes del nombre de la etiqueta? Así es como puedes ver rápidamente cuando tu HTML se ha abierto y cerrado.

Este es un gran consejo para detectar errores o HTML roto.

Ejemplo de HTML con CSS en línea

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

En el ejemplo anterior, hemos utilizado el mismo h2, sin embargo, esta vez hemos utilizado HTML para llamar a una pieza de CSS para cambiar el color a rojo. Observa que la única parte que es realmente CSS está resaltada en rojo.

En realidad, no verás mucho CSS en línea porque la mejor manera es dar estilo a tus elementos HTML con archivos CSS externos, esta es la forma típica en que los Temas de WordPress aplican estilos a la página de tu blog automáticamente.

Personalmente no aconsejo el estilo de su HTML en línea en el editor de WordPress, pero es importante ser consciente de ello en caso de que alguna vez tenga que editar o limpiar el código que ha encontrado su camino en otras fuentes como un plugin o de copiar y pegar de otra fuente.

Inevitablemente se beneficiará de ser capaz de limpiar las cosas cuando los gremlins (no es un término técnico) encuentran su camino en su contenido.

Así que vamos a ver cómo añadir HTML a los mensajes de WordPress y los mensajes y las páginas y lo que usted necesita saber.

Esenciales básicos de HTML de WordPress

Cuando estés añadiendo HTML para dar estilo a tu contenido debes recordar envolver tu contenido con las etiquetas de apertura y cierre pertinentes.

Ejemplo:

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

Hay ejemplos de elementos HTML útiles que no requieren una etiqueta de cierre porque se cierran solos.

Un ejemplo es el salto de línea <br> que funcionará sin una etiqueta de cierre, esto se debe a que los saltos de línea no tienen ni pueden tener contenido dentro.

Etiquetas de encabezado &Subencabezados

Hay varios tipos de encabezado en un post de WordPress, primero, tienes el encabezado del título del post, este es un <h1> y luego tienes la posibilidad de añadir títulos de encabezado a tu contenido para ayudarte a agrupar tus pensamientos.

Estos van desde h1 (Encabezado 1) hasta h6 (Encabezado 6) y su tema normalmente los estilizará para que tengan el tamaño apropiado.

Dado que el título de su página o post es automáticamente un h1, usted quiere evitar usar esto en su contenido ya que cualquier otra instancia competirá con el título principal que es el nombre de su post.

En su lugar, sigue el proceso de ordenación semánticamente correcto y la primera vez que necesites usar un título de sección baja al título de la sección h2.

Aunque puedes establecerlos fácilmente usando el desplegable en la parte superior izquierda del editor de posts WYSIWYG, es útil saber cómo funcionan en formato HTML para poder corregir cualquier error.

Aquí tienes algunos ejemplos

<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>

Con suerte, estás empezando a ver un patrón aquí con la sintaxis HTML.

Todos los elementos HTML comienzan con una apertura <

También se cierran con un cierre >

Los elementos de apertura pueden contener simplemente el nombre del elemento.

Las etiquetas de cierre contienen una barra oblicua después de su apertura < y antes del nombre del elemento HTML que están cerrando.

Sólo con familiarizarse un poco con lo anterior te pondrá a pasos agigantados más allá de la mayoría de los bloggers que utilizan WordPress.

Negrita o Cursiva

Cuando quieras enfatizar un punto y llamar la atención sobre ciertas palabras es posible que quieras usar negrita o cursiva para hacerlas resaltar.

Definitivamente prefiero este enfoque a TODAS LAS MAYÚSCULAS, que para mí es como gritar.

El HTML para la negrita es <strong> y para la cursiva es <em>.

Dato curioso: Strong es fácil de recordar para poner algo en negrita, pero ¿por qué el elemento cursiva utiliza em? Em es una abreviatura de énfasis. Eso podría ayudar a que se pegue.

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

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

Además, puedes usar el WYSIWYG de WordPress, por supuesto, o el atajo de teclado CTRL + B para negrita y CTRL + I para cursiva después de resaltar el texto que quieres modificar.

Para una lista completa de atajos de teclado de WordPress y otros métodos de formato, ve aquí.

Hay algunas reglas sobre cómo debe y no debe utilizar estos incluyendo mantenerlos mutuamente excluyentes, reservarlos para frases cortas y utilizarlos con moderación.

Practical Typography tiene un gran artículo que explica la importancia de estas reglas.

Si está escribiendo un texto que realmente atraiga a la gente, como un texto de ventas, entonces estas reglas pueden doblarse, pero no romperse.

Enfatizar

Recuerde, si se enfatiza todo, ¡no se enfatiza nada!

Listas – Ordenadas &Desordenadas

Hay dos tipos de listas que puede añadir usando HTML y que también son soportadas por el WYSIWYG de WordPress.

Estas son:

Listas Ordenadas – <ol>

Las listas ordenadas se muestran como una serie de elementos numerados. Esto es útil cuando se escribe una lista donde el orden es importante.

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

El código anterior se convierte en:

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

Listas desordenadas – <ul>

Las listas desordenadas son esencialmente listas con viñetas.

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

Y ésta se convierte en la siguiente lista de viñetas.

• Item 1
• Item 2
• Item 3

Todos sabemos lo útiles que son las listas y además ayudan a romper tu contenido y a que parezca más interesante.

Una diferencia clave que notarás aquí es que hay elementos de lista individuales <li> y están envueltos en su totalidad con una envoltura <ol> o <ul>.

Esto es importante tenerlo en cuenta, porque si la envoltura <ol> o <ul> faltan los elementos de la lista no se renderizarán.

Imágenes

Otro aspecto importante a la hora de dar formato a una entrada de blog o a cualquier página con WordPress es el uso de imágenes y no deberías tener problemas para encontrar algunas fotos interesantes que puedes conseguir en Yahoo imágenes y otros sitios web de imágenes libres de derechos. Algunas de estas opciones son de pago, pero muchas de ellas son gratuitas siempre que des crédito con una mención de la Fuente y un enlace.

Un pequeño precio a pagar para tener imágenes profesionales en tu sitio web o blog.

Una imagen vale más que mil palabras, como dicen, también proporcionan a tus lectores estímulos visuales, así como pausas para ayudar a romper tu contenido en trozos digeribles.

Esto ayuda a mantener a tus lectores comprometidos y, aunque no necesitas codificar las imágenes tú mismo, entender la sintaxis es útil.

Aquí tienes un ejemplo de código de imagen y cómo se verá cuando mires la pestaña Texto de tu editor.

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

Una imagen no requiere una etiqueta de cierre porque toda la información que necesita está contenida dentro de los corchetes de apertura y cierre del elemento HTML. El src simplemente llama a la ubicación de la URL.

WordPress te permite flotar tus imágenes a la izquierda, a la derecha o puedes centrarlas. Si lo haces y compruebas el código en la pestaña Texto verás que se han añadido clases que se utilizan para dar estilo a las imágenes en consecuencia.

Este es un ejemplo en el que se está utilizando CSS externo para aplicar diferentes estilos a diferentes imágenes. Es útil saberlo.

Importante: Antes de añadir imágenes a tus posts y páginas asegúrate de que están optimizadas para la velocidad y los motores de búsqueda.

Embeds

Invitablemente querrás usar códigos embed de sitios web externos.

Un ejemplo es cuando quieres añadir un vídeo de YouTube o Vimeo, vas a compartir y te da un código largo que puedes copiar.

Lo principal a recordar es que no puedes pegar HTML o cualquier otro código en la pestaña visual del editor de contenido. Si lo haces, el código se desordena y se vuelve inútil cuando pulsas el botón de guardar.

Asegúrate de ir a la pestaña de texto y luego pegarlo donde quieres que aparezca.

Abajo hay un ejemplo de código incrustado de YouTube.

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

Aunque WordPress te permite simplemente pegar una URL de YouTube en tu post para mostrarlo como un vídeo, esto puede no darte un control total sobre las dimensiones del vídeo y los otros ajustes incrustados.

Por esta razón, y porque soy de la vieja escuela, todavía uso el código de incrustación iframe.

La mayoría de los sitios web que ofrecen códigos de incrustación no son soportados de forma nativa por WordPress y por lo que todavía tendrá que ser consciente de los códigos de incrustación, iframes y cómo funcionan para ser capaz de añadir multimedia a sus mensajes.

Códigos cortos

Los códigos cortos no son HTML. De hecho, ni siquiera son un lenguaje de programación, son una función nativa de WordPress que permite a los desarrolladores de plugins y temas crear formas sencillas para que tú y yo podamos añadir elementos a nuestras páginas web y posts.

El ejemplo más sencillo que aparece en casi todos los blogs es un shortcode de formulario de contacto, pero hay cientos, si no miles, de usos potenciales para los shortcodes que incluyen la capacidad de añadir:

• Tablas
• Galerías
• Paquetes de precios
• Vídeos
• Imanes de clientes potenciales / formularios de suscripción por correo electrónico
• Episodios de podcast

Aquí tienes un shortcode para un formulario de contacto generado por el plugin Contact Form 7, uno de nuestros plugins recomendados que instalamos en el 90% de nuestros sitios y blogs.

Nota: Tuve que añadir espacios después de la apertura y antes de los paréntesis de cierre para que no se mostrara realmente el formulario de contacto, así que imagínate sin los espacios.

Nota que la sintaxis de un shortcode es diferente. Comienzan con un paréntesis de apertura en lugar de < y >.

Luego son formateados por el desarrollador del shortcode para facilitarte el ajuste y el cambio de las configuraciones esenciales.

Cuando se carga la página web, este formulario de contacto realmente carga unas 20 líneas de HTML desordenado, por lo que es mucho más fácil para ti cuando puedes acceder a un shortcode.

La única advertencia es que no quieres abusar de los shortcodes ya que ralentizarán tus páginas web.

Son útiles para conocer y pueden hacer que el proceso de edición de su puesto mucho menos engorroso cuando usted no tiene que utilizar grandes cantidades de HTML que no entiende y tiene que trabajar con cautela alrededor.

Consejos de formato varios

Hay varios otros consejos que aconsejo a los nuevos estudiantes de WordPress tener en cuenta y que voy a cubrir brevemente.

Estos incluyen:

• No añadas saltos de línea innecesarios. Esto significa que trate de no usar la etiqueta HTML <br> y evite pulsar dos veces enter entre párrafos y secciones a menos que sea absolutamente necesario. Hace que tus artículos parezcan desordenados y estás destinado a crear inconsistencias.
• No añadas familias de fuentes, tamaños y colores específicos para cada página – De nuevo, esto hace que tus artículos parezcan horrendos y como si hubieran sido creados en 1995. Podrías pensar que ese título verde de tamaño personalizado con una fuente única atrae la atención cuando en realidad sobresale como inconsistente, y poco profesional. Tu tema debe dictar estos estilos.
• Nunca añadas código HTML o incrustado en la pestaña Visual – Esto puede llevar a resultados inesperados, implicar mucha limpieza o romper tu página por completo.
• Nunca subas vídeos a WordPress – El alojamiento de tu sitio web no está construido para entregar contenido de vídeo. Afortunadamente, YouTube y Vimeo proporcionan un alojamiento de vídeo súper rápido y 100% gratuito de todos modos. Por eso es mejor incrustar vídeos de YouTube aunque sean propios.

Nada demasiado complicado pero a menudo veo que la gente comete estos errores y se complica la vida.

Pero pronto, las cosas podrían ser diferentes, ¡muy diferentes de hecho!

Gutenberg, ¿el futuro del blogging?

Gutenberg es un nuevo editor de contenidos que está siendo construido desde cero por WordPress y que llegará a una instalación cercana a ti muy pronto.

¿Es el futuro de los blogs? ¿Quién lo sabe? Pero definitivamente es el futuro de WordPress así que es hora de ponerse a ello.

Gutenberg es una bestia diferente.

Si alguna vez has usado Medium.com para bloguear, entonces cuando pruebes Gutenberg por primera vez se sentirá extrañamente similar.

En mi opinión, esto es algo bueno, el editor de contenido libre de distracciones de Medium es maravillosamente fácil de usar y ver que WP toma nota de esto es algo positivo para todos los involucrados en la ejecución de blogs y sitios web que se ejecutan en WP.

El editor de Gutenberg también es modular y te permite arrastrar y soltar bloques en tu contenido que cada uno tiene un propósito diferente.

Esto es similar a cómo los plugins del constructor de páginas y ciertos temas proporcionan actualmente este tipo de solución de arrastrar y soltar, pero ahora estas características están llegando a WordPress por defecto.

Si hay un aspecto de WordPress que no ha evolucionado mucho a lo largo de los años ha sido el editor TinyMCE, así que doy la bienvenida a esta innovación con los brazos abiertos.

Si tienes problemas con el formato de las entradas del blog con el editor actual, ya puedes probar Gutenberg descargándolo e instalándolo yendo a plugins en tu dashboard y buscando «Gutenberg».

Formateo de entradas de blog & HTML básico final de Word

Si dedicas un poco de tiempo a practicar lo anterior obtendrás un control mucho mayor sobre tu contenido y la forma en que se presenta.

Con suerte, ahora te sientes un poco más cómodo con el formateo de entradas de blog y el uso básico de HTML.

Estas habilidades pueden ahorrarte mucho tiempo, dinero y rascarte la cabeza cuando el formato de tu contenido va mal o no se renderiza correctamente.

Aunque los fundamentos anteriores son suficientes para la mayoría de los bloggers y propietarios de sitios web de WordPress, si tienes curiosidad por aprender más, hay algunos sitios web gratuitos donde puedes aprender HTML, incluyendo CodeAcademy y w3Schools.

Ahora, ¡ve y haz que tu contenido sea bonito! 🙂

Si has encontrado este artículo útil, considera la posibilidad de revisar algunas de nuestras otras guías de blogging útiles como nuestra Lista de verificación de entradas de blog: Essentials Guide o How to Repurpose Content y si eres fan de este tipo de guías, suscríbete a mi newsletter y compartiré mis mejores contenidos y descubrimientos contigo vía email.