HTML y CSS para WordPress

Actualizado: enero/2018 Versión: 4.9.x  Nivel: Básico

Hoy en día, gracias a las PLANTILLAS PREMIUM que existen para WordPress, prácticamente no es necesario tener conocimientos de HTML y CSS. Antiguamente para crear una página web era imprescindible tener conocimientos de HTML. De por si, todas las páginas web desarrolladas en la actualidad siguen estando creadas con este código de programación aunque ya no se crean a mano sino que se automatizan gracias a los gestores de contenido. Sin embargo, si eres ambisios@ y te gusta ir más allá, es recomendable que tengas algo de conocimientos de HTML y CSS para personalizar más tus proyectos.

1. HMTL, ¿eso qué es?

HTML, que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language), es el elemento de construcción más básico de una página web y se usa para crear y representar visualmente una página web. Determina el contenido de la página web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad (JavaScript).

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

2. CSS: hojas de estilo en cascada

Las hojas de estilo en cascada actualmente son utilizadas en un gran número de páginas web y blogs y ofrecen la posibilidad de dar vistosidad al sitio web además de reducir y simplificar el trabajo. En WordPress, las hojas de estilo en cascada o CSS (Cascading Style Sheets) son frecuentemente utilizadas en la creación de plantillas y son las que principalmente controlan el color, formato, tipografía y tamaños además de otros numerosos parámetros que permiten hacer que una página web se vea atractiva.

Al igual que sucede con HTML, en WordPress no es necesario tener conocimientos de CSS para crear una página web ya que con el uso de las plantillas esta tarea se simplifica mucho lo que hace que el desarrollo de la página 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 y es donde podrás añadir el contenido de tu página:

HTML y CSS para WordPress

Caja de edición de texto de WordPress

Como podrás observar, WordPress tiene 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. Si estás familiarizad@ con Microsoft Word, prácticamente es muy similar a este programa. Los elementos principales para la creación de contenido en WordPress son:

  • Añadir objeto: mediante este botón se añaden imágenes al contenido.
  • Selector “Párrafo”: con este selector puedes indicar si el texto es un párrafo o un título (H1) o subtítulo (H2 al H6).
  • Negrita y cursiva.
  • Alineación del texto: actualmente WordPress solo permite alinear el texto a la izquierda, centrado y derecha pero mediante un plugin se puede añadir el botón de justificar texto. Puedes encontrar más información en el artículo justificar texto en WordPress.
  • Botón de enlace.
  • Color del texto, entre otras.

En la parte superior derecha de la caja de edición de texto de WordPress 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.

A continuación te muestro un ejemplo de un texto hecho en WordPress: como se ve en el navegador y el código fuente del mismo texto.

HTML y CSS para WordPress

Contenido de una página web

HTML y CSS para WordPress

Código fuente en HTML del contenido

Como podrás observar se han utilizado títulos y subtítulos, enlaces, listas, negritas y color en el texto para dar un formato al contenido. Te habrás dado cuenta que para desarrollar el contenido de una página web en WordPress no es necesario tener conocimientos de HTML y CSS. Nunca está de más familiarizarse un poco con estos lenguajes que posiblemente te puedan ayudar para personalizar tu página mucho más de lo que WordPress te pueda permitir.

4. ¿Dónde aprender HTML y CSS?

Si quieres profundizar más sobre HTML y las hojas de estilo en cascada CSS puedes buscar en internet información y estudiar los conceptos más avanzados. Yo te recomiendo estas páginas pero puedes buscar otras que sean de tu agrado:

La finalidad de este artículo no era que aprendieras HTML y CSS sino que sepas que estos códigos de programación existen y que son actualmente utilizados para el desarrollo de páginas 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?

Valora este artículo: 1 punto2 puntos3 puntos4 puntos5 puntos (2 votos, promedio: 5,00 de 5)

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia.

COMPARTE ESTE ARTÍCULO EN...

¿QUIERES APRENDER WORDPRESS DESDE CERO?

Suscríbete y recibe información para crear tu propia página web con WordPress.