HTML y CSS para WordPress

Actualizado: junio/2019 Versión: 5.2.x  Nivel: Medio

HTML y CSS para WordPress

Cuando se comenzaron a desarrollar sitios web, era necesario tener conocimientos de HTML. Hoy en día, gracias a los CMS, prácticamente no es necesario tener conocimientos de códigos ni programación.

De por si, la mayoría de sitios web desarrollados en la actualidad están creados con este lenguaje aunque ya no se hacen a mano sino que se automatizan gracias a los gestores de contenido.

Sin embargo, si eres exigente y te gusta un trabajo bien hecho, es recomendable que tengas algo de conocimientos de HTML y CSS para personalizar más tus proyectos.

1. HMTL, ¿eso qué es?

Si estás usando WordPress para diseñar tu sitio web, te preguntarás, ¿por qué tengo que aprender HTML?

En realidad no es necesario que conozcas este lenguaje para crear un sitio web con WordPress. Sin embargo, si te familiarizas con HTML, te ayudará a entender y personalizar tu sitio web ya que, el código fuente de WordPress, está desarrollado con HTML.

HTML, que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language), es el lenguaje de construcción más básico de un sitio web y se usa para crear y representar visualmente sitios web.

Determina el contenido del sitio web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de un sitio web (CSS) o su funcionalidad (JavaScript).

En WordPress, HTML se utiliza en la caja de edición de texto. Todo lo que allí se escriba estará etiquetado y será parte del HTML del sitio web.

2. CSS: hojas de estilo en cascada

Las hojas de estilo en cascada, CSS (Cascading Style Sheets), actualmente son utilizadas en un gran número de sitios web y ayudan a mejorar el diseño visual además de reducir y simplificar el trabajo.

En WordPress, las hojas de estilo en cascada, son frecuentemente utilizadas en la creación de plantillas y controlan principalmente el color, formato, tipografía y tamaños además de otros parámetros que permiten hacer que un sitio web se vea atractivo.

Al igual que sucede con HTML, en WordPress no es necesario tener conocimientos de CSS para crear un sitio web ya que, con el uso de las plantillas, esta tarea se simplifica mucho lo que hace que el desarrollo del sitio sea una tarea sencilla.

3. Caja de edición de texto de WordPress

La siguiente imagen representa la caja de edición de texto de WordPress:

HTML y CSS para WordPress

Caja de edición de texto de WordPress

En este editor de texto es donde, normalmente, se añade cualquier tipo de contenido en una página y/o entrada en WordPress.

Con la llegada de los editores de contenido, la caja de edición de texto de WordPress cada vez se utiliza menos.

Fíjate en la siguiente imagen:

HTML y CSS para WordPress

Editor de texto de Elementor

Como podrás observar, la imagen corresponde al bloque Editor de Texto de Elementor. Este editor de texto es prácticamente igual al editor de texto nativo de WordPress pero ahora es un elemento dedicado solo al texto.

Los editores de texto cuentan con todo lo necesario para que puedas redactar el contenido sin necesidad de tener conocimientos de HTML y CSS.

Cada uno de los elementos añade etiquetas HTML y CSS al código automáticamente a medida que los vas usando.

En la parte superior derecha de la caja de edición de texto podrás observar que hay dos pestañas: Visual y HTML.

  • En la pestaña Visual es donde se añadirá el contenido. Podrás asignar títulos, subtítulos, enlaces, alinear el texto, dar color al texto y todo lo que se te ocurra para que tu contenido sea llamativo e interesante.
  • En la pestaña HTML es donde podrás observar todo el contenido que anteriormente has creado en formato "código" con todas las etiquetas HTML que dan formato al texto.

Ten en cuenta que este editor de texto (Elementor) se utiliza para textos como párrafos, títulos y subtítulos.

Para archivos multimedia como imágenes, audios y vídeos, existen elementos individuales y ya no será necesario añadirlos desde el editor de texto como se hacía anteriormente con WordPress.

Elementor

Aunque la versión Lite (gratis) de Elementor te permitirá desarrollar un sitio web, para el desarrollo de este curso, vamos a utilizar la versión PRO para sacar el máximo provecho y conseguir un diseño profesional.

4. Reglas básicas HTML y CSS en WordPress

A continuación te indico algunas de las reglas HTML y CSS que más se utilizan en el editor de texto. Tu trabajarás en la pestaña Visual y la regla HTML se creará en la pestaña HTML.

La idea es que te familiarices con el uso de estos códigos por si en algún momento quieres personalizar el contenido de tu sitio web.

4.1 Párrafos y textos

En la pestaña HTML:En la pestaña Visual:
<p style="text-align: left;">Alineado a la izquierda</p>

Alineado a la izquierda

<p style="text-align: center;">Centrado</p>

Centrado

<p style="text-align: right;">Alineado a la derecha</p>

Alineado a la derecha

<strong>Texto en negrita</strong>Texto en negrita
<em>Texto en cursiva</em>Texto en cursiva

Para alinear un texto o párrafo hay que añadir la etiqueta <p> (paragraph, párrafo en inglés) y el estilo correspondiente mediante la propiedad "style" que es código CSS.

Aunque <p style="text-align: left;"> se utiliza para alinear un texto a la izquierda, no se necesario utilizarlo ya que, por defecto, cualquier texto se alinea a la izquierda ya que así funciona nuestro idioma.

4.2 Enlaces

En la pestaña HTML:En la pestaña Visual:
<a href="URL">Esto es un enlace</a>Esto es un enlace
<a href="URL" target="_blank">Este es otro enlace</a>Este es otro enlace

En este caso el primer enlace abre en la misma ventana. El segundo enlace, gracias a la propiedad target="_blank", hace que el enlace abra en una nueva ventana (o pestaña) del navegador.

En la etiqueta href="URL" es donde se declara el destino del enlace siendo URL el enlace de destino.

Por ejemplo: https://es.wordpress.org/.

4.3 Títulos y subtítulos

En la pestaña HTML:En la pestaña Visual:
<h1>Título h1</h1>

Título h1

<h2>Título h2</h2>

Título h2

<h3>Título h3</h3>

Título h3

<h4>Título h4</h4>

Título h4

<h5>Título h5</h5>
Título h5
<h6>Título h6</h6>
Título h6

Los títulos y subtítulos tienen las etiquetas h1 hasta h6, donde h1 es el título principal y solo puede existir 1 en una página o entrada.

Desde h2 hasta h6 son subtítulos y pueden haber varios siempre y cuando se respete la jerarquía.

A los títulos y subtítulos también se les puede aplicar las propiedades de los párrafos y enlaces: alinearlos a la izquierda, derecha o centrarlos.

En la pestaña HTML:En la pestaña Visual:
<h2 style="text-align: center;">Título h2 centrado</h2>

Título h2 centrado

<h3 style="text-align: right;">Título h3 a la derecha</h3>

Título h3 a la derecha

<h4><a href="#">Título h4 con enlace</a></h4>

Título h4 con enlace

4.4 Listas

En la pestaña HTML:En la pestaña Visual:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
  • Elemento 1
  • Elemento 2
  • Elemento 3
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

La primera es una lista con viñetas y la segunda es una lista numerada que podrás utilizar según las necesidades del contenido.

En el código HTML, las listas con viñetas tienen la etiqueta <ul> y las listas numeradas tienen la etiqueta <ol>.

4.5 Uso de una clase con CSS

Para ver el uso de una clase con CSS, supongamos que queremos formatear un texto en color rojo, centrarlo y modificar el tamaño de la fuente.

El código CSS sería algo como:

.textorojo {color:#FF0000; text-align:center; font-size:24px;}

Donde:

  • .textorojo es el nombre de la clase.
  • color: #FF0000; es el color rojo en formato hexadecimal.
  • text-align: center; es la alineación del texto.
  • font-size: 24px; es el tamaño del texto.

Cuando se declara una clase en un archivo .css, el nombre de la clase deberá comenzar con un "punto".

El código HTML quedaría de la siguiente manera:

<p class="textorojo">Ejemplo de uso de CSS</p>

Como puedes observar, dentro de la etiqueta <p> (párrafo) se ha añadido la clase con el formato class="textorojo".

El resultado sería el siguiente:

Ejemplo de uso de CSS

5. Margen, padding & border

Otros conceptos fundamentales que debes conocer, cuando se trabaja con editores de contenido, son: margin (margen), padding (relleno) y border (borde).

Estas son propiedades de CSS que se suelen aplicar mediante reglas al contenido aunque, con los editores de contenido como Elementor, solo tendrás que escribir los valores en unos recuadros sin necesidad de utilizar código.

  • Contenido: es el elemento de un sitio web al que se le aplican estas propiedades.
  • Border: es el borde del contenido.
  • Padding (espacio interno): es el espacio entre el borde y el elemento. Los valores solo pueden ser positivos.
  • Margin (espacio externo): es el espacio entre el borde y el exterior. Los valores pueden ser positivos y negativos.

En las propiedades border, padding y margin se indican 4 valores en el siguiente orden:

  • Top: el valor superior (arriba).
  • Right: el valor de la derecha.
  • Bottom: el valor inferior (abajo).
  • Left: el valor de la izquierda.

En la siguiente imagen se ilustra cómo se aplican estas propiedades a un elemento.

HTML y CSS para WordPress

Márgenes, paddings y bordes en un elemento

El recuadro interno de color negro es el contenido y el recuadro de color rojo es el borde.

Por defecto, el borde suele ser una línea imaginaria (invisible) que pertenece al elemento. Cuando se indican valores para esta propiedad es cuando se vuelve visible.

6. ¿Dónde aprender HTML y CSS?

Si quieres aprender más sobre HTML y CSS puedes buscar en Internet información y estudiar conceptos más avanzados.

Te recomiendo estas páginas pero puedes buscar otras que sean más de tu agrado:

La finalidad de esta lección no es que aprendas HTML y CSS sino que te familiarices con estos códigos que son actualmente utilizados para el desarrollo de sitios web con WordPress.

Igualmente, no está de más ampliar este tipo de conocimientos ya que nunca sabrás cuando los puedas necesitar.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(4 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de actualizaciones

Suscríbete para recibir notificaciones de las actualizaciones del curso en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.